la posada de kelpie

Tutorial para la creación de un banner para website.

2009-02-04T12:09:00.031-04:30

En esta ocasión les daré un tutorial para la creación de un banner con efectos de brillo y espejo, este es para aprender a realizar los efectos, es irrelevante el diseño, ya ustedes se encargarán de modificarlo y personalizarlo de acuerdo a sus gusto.

Primero crearemos un documento en photoshop de 750px *209px, este tamaño basandose en la nueva tendencia de banners que generalmente son un poco mas grandes; el fondo será de color negro(img 1).
(img1).(img2)

Añadiremos un texto que seria el n ombre de la página o cualquier otro, en este caso yo lo llene como "nombre de página para ejemplificar, el texto será de color blanco(img2)
Luego duplicaremos la capa de texto para crear el reflejo de este(img3)
(img3) (img4)

Con la nueva capa de texto seleccionada clickearemos en editar, transformación, voltear verticalmente (img4), arrastramos la capa una vez volteada y la arrastramos hasta que se encuentre debajo del primer texto, luego apretando la tecla de CTRL y con el raton seleccionado en una de las esquinas del cuadro de transformacion, modificaremos la perspectiva del 2do texto (img5)
(img5)(img6)

En la barra de herramientas seleccionaremos la herramienta borrador con un diametro apróximado de 27px y con una opacidad mas o menos de 70% (img6) lo pasaremos por encima de las letras modificando la opacidad, por si lo quieren mas claro o mas oscuro el texto. Al texto principal, es decir a la primera capa de texto le vamos a agregar un resplandor exterior,
preferiblemente de color blanco (img7)
(img7) (img8)(img9)
Ahora crearemos una capa que la llamaremos líneas, aquí vamos a agregar unas curvas con la herramienta pluma(img8), seleccionaremos un pincel en mi caso es el número 29 de mi paleta de pinceles (img9), con la capa de lìneas seleccionadas nos vamos a trazados, y lo guardamos, es decir damos doble click en la palabra trazados y se guardará automaticamente(img10), al darle click derecho aparecerán unas opciones elegiremos contornear trazado y nos saldrá otra ventanita que nos dirá que lo contornearemos con el pincel y tiene que estar seleccionada simular presion(img11), una vez que aparezca el pincel con la forma de las curvas le añadiremos resplandor exterior e interior (este puede ser de un color distinto) con las medidas que aparecen en la imagen 12
(img10) (img11)(img12)

Después que se vea el efecto del pincel podemos crear otras capas con lìneas diferentes, haremos el mismo procedimiento del trazado, y en la capa de lineas primera le daremos copiar estilo de capa luego seleccionamos las nuevas capas con las nuevas lineas y seleccionaremos pegar estilo de capas(img13) (img14)
(img13) (img14), yo le agregué punticos con un pincel pequeño variando los efectos de resplandor interior y exterior y quedo algo como esto
.
Están abiertas las críticas constructivas y las preguntas.

Tutorial para crear sticker tipo web 2.0

2009-01-29T19:49:00.021-04:30

tutoriales,;photoshop,;diseño;grafico,;web;2.0

Este tuto es para Adobe Photoshop Cs 3 preferiblemente, es super fácil y no se requiere mucha experiencia en el ramo.

Para empezar crearemos un documento nuevo en Photoshop de 300 pixeles por 300 PIxeles a una resolucion no menor de 100 dpi.

En este documento crearemos una capa a parte de la capa fondo que trae por defecto, llámala sticker.

Luego nos vamos a la barra de herramientas de la izquierda y seleccionaremos formas personalizadas que es donde escogeremos la silueta del sticker que deseemos. En este caso yo elegi esta.

Rellenaremos la silueta con cualquier color, yo seleccione un azul, luego de rellenar con el color, crearemos otra capa que la podemos llamar brillo, aqui iria un circulo como en este ejemplo.
Este circulo lo rellenamos con la herramienta degradado, que va desde el blanco al transparente que
dando asi:

En la parte de filtros le colocaremos filtro gaussiano a esta misma capa del degradado, y de filtro le colocaremos 15 px; despuès de esto vamos a seleccionar una de las puntas de la estrella con la herramienta pluma, y crearemos otra capa con ella

En la esquina del cuadro de transformacion de la punta creada la voltearemos para que quede abajo, antes de esto hay que rellenarla con el mismo color de la estrella(figura8). Ahora agregaremos resplandor interior y sombra paralelapara identificar donde esta la punta (figura9-10-11)

(Figura9)

(Figura10)

(Figura11)

Le añadiremos a la capa de fondo un color negro para identificar la capa de degradado y cortar el exedente(figura12) con la herramienta de pluma y con la capa de degradado seleccionada(figura13)
(Figura12)

(Figura13)

Ahora coloca el texto en forma diagonal que desees por debajo de la capa de degradado. Ahh y tienen que borrar la capa fondo, en este caso el que pusimos de negro.
Aqui les dejo la imagen final guardada como png para que no se vea el fondo

Scripts fáciles de usar

2009-01-27T13:04:00.004-04:30

Navegando me encontré un script que te convierte tu página estática a dinámica sin conocimientos de php, este es un sistema de noticias actualizable por un panel de control, y se coloca en tu web con un simple iframe. Las instrucciones estan dentro del paquete, que además es GRATIS!!!. Se llama OpenNews y este es el enlace para quien le interese: http://sourceforge.net/projects/opennews-sun/

Herramientas para diseñadores

2009-01-26T13:15:00.006-04:30

diseño arte; diseñadores; tutoriales; adobe; photoshop; illustrator

Si estas buscando imágenes vectoriales, tutoriales, etc te dejo unos links que te serviran de mucho:

http://www.vectordiary.com/ página de tutoriales, y recomendaciones de plugins para adobe illustrator

http://www.vectorportal.com/, website para la creaciòn de logos o al menos te da una inspiraciòn, son .eps