PDF de programación - Creación de una interfaz Web con Adobe Photoshop

Creación de una interfaz Web con Adobe Photoshop

Alejandro Sanz Herrero
I.T.T Telemática – U.Valencia
[email protected]



ADOBE PHOTOSHOP

Creación de una interfaz web con



1





INTRODUCCIÓN

OBJETIVO

1. EDICIÓN DIGITAL DE IMÁGENES

UTILIZACIÓN DE FILTROS
FILTROS ARTISTICOS:
FILTROS BOSQUEJAR:
FILTROS DE DESENFOQUE:
FILTROS DISTORSIONAR:
FILTROS ENFOCAR:
FILTROS ESTILIZAR:
FILTROS INTERPRETAR:
FILTRO PIXELIZAR:
FILTRO RUIDO:
FILTRO TEXTURAS:
FILTROS TRAZOS DE PINCEL:
CREACIÓN DE MOTIVOS:

1. CREACIÓN DE UNA INTERFAZ WEB CON PHOTOSHOP

PINTANDO LA INTERFAZ
APLICANDO FILTROS Y MOTIVOS
AJUSTANDO CONTENIDOS A LA INTERFAZ

2. DIVISIÓN DE LA IMAGEN EN SECTORES

SECTORIZANDO EL LIENZO
EXPORTACIÓN WEB Y RETOQUE DEL CÓDIGO HTML.

3. CONCLUSIONES Y TRABAJOS FUTUROS

BIBLIOGRAFÍA

Creación de una interfaz Web con Adobe Photoshop

3

5

6

6
6
8
10
11
13
13
15
16
17
17
18
19

21

22
25
28

33

34
35

37

38

2



Creación de una interfaz Web con Adobe Photoshop



Introducción

Actualmente adobe photoshop es uno de los programas más populares para el diseño
y la creación digital de imágenes, tanto para el uso profesional como para el uso
personal. Es el programa más potente para retoque fotográfico y creación de
imágenes. Este popular programa ofrece multitud de posibilidades combinando todas
las herramientas que posee para el retoque y la creación digital.

Adobe Photoshop es uno de los programas más comunes para lo que hoy día
conocemos como arte digital, las herramientas y filtros que incluye con la instalación
permite crear imágenes sólo limitadas por la creatividad del autor.

Por otra parte photoshop no sólo se usa para el ámbito de creación o retoque de
imagen, una de las aplicaciones más potentes de este programa es el uso para la
creación de interfaces. Ofrece la posibilidad de crear cualquier tipo de interfaz, tales
como botones para páginas Web, e incluso interfaces para el desarrollo de
videojuegos. No obstante también es utilizado por los diseñadores Web para la
creación de la interfaz Web. La técnica empleada es la del dibujo de la interfaz en un
lienzo del tamaño del documento Web, y en ese lienzo dibujar todos los objetos y
componentes de la página Web, para luego personalizar la página Web desde el propio
código HTML.

A la hora de diseñar una página Web, resulta muy cómodo hacer las pruebas de
creatividad utilizando un programa de diseño gráfico, en lugar de realizar la
maquetación directamente en HTML.
Uno de los programas más útiles para realizar el diseño de la página es Adobe
Photoshop, que ofrece muchas utilidades para el retoque fotográfico, pero también
para el diseño gráfico en general. Las últimas versiones del programa además
disponen de ayudas muy interesantes para diseñar las páginas Web, como los sectores
o la opción Guardar para Web.

Al diseñar páginas Web con Adobe Photoshop y Adobe ImageReady, es necesario
tener en cuenta las herramientas y funciones que se encuentran disponibles en cada
aplicación.

• Photoshop proporciona herramientas para crear y manipular imágenes estáticas

para su uso en Internet. Es posible dividir una imagen en sectores, añadir
enlaces y texto HTML, optimizar los sectores y guardar la imagen como página
Web.
ImageReady proporciona muchas de las herramientas de edición de imágenes
de Photoshop. Además, incluye herramientas y paletas para el proceso

•

3



Creación de una interfaz Web con Adobe Photoshop

avanzado de páginas Web y para la creación de imágenes Web dinámicas como
animaciones y rollovers.

Cuando guarda una imagen para utilizarla como página Web, puede generar un
archivo HTML. Este archivo contiene información que indica al navegador Web qué
mostrar cuando carga la página. Puede contener punteros a imágenes (en forma de
archivos GIF, PNG, JPEG y WBMP), texto HTML, información de enlace y código
JavaScript para crear efectos de rollover.

En este tutorial veremos de una manera general las distintas posibilidades que nos
ofrece este programa, centrándonos en la creación de un interfaz Web utilizando los
diversos recursos que nos proporciona photoshop, tales como la creación de motivos,
diversos tipos de filtros, capas, sectores y demás herramientas que iremos explicando
más adelante.

4



Creación de una interfaz Web con Adobe Photoshop



Objetivo

El objetivo principal de este trabajo es la introducción al usuario inexperto al uso de las
técnicas básicas de diseño Web, basándonos en el programa Adobe Photoshop.

