Logo & Symbol Design

◄Page 22►

Spotlight

Spotlight on blue three dimensional logo prepared with 3ds Max, WebGL and GLSL shaders. See the animated spotlight. See the GLSL fragment shader, below.

Games Spotlight on Logo

Original Interactive Spotlight

The logo was prepared with 3ds Max. A spotlight was implemented with GLSL shader lighting. The original interactive spotlight renders with WebGL, JavaScript and GLSL. Swipe over the original to make the spotlight move.

See the animated spotlight.

GLSL Fragment Shader

I explain the following shader in my book Simple Shaders: Learn WebGL Book 4.

precision mediump float;
uniform sampler2D u_sampler0;
varying vec2 v_tex_coord0;
uniform vec2 uf_time;  
const float cf_radius = 0.25;
const float cf_bright = 2.0;
     
void main(void) {  
float f_dist = distance(v_tex_coord0,uf_time); 
vec4 v4_color =  texture2D(u_sampler0, v_tex_coord0);
 
if (f_dist < cf_radius){
v4_color.rgb *= cf_bright;  
}
     
gl_FragColor = v4_color;     
}

Logos and Symbols

Often the terms logo and symbol refer to two different aspects of a product's branding. Logo usually involves a brand's name in a specific font along with a standalone symbol. For example the Nike swoosh represents Nike apart from the text which says Nike. The swoosh alone is the symbol.

The best symbols provide quick brand recognition. The ideal symbol looks great in black and white reduced down to one half inch square. Prepare a color version as well, to grab attention. However black and white symbols work on packaging with limited color options. Successful products can omit both the logo text and color scheme yet people continue to recognize the brand by the symbol.

Tags