Académique Documents
Professionnel Documents
Culture Documents
INDICE
1. TRIANGULOS
2. CIRCULOS
3. BOTN REDONDO
4. BOTON CUADRADO
5. TUBOS
6. DEGRADADOS
7. PINCELES
8. ESTILOS
9. BOTONES DE PLASTICO
10. REEMPLAZAR COLORES
11. TEXTOS
11.1. ACEITE
11.2. FUEGO
11.3. BISELADO
11.4. HUNDIDO
11.5. CROMADO
11.6. HIELO
11.7. EXPLOSIVO
11.8. INGLETE EXTERIOR
11.9. RECORTADO
11.10. REFLEJADO
11.11. INGLETE INTERIOR
11.12. SOMBRA
11.13. LUZ EXTERIOR
11.14. TEXTURA
11.15. NEONES
11.16. 3D
12. ESCRITURA SOBRE PIEDRA
13. CABLES
14. BOTN CUADRADO CON TEXTURA
15. BARRAS 3D
16. OBJETOS REFLEJADOS
17. AROS 3D MULTICAPA
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_2
TRIANGULOS
CIRCULOS
BOTN REDONDO
Contraemos la seleccin,
[Seleccin>Modificar>Contraer] 5 pixels, y volvemos a
aplicar Degradado
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_8
Tono = 0
Saturacin = 50
Luminosidad = 0
Colorear Activado
BOTN CUADRADO
Elegimos la herramienta de
seleccin y creamos un
cuadrado de 70x70 pixels.
Contraemos la seleccin,
(Seleccin/Modificar/Contraer)
6 pixels.
Vamos a
(Capa/Transformar/Rotar
180)
El efecto conseguido ya es
bastante logrado, pero se puede
mejorar.
Ajustamos
[Imagen>Ajustar>Tono-
Saturacin]
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_10
TUBOS
Creamos una nueva imagen de 50x100 pixels Rellenamos con un degradado Lineal como se
72 dpi con Fondo Transparente muestra, puedes bajarte el Degradado Aqui
[Filtro>Distorsionar>Coordenadas Polares] Ok
Opcin: Rectangular a Polar
DEGRADADOS
Si no tienes la herramienta de
degradado en la paleta de
herramientas, dale con el derecho del
Mouse a la herramienta Bote de
Pintura y selecciona la de Degradado
PINCELES
Si no la tenemos seleccionada,
seleccionamos la herramienta de Pincel en
la paleta de herramientas
ESTILOS
BOTONES DE PLASTICO
REEMPLAZAR COLORES
Abrimos una nueva imagen, en este caso un BMP, y lo guardamos como PSD de Photoshop
Ahora con un pincel Soft Round, de un tamao adecuado para nuestra imagen, vamos
pintando la mascara del Layer 0 copy de color negro, veremos como pinta la mascara de negro,
pero la imagen la va borrando.
Una vez tienes todo el coche borrado (pintado en el Layer Mask), pulsa con el derecho del
Mouse sobre el Layer Mask y elige SET SELECCTIN TO LAYER MASK, lo cual nos
cargara la seleccin de la mascara, y la invertimos con Shift+Ctrl+I, o <Select/Inverse>
Ahora
<Image>Adjust>Replace
Color>
Con el Cuenta Gotas, pulsamos sobre una de las partes del coche que tenga el color que
queremos cambiar, y modificamos el Tono, Saturacin y Luminosidad del mismo
TEXTOS
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_25
ACEITE
HTU UTH FUEGO
HTU UTH
BISELADO
HTU UTH HUNDIDO
HTU UTH
EXPLOSIVO
HTU UTH INGLETE EXTERIOR
HTU UTH
RECORTADO
HTU UTH REFLEJADO
HTU UTH
INGLETE INTERIOR
HTU UTH SOMBRA
HTU UTH
LUZ EXTERIOR
HTU UTH TEXTURA
HTU UTH
NEONES
HTU UTH 3D
HTU UTH
TEXTO CIRCULAR
HTU UTH
ACEITE
[Filtro>Desenfocar>Desenfoque Gaussiano]
con un parmetro de 1,7 Pixel fue suficiente para
esta imagen
Ahora [Filtro>Estilizar>Solarizar]
[Imagen>Ajustar>Tono-Saturacin]
Tono = 60
Saturacin = 100
Luminosidad = 0
Opcin colorear Activada
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_27
FUEGO
Parmetros de
Equilibrio de Color:
Sombras: (+100,0,-
Ahora aplicamos (Imagen/Ajustar/Equilibrio de Color). 100)
Medios Tonos:
(+100,0,-100)
Luces: (+100,0,0)
BISELADO
Aplicamos
(Filtro/Interpretar/Efectos de
Iluminacin)
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_29
HUNDIDO
CROMADO
L=10
Opcin Colorear activada.
HIELO
Aplicamos
(Filtro/Pixelizar/Cristalizar)
con 7 fue suficiente para este
ejemplo.
Rotamos 90 (Imagen/Rotar
Lienzo/90AD), y aplicamos
(Filtro/Estilizar/Viento)
marcamos Viento y Desde la
Izquierda y volvemos a rotar el
lienzo (Imagen/Rotar
Lienzo/90ACD
Aplicamos
(Imagen/Ajustar/Tono-
Saturacin
Tono: -180
Saturacin: 50
Luminosidad: 0
con la casilla colorear activada.
Por ultimo en la ventana de
Pinceles cargamos los tipos de
pinceles assorted.abr y
escogemos uno que tiene
forma de estrella, y con la
herramienta de Pincel
aplicamos a las partes de la
imagen que mas nos guste, con
lo que conseguimos un efecto
de Destello.
EXPLOSIVO
Aplicamos [Filtro>Desenfocar>Desenfoque
Gaussiano] 2 Pixels
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_33
[Filtro>Estilizar>Solarizar]
[Imagen>Ajustar>Niveles Automticos]
[Filtro>Distorsinar>Coordenadas Polares]
Polar a Rectangular.
[Filtro>Estilizar>Viento]
Viento de la Izquierda
[Imagen>Rotar Lienzo>90ACD]
[Filtro>Distorsionar>Coordenada Polares]
Rectangular a Polar
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_34
INGLETE EXTERIOR
RECORTADO
Imagen final
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_36
REFLEJADO
Aplicamos
(Capa/Transformar/Distorsionar) y
distorsionamos el texto.
INGLETE INTERIOR
SOMBRA
LUZ EXTERIOR
aplicando......
(Imagen/Ajustar/Tono-Saturacin)
T=0
S=100
L=0
Opcin colorear Activada.
aplicando......
(Imagen/Ajustar/Tono-Saturacin)
T=60
S=100
L=0
Opcin colorear Activada.
TEXTURA
NEONES
Aplicamos
(Filtro/Estilizar/Bordes
Iluminados)
Anchura Borde = 2
Brillo Borde = 6
Suavizar = 5
Aplicamos
(Filtro/Desenfocar/Desenfoque
Gaussiano), Radio =1,1
Y Luego
(Imagen/Ajustar/Tono-
Saturacn)
3D
STILIZE
Toma ya!!!!!
SOMBRA 3D
TEXTO CIRCULAR
A continuacin, creamos otra capa, y en esa escribimos en negro el mensaje. Esto puedes
hacerlo a mano, con el "paintbrush" o el "airbrush", o simplemente con la herramienta de
texto. Queda mucho mejor si lo que vayas a escribir esta "roto" o "mal hecho", para dar la
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_50
sensacin de que est esculpido en la piedra de una forma muy tosca, por lo tanto si no
tienes una fuente que d esa impresin, hazlo a mano.
Como probablemente haya zonas de la imagen en las que no se distingue el texto del
fondo, cambia el brillo y el constraste de ste ltimo
([image],[ajustar],[brillo/crontraste])
A continuacin vamos a darle perspectiva al texto. Para ello, seleccionamos la capa del
texto y vamos a [filtro],[intrerpretar],[transformacion 3d] y creamos un cubo que
abarque a todo el texto, y del que prcticamente slo se vea una cara:
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_51
Luego giramos el cubo y tras varios intentos, le damos al texto la perspectiva deseada:
Aceptamos y usando la goma de borrar, eliminamos los restos del texto anterior y la
sombra del cubo que nos genera 3d transform.
-[capa],[acoplar image]
Ahora viene lo ms delicado, ya que de este paso depende la mayor parte del efecto final.
Lo haremos en [filtro],[intrerpretar],[efectos de iluminaicon]. Pondremos una luz omni
y otra spot:
La luz roja es (134, 33, 33) y la amarilla (162, 141, 100). Por ltimo, aplicamos 10 unidades
de ruido ([filtro],[ruido],[aadir ruido..]).
Por supuesto, los valores que he usado yo son simplemente orientativos, y lo que
tienes que hacer es cambiar las luces, colores, ruidos, etc... para conseguir mejores
resultados.
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_53
CABLES
Vamos a [Layer>Layer Style>Blending Options] y creamos Drop Shadow, Bevel and Emboss y Color
Overlay
Si le aplicamos Sombra
HTU UTH
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_58
BARRAS 3D
Ahora escribe el texto que quieras y pon la capa en modo LUZ SUAVE
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_59
OBJETOS REFLEJADOS
abrimos una imagen, en nuestro caso una visagra en formato JPG, y la guardamos como
PSD de Photoshop
AROS 3D MULTICAPA
ahora vamos a la paleta de capas y creamos una nueva Capa pulsando sobre y
rellenamos la capa fondo de color RGB rellenamos de RGB 200,175,175 o similar y
99,55,55 o similar cargamos la seleccin del Canal Alfa 1
[Seleccin>Cargar seleccin] o CTRL y pulsa
sobre el canal con el Mouse
ya podemos dejar todas las Capas visibles y aplicar efectos de Capa (Sombra
paralela, Bisel y Relieve, y Trazo) puedes
bajarte estos estilos aqu, y visitar Estilos
HTU UTH HTU UTH
REDONDEAR ESQUINAS
TORNILLOS
Aplicamos [Select>Feater] 2
pixels
Invertimos la seleccin
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_70
[Selec>inverse]
y pulsamos suprimir
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_71
rellenamos la seleccin de
blanco
Aplicamos [Layer>Layer
Style>Inner Sadown]
Deselecionamos, y
[Filter>Blur>Gaussian Blur] 2 pixels
Imagen Final
ROLL OVERS
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_73
H H
Vamos a aplicar RollOvers como el de la botonera superior, para cual debes tener en
cuenta cuatro pasos importantes:
1- Creacin del la imagen en estado de reposo
2- Creacin de la imagen en estado de Activado
3- Recorte de la imagen, en nuestro caso sern 8 corte, 1 para cada botn en estado de
reposo, y 1 para cada botn en estado de activado.
4- Creacin del cdigo Java, lo que haremos con Macromedia Dreamweaver 3
Esta ser nuestra barra cuando el Ratn pase sobre ella o activada [ON]
estado de reposo [OFF], ahora vamos a ponerla en estado de activado [ON], para ello
sigues estos pasos.
1. Mueve la [capa 4] que es en la que esta la sombra de los botones 1 pixel arriba y 1
pixel a la izquierda.
2. Mueve la capa de los botones [capa 3] 1 pixel a la derecha
3. Mueve las capas donde tengas los textos 1 pixel a la derecha.
4. Estando en la capa de los botones [capa 3] modifica el el tono de la misma
[Imagen>Ajustar>Tono-Saturacin]
Tono = 200
Saturacin = 25
Luminosidad = 0
Colorear Activado
Ahora debemos recortar los botones individualmente, cosa
que haremos colocando las lineas gua como muestran las
imgenes superiores, y utilizando la herramienta de recorte
Recortamos cada uno de los botones individualmente y los guardamos en formato Gif.
Selecciona el primer botn con la herramienta de
recorte, pulsa dos veces sobre la seleccin para que
recorte la imagen
botoneras.
La manera mas fcil de crear Roll Overs como los que ves arriba, es usando un
programa de Creacin de paginas web, como Macromedia Dreamweaver, as que
vamos a usar este para hacerlo. Tambin puedes usar el Image Ready que viene con
Photoshop 6, pero yo no he conseguido hacerlo para varias imgenes a la vez, sin tener
que copiar y pegar cdigo Html, as que explicare como se hace con Macromedia
Dreamweaver 3.
En Dreamweaver, nos vamos a [Windows/Objects] o pulsamos
[Control+F2] para que nos habra la paleta de objetos y nos
muestre los objetos [Commom]
CADENAS
Ahora tenemos que aplicar el mismo efecto de Vamos al Layer 2, le damos al Voila!!!
Bevel and Embos que aplicamos al layer 1, as que derecho del Mouse y en el
vamos al layer 1, le damos al derecho del Mouse y men emergente a Paste Layer
en el men emergente elegimos Copy Layer style Style
Movemos el Layer 2 hacia abajo con la tecla Flecha Posicin final de los Layers
Abajo, o con la herramienta Move Tool
TEXTURAS
TEXTURA AGUA
HTU UTH TEXTURA ARENA
HTU UTH
TEXTURA MADERA
HTU UTH PIEDRA
HTU UTH
TEXTURA AGUA
Aplicamos [Filtro>Distorsionar>Cristal]
Distorsin = 5
Suavizar = 2
Textura = Deslustrado
Escala = 100%
[Imagen>Ajustar>Brillo-contraste]
Brillo = 0
Contraste
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_81
TEXTURA ARENA
Modificamos [Imagen>Ajustar>Tono-
Saturacin]
TEXTURA MADERA
TEXTURA PIEDRA
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_82
Aplicamos
[Filtro/Interpretar/Nubes]
y luego (Filtro/Ruido/aadir
Ruido)
Candidad=5
Gaussian=On
Monocromatico=On
(Filtro/Ruido/aadir Ruido)
Candidad=3
Gaussian=On
Monocromatico=On
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_83
Textura final.
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_84
VARIOS
ELIMINAR HALOS
HTU UTH LOGO DE FONDO
HTU UTH
EXPORTAR A GIF89A
HTU UTH DEFINIR MOTIVOS
HTU UTH
HTU LINEAS DE TV UT
H
GIF TRANSPARENTES
HT TH
HT CAPTURAS TH RAYOS
HT TH
ELIMINAR HALOS
LOGO DE FONDO
La duplicamos y aplicamos
(Filtro/Estilizar/Relieve)
Angulo = -45
Altura = 3
Cantidad = 25%
pagina web TH
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_87
EXPORTAR A GIF98A
Ahora vamos a
(Archivo/Exportar/Gif 89a Export)
y con la herramienta de Cuentagotas,
vamos seleccionando en la imagen
los colores que queremos que sean
transparentes
DEFINIR MOTIVOS
Volvemos a la imagen de
200x200 y aplicamos
(Edicin/Rellenar)
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_89
LINEAS DE TV
Aplicamos <Edicin/Rellenar>, y en
Usar elegimos la opcin de Motivo
GIF TRANSPARENTES
CAPTURAS
Si en el paso 2 hubiramos
pulsado [Shift+Impr Pantalla],
solo capturamos la ventana que
tengamos activa en primer
plano.
RAYOS
Aplicamos
(Filtro/Interpretar/Nubes de
diferencia)
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_93
Invertimos
(Imagen/Ajustar/Invertir)
FONDOS SIMTRICOS
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_94
CREAR UN PLANETA
Duplicamos la capa
Aplicamos (Filtro/Interpretar/nubes
de diferencia) en esta opcin
deberemos ir creando y deshaciendo
hasta que tengamos un aspecto
adecuado.
Duplicamos la capa y cargamos la
seleccin del canal #4 invertida y
rellenamos la seleccin de negro,
deselecionamos todo y aplicamos
(Filtro/Artistico/Bordes Aadidos)
Anchura = 7
Intensidad = 1
Posterizacin = 4
Prime 35mm
Brillo =100
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_97
EXPLOSIN SIDERAL
[Filtro>Ruido>Aadir Ruido]
Cantidad: 15% [Imagen>Ajustar>Umbral]
Distribucin: Uniforme Nivel de Umbral: 213
Monocromatico
[Filtro>Desenfoque>Desenfoque de
Movimiento]
[Imagen>Ajustar>Invertir]
Angulo: 90
T T
Distancia: 213 px
T T
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_98
[Filtro>Distorsionar>
combinamos las dos capas Coordenadas Polares]
[Capa>Acoplar imagen] o [Capa Opcin: Rectangular a
combinar hacia abajo] polar ok
[Filtro>Desenfocar>Desenfoque
Radial]
Cantidad: 100 [Imagen>Ajustar>Tono/Saturacin]
Metodo: Zoom
Calidad: Optima
FOTOS
AADIR BLANCO Y
HT
AURA
HT TH NEGRO TH
HT DEFORMAR TH COMBINAR
HT TH
HT OCASOTH MARCOS
HT TH
HT DESENFOQUE
RADIAL TH TRUCAR
HT TH
AURA
Imagen final
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_104
DEFORMAR
Aplicamos
(Filtro/Otro/Desplazamiento)
Horizontal = 100
Vertical = 100
Dar la vuelta a Areas no
definidas
Ahora
(Filtro/Distorsinonar/Encoger),
con el valor que creamos ms
conveniente
Volvemos a plicar
"Desplazamiento" con los
mismos valores anteriores, para
completar el efecto
COMBINAR
Duplicamos la Capa 1,
cargamos la seleccin
del Canal 4, y pulsamos
suprimir.
Sencillo, jeje
OCASO
Y pulsamos Suprimir.
Imagen final
MARCOS
COLOREAR
COLOR SEPIA
DESENFOQUE RADIAL
Imagen original.
Ahora aplicamos
(Filtro/Desenfocar/Desenfoque
Radial) con los parmetros
siguientes, o segn el efecto
deseado.
TRUCAR
EJERCICIOS ADOBE PHOTOSHOP CURSO DISEO WEB Pg_116
En esta ocasion vamos a trucar una foto, como yo no tengo ni idea de esquiar,
trucaremos una foto a fin de hacer creer a mis amigos que este invierno hice in
cursillo acelerado de ski, y ya parezco Alberto Tomba.
Imagen original
Mi foto
uso de la herramienta
Tampon, mira en la seccion
uso de la Herramienta
HT
continuar.