A lo largo del tutorial el usuario se familiarizará con las herramientas necesarias para
crear este tipo de páginas, sin necesitar ningún conocimiento previo de lenguajes de
programación para Web ni conocimientos avanzados del uso de programas de diseño.

Se explicará paso a paso como crear una plantilla Web que luego podremos modificar
mediante HTML y personalizar mediante el uso de estilos,

5



Creación de una interfaz Web con Adobe Photoshop

1. Edición digital de imágenes



Quizás el uso más común de Adobe Photoshop sea el de creación o edición digital de
imágenes, englobando aquí tanto el retoque como lo conocido como arte digital. Sin
embargo se va a explica de manera clara y sencilla como emplear la potencia de este
programa para la creación de páginas Web.

En este caso podemos usar todos los filtros igualmente como si estuviésemos creando
una imagen y luego usarlo en la interfaz Web en una determinada área de la página.
El problema de cargar de efectos y de filtros el lienzo es lo poco útil que es luego para
la optimización en el nivel de programación HTML. Es decir, no es lo mismo cubrir una
determinada área del lienzo con un color de fondo que con una imagen. En el primer
caso el color de fondo podría ser sustituido por el parámetro de color de fondo de la
celda donde estuviese ubicada la imagen, en el caso de la imagen es imposible
sustituirla por ninguna secuencia de código, por lo tanto se tiene q incluir dentro de la
página Web, incrementando así su tamaño y lo que puede llegar a ser peor, el efecto
visual que puede producir una página con demasiados efectos gráficos.
Lo que se pretende es crear una interfaz limpia que no sea pesada para los usuarios
optimizando al máximo el tamaño de esta página.

Utilización de Filtros
Adobe Photoshop instala por defecto diversos filtros que comentaré a continuación:


Filtros Artisticos:

Acuarela
Pinta la imagen con estilo de acuarela y simplifica los detalles con un pincel medio
cargado con agua y color. Allí donde se producen cambios tonales significativos, el
filtro satura el color.

Bordes añadidos
Reduce el número de colores de una imagen (posteriza) de acuerdo con la opción de
posterización elegida y busca los bordes de la imagen y dibuja sobre ellos líneas
negras. Las áreas extensas de la imagen tienen sombreado sencillo, mientras aparecen
detalles oscuros finos por toda la imagen.

Cuarteado
Retrata una imagen como si estuviera hecha de trozos rugosos de papel de color. Las
imágenes de alto contraste aparecen como siluetas, mientras que las imágenes de
color se componen de varias capas de papel de color.

6



Creación de una interfaz Web con Adobe Photoshop


Espátula
Reduce detalles de una imagen para dar el efecto de un lienzo con una fina capa de
pintura que revela la textura que hay debajo.

Esponja
Crea imágenes con áreas de gran textura de color de contraste, como pintadas con
una esponja.

Fresco
Pinta la imagen con un estilo basto utilizando pinceladas cortas y redondeadas
aplicadas precipitadamente.

Lápiz de color
Dibuja una imagen utilizando lápices de colores sobre un fondo sólido. Los bordes
importantes se conservan y adquieren un aspecto de sombreado rugoso; el color del
fondo sólido se muestra a través de las áreas más suaves.

Luz de neón
Añade diferentes tipos de resplandores a los objetos de una imagen y es útil para
colorear una imagen al tiempo que se suaviza su apariencia. Para seleccionar un color
de resplandor, haaz clic en el cuadro de resplandor y seleccione un color del selector
de color.

Manchas
Suaviza una imagen mediante trazos cortos diagonales que manchan o emborronan las
áreas más oscuras de las imágenes. Las áreas más claras se hacen más brillantes y
pierden detalle.

Película granulada
Aplica un motivo uniforme a las sombras y los medios tonos de una imagen. Un motivo
más suave y saturado se añade a las áreas más claras de la imagen. Este filtro es útil
para eliminar las bandas que aparecen en las fusiones y unificar visualmente
elementos de varios orígenes.

Pincel seco
Pinta los bordes de la imagen utilizando una técnica de pincel seco (entre óleo y
acuarela). El filtro simplifica la imagen al reducir su rango de colores a áreas de colores
comunes.



7



Creación de una interfaz Web con Adobe Photoshop

Pinceladas
Le permite escoger de entre varios tamaños (de 1 a 50) y tipos de pincel para crear un
efecto pictórico. Los tipos de pincel incluyen simple, rugosidad clara, claroscuro,
enfocado, borroso y destello.

Pintar debajo
Pinta la imagen sobre un fondo de textura y luego pinta la imagen final sobre ella.

Plastificado
Cubre la imagen con plástico brillante, lo que acentúa el detalle de la superficie.

Trazos pastel
Hace que la imagen parezca trazada con tiza de color pastel sobre un fondo de textura.
En las áreas de color brillante, la tiza aparece gruesa y con poca textura; en las áreas
más oscuras, la tiza aparece a retazos para descubrir la textura.

Filtros Bosquejar:

Los filtros del submenú Bosquejar añaden textura a las imágenes, con frecuencia para
crear un efecto tridimensional. También son útiles para crear una apariencia de bellas
artes o de dibujos hechos a man