Crear un banner o Logo online

Hola nuevamente, les eh preparado a un pequeño tutorial acerca de cómo crear un banner. Este banner no es tan vistoso como los que podrían hacerse con Fotoshop, flash u otros programas de diseño, pero nos servirá para la lección de cómo crea una web paso a paso con dreamweaver. Además, como no se requiere ningún programa o software para crearlo resulta muy útil para los que recién empezamos y no sabemos manejar muy bien los programas de diseños mas avanzados.

Primeramente, se que es muy obvio pero quizá alguno no entienda bien que es un banner y no van a crear algo que no saben que es, cierto?. Banner o Logo es la imagen o imágenes que se encuentran la mayoría de de veces en la parte superior de las páginas. Esta imagen o imágenes  suele contener el nombre de la página, algún lema característico de la misma y quizá un logo que los identifique. Bien, nosotros haremos uno muy simple el cual podrán colocar en la página que vayamos creando en las lecciones o en cualquier otro lugar como foro, blog, etc.

Comencemos entonces, lo primero es entrar a esta web:

http://www.bannerfans.com/banner_maker.php

Al entrar se darán cuenta que aparece un banner rectangular de color celeste con algunas palabras o frases escritas, en total son 2 líneas de texto de diferente tamaños.

En la parte de abajo hay varias opciones en diferentes pestañas, la primera es Layout que debe estar activa. Muy bien ahora si comenzamos con el diseño, como es obvio cada uno puede crear el logo a su manera y a su gusto, “sobre gustos y colores no han escrito los autores”.

Empezemos:

En Select your banner's size: Señalamos la segunda opción, ya que recuerden nuestro banner tiene que tener las mismas dimensiones del espacio que dejamos en nuestra página. Ponemos como dimensiones 770 en width y 130 en height . Ahora cada vez que modifiquemos algún dato le damos a “Update my banner” y verán que la imagen ah obtenido las dimensiones deseadas.

En Select a background mode: Podemos  elegir entre 3 opciones, la primera es para darle al banner un color solido o sea uniforme, la segunda opción es para darle un color degradado y la tercera es para subir nuestra propia imagen que serviría de fondo, yo elegiré la segunda opción.

En Choose your gradient colors: Elegiremos los colores del degradado, el primero será el mas fuerte y se ira degradando hasta el segundo, yo elegiré rojo y blanco respectivamente.

Ahora en Select a gradient mode: elegimos el modo en el que queramos que se degrade nuestro banner, elijan el que sea, yo lo dejaré como esta, degradado de arriba hacia abajo. Le damos a Update Banner para ver como nos esta quedando.

Ahora vamos a la pestaña Text & Fonts . Como vemos aca es donde vamos a modificar el texto de nuestro banner. Usualmente se coloca el nombre de la pagina y luego un pequeño eslogan o la explicación sobre esta. En Line 1 yo pondré Axside.Com, en Font Face: elegiré BlackChancery, en Font size: 38px y en color: 000011. Ahora en Line 2: Como crear tu web con Dreamweaver, tipo de letra:  Freebooter Script, tamaño 18px, color: 0000aa. Le damos a Update Manager nuevamente y vemos los cambios.

Si dirigimos el mouse a el banner vemos que podemos mover las líneas menos mal jo, asi que las ubicamos donde mejor nos paresca, yo las ubicare al lado derecho.

Ahora bien yo intentare crear una especie de logo para rellenar el espacio izquierdo y pondré en las 4 lineas restantes eso:

Line 3: A - Verdana - 52px - 090011
Line 4: S - Verdana - 52px - 0000bb
Line 5: [ - Arial - 52px - 0000bb
Line 6: ] - Arial - 52px - 090011

 Al actualizar y tener esos elementos ya en el banner, los moveré tal forma que parezcan un logo, medio monse pero logo al fin je. Hay otras páginas online muy buenas donde hacer logos también, si están interesados solo avísenme, ya saben mediante el FORO.

Ahora pasamos a la pestaña Shadows & Effects. Acá es donde le damos los efectos de sombra a los textos. Yo solamente le otorgare sombras a la línea 3 y 4… primero con Top Right a ambos y con 3px a cada uno, en color a la línea 3 le pondré: 4f4f4f, mientras que a la línea 4: 005d99.

Por último la pestaña border. Elegiré el solid y de color: 000000 y de size: 2. Le damos a Update Banner y listo, ya tenemos nuestro sencillo pero elegante banner je.

Solo nos queda en la pestaña “FORMAT”, asignarle la extensión que queramos. Yo elegiré el JPG.
Ahora ya tenemos listo nuestro banner. Para guardamos solo le damos a “DOWNLOAD IT!”, que esta en la parte inferior y lo guardamos.

Recuerden que si ustedes están siguiendo el curso paso a paso de cómo crear una web con Dreamweaver, tiene que guardar la imagen dentro de la carpeta imágenes de su web y para ponernos de acuerdo lo guardamos con el nombre “banner”.

El mio me quedo ASI

Como ven crear un banner es muy sencillo de esta página, claro esta que se pueden hacer muchos mejores de programas especializados, si tienen alguna duda o sugerencia o si quisieran un tuto de algún programa en especial para esta lección de tutoriales varios mediando nuestro FORO.