Archive for May, 2008

Adobe Photoshop CS3 Extended - Parte II

Thursday, May 22nd, 2008

Ahora seleccionaríamos las imagenes o letras que queremos utilizar que esten en nuestro logotipo tambien las separamos. Como ya dijimos hay veces que merece la pena rehacerlas en el macromedia Flash que andar retocandolas aquí.

Para hacer esto cogemos la herramienta varita mágicaHerramienta varita magica, con esta herramienta lo que hacemos es a partir de unos parametros que tenemos arriba, al pinchar en nuestro logotipo en un punto, automáticamente se seleccionan todos los pixeles del mismo color; cuanta mayor tolerancia mayor pixeles de distintos tonos se seleccionan.

Seleccion letra

Por ejemplo vamos a coger las letras del logotipo, lo que hacemos es pinchar en la varita mágica y luego pinchar en una de las letras de nuestro logotipo, y vemos que pasa. Si se selecciona la letra correctamente pues ya está, le damos a copiar (Ctrl+C) luego creamos una nueva imagen (Ctrl+N), pinchamos en OK, y damos a pegar (Ctrl+V). Con esto tenemos una nueva imagen, del tamaño de la letra que hemos copiado y con la letra que hemos copiado, y el fondo a cuadraditos (transparente), y así hacemos con todas las letras para luego utilizarlas. La razón de que el fondo sea transparente es que si despues queremos que las letras pasen por encima de una imagen u otras letras, si tienen fondo, se van a tapar con el fondo la que esté más abajo; si no está el fondo transparente(a cuadritos), lo que tenemos que hacer es crear una imagen nueva, pero en vez de dar a ok, antes cambiamos la ultima opción a transparente, y volvemos a pegar las letras copiadas.

Una vez que tengamos todas las letras, o bien segun las vallamos haciendo, las vamos guardando, si queremos mantener las transpariencias del fondo las debemos guardar como *.gif. Para ello y para que ocupen lo menos posible le damos al menú de arriba el primero (archivo) y ahi pinchamos en guardar para web y dispositivos.Ahí vemos en el cento nuestra imagen y en el lateral derecho distintas opciones; debajo de ajuste preestablecido seleccionamos GIF. Y luego si vemos que ocupa mucho le podemos reducir el numero de colores, porque cuanto menos colores pongamos menos va a acupar. Por lo que reducimos los colores, porque mientras se vea bien no pasa nada. Una vez hecho esto le damos a guardar y ya la tenemos.

Entonces en resumen, ahora mismo deberíamos tener guardado, una imagen con el fondo del logotipo, y una imagen por cada letra del logotipo. Yo tengo 15 imagenes(14 letras + 1 logotipo).

Todas las letras y fondo del logotipo

Ya hemos terminado con el Photoshop, ahora pasamos al Flash, aquí empieza realmente el banner a coger forma.

Adobe Photoshop CS3 Extended - Parte I

Tuesday, May 20th, 2008

Hay veces que la dificultad que tiene separar el logotipo con el photoshop es mayor que rehacer el logotipo con flash,además haciendolo todo en flash a parte de que el banner ocupe menos, queda mucho mejor. De todas formas lo haremos de las dos maneras, primero vamos a hacerlo con el photoshop.

Antes de nada veamos las cosas que vamos a utilizar donde están. En la imagen vamos a ver la paleta de capas a la izquierda y a la derecha la barra de herramientas con el nombre de las herramientas que vamos a utilizar:

Paleta de capas y barra de herramientas a utilizar de Photoshop

Abrimos nuestro logotipo con el Adobe Photoshop CS3 Extended(Archivo/Abrir).

Ahora vamos a separar la imagen de nuestro logotipo en los “trozos” que se van a mover. Por ejemplo, en nuestro caso, vamos a separar el fondo y las letras.

El fondo, si el fondo es de un color como en nuestro caso, para coger exactamente el color que es utilizamos la herramienta cuenta gotasCuenta gotas y pinchamos en el fondo.

Ya tenemos el color de fondo, ahora creamos una nueva imagen del photoshop con las dimensiones del banner que vayamos a hacer, para ello, tienes que pinchar en archivo/nuevo y ahí poner las medidas(teniendo en cuenta si lo que has medido son pixeles, cm, u otra cosa) y en contenido de fondo le ponemos transparente. Le damos a ok y ya tenemos la imagen en cuadritos del tamaño nuestro futuro banner. Ahora seleccionamos la herramienta bote de pinturaBote pinturay pinchamos en la nueva imagen que hemos creado. Y se ha llenado del color de nuestro fondo.

Si queremos le podemos modificar las características del fondo, en la barra de paletas de la derecha, en la paleta de capas(F7), dando boton derecho del ratón sobre la capa de la imagen de fondo y seleccionando “Opciones de fusión”, y ahi podemos modificar todas las cosas que queramos, desde hacer degradados, sombras, bisel o relieve.

Por ejemplo hagamos un relieve en el fondo, nos vamos a la opcion de Bisel y relieve, elegimos un estilo, por ejemplo relieve, si pinchamos la opcion de previsualizar podemos ver como va quedando tanto en la imagen en si de nuestro logotipo como en el recuadro que aparece debajo de previsualizar. Luego elegímos una técnica, probamos a ver que tal queda, yo selecciono la de redondeado.
Despues tenemos el parametro de la profundidad direccion tamaño suavizar con esos parametros vamos jugando con el fin de encontrar el resultado que más nos guste, yo que puesto profundidad 215%; dirección arriba; tamaño 27 y suavizar 5.
En la seccion de sombra podemos cambiar mas cosillas, pero con lo que hemos hecho de momento tenemos suficiente. damos a Ok y ya teenemos nuestro fondo con el relieve que nos gusta.

Fondo_logo