Module 4 - E-LIFE Graphic Design Course PORTRAIT ES

Modulo 4:Diseo Grafico
Photoshop y CorelDRAW
e-LIFE
E-LEARNING VIRTUAL CENTER
FOR PEOPLE WITH PHYSICAL
DISABILITIES
2011-1-RO1-LEO05-15322
Este proyecto ha sido financiado con apoyo

de la Comisin Europea. Esta publicacin
refleja las opiniones de los autores y la
Comisin no es responsable del uso que
pueda hacerse de la informacin.
LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW
TABLA DE CONTENIDOS
1.
2.
3.
DESCRIPCION DEL MODULO ....................................................... 3

INTRODUCCION ........................................................................... 5
DISEO GRAFICO ....................................................................... 6
3.1. Adobe Photoshop Menus ............................................................................ 6

3.1.1.
Archivo .................................................................................................... 6
3.1.2.
Edicion .................................................................................................. 12
3.1.3.
Imagen .................................................................................................. 14
3.1.4.
Capa ...................................................................................................... 17
3.1.5.
Seleccion ................................................................................................ 22
3.1.6.
Filtro ...................................................................................................... 24
3.1.7.
Vista ...................................................................................................... 32
3.1.8.
Ventana ................................................................................................. 33
3.1.9.
Ayuda .................................................................................................... 33
3.2. Caja Herramientas Adobe Photoshop
...................................................... 35
3.2.1.
Recortar ................................................................................................. 35
3.2.2.
Herramienta Marco Rectangular ............................................................... 36
3.2.3.
HHerramienta Marco Elptico .................................................................... 37
3.2.4.
Herramienta Lazo ................................................................................... 38
3.2.5.
Herramienta Sector ................................................................................. 40
3.2.6.
Herramiuenta Pincel y Lapiz ...................................................................... 41
3.2.7.
Herramienta Tampon de Clonar ................................................................ 41
3.2.8.
Herramienta Degradado y Bote pintura ..................................................... 42
3.2.9.
Herramienta Desenfocarl .......................................................................... 44
3.2.10.
Herramienta Texto ................................................................................... 45
3.2.11.
Herramienta Cuentagotas ......................................................................... 48
3.2.13.
Herramienta Mano .................................................................................. 48
3.2.14.
Herramienta Zoom .................................................................................. 49
3.2.15.
Color Frontal y color Fondo ...................................................................... 49
3.3. Lista de atajos de teclado para Adobe Photoshop CS6 ................................ 50

3.4. Algunas cosas acerca de CorelDRAW......................................................... 53
3.5. Lista de atajos de teclado para CorelDRAW X6 ........................................... 55
4.
DISEO WEB.............................................................................. 59
4.1. Diseo web con Adobe Photoshop ............................................................. 59

4.2. Diseo web con CorelDRAW .................................................................... 64
A Leonardo da Vinci Project
e-LIFE e-Learning Virtual Center for People with Physical Disabilities

2011-1-RO1-LEO05-15322
2/68
1. DESCRIPTION MODULO
TITULO MODULO
Diseo grfico - Adobe Photoshop y CorelDRAW
CODIGO
VAT4
PALABRAS CLAVE
Diseo grfico, diseos

grficos raster (bitmap)
DESTINATARIOS
Los destinatarios de este modulo son personas

con discapacidad fsica que buscan oportunidades
para entrar o mantener el contacto con el
Mercado virtual de trabajo.
NIVEL
Intermedio
OPORTUNIDADES
PROFESIONALES
Trabajadores autnomos altamente especializado

que puedan crear diseos de pginas web,
grficos para anuncios, etc.
OBJETIVOS
MODULO
RESULTADOS
FORMATIVOS
DEL
web, trabajo virtual,
Este modulo proporcionar a los participantes con

conocimientos prcticos acerca de como disear
grficos para anuncios y diseo de pginas web
Aprendern lo necesario para iniciar una carrera
profesional en diseo grfico.
Al completar el modulo los participantes

aprendern como convertirse en diseadores
grficos.
REQUISITOS
(DESTREZAS)
Uso de destrezas
comunicacin
REQUISITO
(CURSO):
Ninguna
bsicas
en
informacin

2011-1-RO1-LEO05-15322
3/68
HORAS
FORMACION
DE 44 horas
COMPENTENCIAS
Desarrollar
e
implementar
procesos
procedimientos efectivos de trabajo
EVALUACION
La evaluacin incluir un test de respuestas

mltiples.
Cada
test
incluir preguntas
de
respuestas mltiples
que comprobarn
el
conocimiento
y
la
comprensin
de
los
participantes de los resultados formativos.
CATEGORIA
coste (coste optimizacion)

tiempo (gestin eficiente del tiempo)
s-calidad (calidad del servicio)
m-calidad (gestin de la calidad)
MATERIALE
SUPLEMANTARIOS
Ninguno

2011-1-RO1-LEO05-15322
4/68
2. INTRODUCCION
Hay dos tipos principales de ficheros de grficos digitales: imgenes vectoriales y imagenes en
raster (bitmap).
Las imgenes vectoriales estn hechas de miles de pequeas lneas; las imgenes raster
bitmap) estn hechas con pixeles.
Los grficos vectoriales se usan principalmente para desarrollar dibujos, logos, dibujo
tcnico, diseo de paginas web, etc.
Una de las principales ventajas de las imgenes vectoriales es que puedes hacer ms grande la
imagen tanto como quieres sin perder calidad.
Uno de los programas ms usados para este tipo de grficos CorelDRAW, desarrollado y
publicado por Corel.
Los grficos raster (bitmap) se usan en diseo grfico, diseo web, edicin de fotografas
etc.
Las imgenes raster, son tambin conocidas como imgenes bitmap, por los pixeles. A
diferencia de los grficos sectoriales, cuando se incrementa el tamao de una imagen la
calidad se reduce, y puedes ver los pixels.
El programa ms usado para grficos en bitmaps es Adobe Photoshop, programa desarrollado
y publicado por Adobe.
Este curso no es exhaustivo y no desarrolla todas las opciones de Photoshop o CorelDRAW,
sino que desarrollar los conceptos ms importantes usados en diseo grfico y diseo web.
Al finalizar el modulo sers capaz de crear grficos profesionales que cualquier compaa
querr comprar y usar.

2011-1-RO1-LEO05-15322
5/68
3. DISEO GRAFICO
3.1. Adobe Photoshop Menus
3.1.1.
Archivo
Nuevo
Para crear un documento Nuevo ve a Archivo Nuevo. El cuadro de dialogo de abajo

aparecer.
Desde aqu puedes escoger el nombre del fichero, el tamao de la imagen, las unidades de
medida, la resolucin, el color y el tipo de fondo. Haz los ajustes que desees y presiona OK.
Abrir
Con este comando, como en otros programas, puedes abrir imgenes de tu ordenador para
edicin.
Cerrar
Con este comando, podemos cerrar los documento. Lo mismo puede hacerse presionando la
X situada arriba a la derecha de la ventana del documento. Si no hemos guardado los
ltimos cambios el programa nos preguntar si queremos hacerlo.

2011-1-RO1-LEO05-15322
6/68

Guardar
Esta opcin te permite guardar tu trabajo en el ordenador. Es til hacer esto tanto como sea
posible, de otra forma te arriesgas a perder tu trabajo debido a un corte de tensin o porque
tu ordenador se haya bloqueado.
Para tener ms velocidad puese usar el atajo Ctrl + S. La primera vez que uses este comando
debes especificar el nombre, la extensin y la ruta donde quieres guardar el archivo, como
sucede con el comando Guardar Como. Hablaremos en seguida de este comando. Despus de
esto, el programa ya no te preguntar ms; guardar el fichero en el sitio especificado.
Los principale stipos de ficheros usados en Photoshop son:
-
.psd: el tipo de fichero por defecto de Adobe Photoshop. Se usa para una posterior
edicin del fihero y para impresin.
.bmp (bitmap): Fichero de imagen de Windows, reconocido por la mayor parte de

programas con funciones grficas. Este tipo de fichero es menos usado en el trabajo
profesional.
.jpg, .gif, .png: Son formatos de imgenes para web, intercambio de ficheros, y para
inserter en otros programas. El formato Jpg tambin puede ser usado para impresin.
.tif y EPS: Su usan para impresin.
Guardar como
A diferencia de Guardar, cuando usamos Guardar como podemos especificar el nombre de
fichero, la carpeta y la extensin.
Guardar para Web
Este comando guarda imgenes que pueden ser usadas en la web en los formatos .jpg, .gif y
.png. Tambin se usa para convertir diseos en formato HTML, pero hablaremos de esto en el
prximo captulo Creacin de Diseo Web.
Una de las caractersticas ms importantes en relacin a estos tipos de ficheros es la relacin
entre velocidad de carga y calidad de imagen. El formato Jpg no permite fondos transparentes,
lo cual es posible en los otros formatos.
Importar
Su usa para traer a Photoshop documentos PDF, materiales escaneados e importar fotos de
cmaras digitales.

2011-1-RO1-LEO05-15322
7/68

Automatizar
Una de las opciones ms usadas de este submenu es Web Photo Gallery. Es una herramienta
excelente para crear rpidamente lbumes de fotos para sitios web, atractivos y fciles de
navegar.
Analizemos las caractersiticas ms importantes de este ventana.

Estilos
Aqu puedes escoger el diseo para la galera.


2011-1-RO1-LEO05-15322
8/68
Carpetas
Buscar
Escoge la carpeta que contiene las imgenes que sern usadas en la galera.
Destino
Especifica la carpeta donde vamos a crear la galera.
Opciones
Aqu seleccionamos el tamao de la imagen.

Informacin acerca de la Galera
Especifica el nombre de la web, el nombre del fotgrafo, los datos de contacto (e-mail,
telfono ), fecha, nombre de la fuente, tamao de la fuente.

2011-1-RO1-LEO05-15322
9/68
Imprimir
Como sucede en otros programas que conoces y usas, con este comando puedes enviar a la
impresora tu trabajo.
Nombre
Selecciona la impresora.
Propiedades
Diseo de pgina

2011-1-RO1-LEO05-15322
10/68

Escoge el nmero de copias y la orientacin del papel Horizontal o vertical, etc.
Papel
Tamao del papel (A4, A5 ), adecuado a la imagen, seleccin de bandeja (Bandeja 1,

Bandeja 2), especifica tipo de papel (normal).
Calidad de impresin

2011-1-RO1-LEO05-15322
11/68

Resolucin significa calidad de la imagen. Cuando la resolucin es alta, la calidad de la imagen
lo es tambin.
La impresin en blanco y negro o en escala de grises se usa para economizar toner.
3.1.2.
Edicin
Atras / Adelante
Como en la mayor parte de los programas el comando Atrs cancela la ltima accin a
diferencia de Adelante do que te lleva un paso adelante. A diferencia de otros programas en
Adobe Photoshop estos comandos pueden ser usados solamente para una accin determinada.
Para volver o corregir ms de una accin, debemos usar Pincel de Historia y hacer click en la
accin a la que queremos volver. El panel aparece en el lado derecho del espacio de trabajo de
Adobe Photoshop y puede ser activado o desactivado desde el menu de Windows.
Cortar
Copia en la memoria y borra el rea seleccionada.
Copia
Copia en la memoria, pero no borra el rea seleccionada tal y como ocurre con el comando
Cortar.
Pegar
Pega el rea seleccionada que fue copiada en la memoria con los comandos Cortar o Copiar.

2011-1-RO1-LEO05-15322
12/68

Borrar
Borra el rea seleccionada de la capa actual. De manera alternativa se puede usar la tecla
Suprimir.
Rellenar
Rellena el rea seleccionada de la capa con color de fondo o con una plantilla (textura).
Contornear
Crea un borde para el rea seleccionada de la capa. Los parmetros ms importantes que se
pueden definir son: anchura, color y localizacin (dentro, fuera o centro).
Transformacion libre
Con este comando podemos escalar y/o rotar el rea seleccionada de la capa actual.
Despus de hacer esto observaremos que aparecen ocho puntos de control, cuatro en las
esquinas y cuatro a mitad de los lados.
Presionando las esquinas con el botn izquierdo del ratn presionado, podemos cambiar la
anchura y la altura.

2011-1-RO1-LEO05-15322
13/68

Si queremos escalar la imagen de manera proporcional, debemos presionar la techa
Maysculas.
Presionando con el ratn desde la mitad de los lados modificaremos solo una dimensin.
Si queremos rotar la seleccin coloca el puntero fuera de un punto pero cercano a l.
Aparecer una pequea curva con flechas a ambos lados. Entonces, dibuja con el ratn hacia
la izquierda o la derecha.
Transformar
Escalar Comentado ms arriba
Rotar Explicado en Transformacin Libre
Sesgar Cambia la seleccin de la capa actual como un paralelogramo vertical o horizontal
Distorsionar Deformar el rea seleccionada, presionando con el ratn en cualquiera de los
ocho puntos
Perspectiva Cambia el ngulo desde el que vemos la imagen
Rotar 180 Rota la imagen 180 grados
Rotar 90 CW Rota la imagen 90 grados en el sentido de las agujas del reloj
Gira 90 en el sentido de las agujas del reloj
Voltear Horizontal - imagen horizontal en el espejo
Voltear Vertical Imagen vertical en el espejo
3.1.3.
Imagen
Modo
Alude a los cdigos de color usados en una imagen. El modo de color se escoge en funcin del
entorno donde queremos usar la imagen: monitor, Internet o impresin.

2011-1-RO1-LEO05-15322
14/68

Escala de grises
Transforma las imgenes en escala de grises.
Cuando trabajamos desde el sub-comando Modo, el programa nos preguntar si queremos
mantener las capas o no. Las capas representan uno de los conceptos ms importantes en
Adobe Photoshop, ya que nos permiten manipular los elementos diferentes de una imagen de
forma separada. Hablaremos de esto en el prximo menu.
Color RGB
Este nombre proviene de las iniciales de los siguientes colores: Red (Rojo), Green (Verde) y
Blue (Azul). Cualquier color se obtiene combinando estos colores. Cada uno de estos colores
tiene un valor numrico que oscila entre 0 y 255. Por ejemplo el cdigo para el color negro es
es R:0 G:0 B:0, y el cdigo para el color blanco es R:255 G:255 B:255. Este cdigo de colores
es usado por el monitor y para diseo grfico para la web.
Color CMYK
El nombre de este cdigo de color proviene de las iniciales de: Cyan (una clase de azul),
Magenta (una clase de Red - rojo), Yellow (amarillo) y Black (negro). Todos los colores se
obtienen mezclando estos cuatro colores. Cada uno de estos valores tiene un valor numrico
que oscila entre 0 y 100. Por ejemplo el cdigo del color negro es C:0 M:0 Y:0 K:100, mientras
que el cdigo para el blanco es C:0 M:0 Y:0 K:0.
El cdigo de color CMYK se usa en impresin.
Ajustes
Curvas
Desde aqu podemos controlar el tono de los colores de las imgenes colocando el ratn por
defecto en la mitad de la diagonal. Si queremos crear puntos adicionales de control, hacemos
doble click en el lugar donde queremos que aparezcan. Tambin podemos trabajar en canals
de color de forma separada; RGB seleccionando desde arriba del cuadro de dilogo. Una vez
que estas satisfecho con los resultados presiona OK o Cancear si quieres cancelar los cambios.

2011-1-RO1-LEO05-15322
15/68
Brillo /Contraste
Cambiar el brillo y el contraste puede hacerse usando los cursores del ratn, que estn por
defecto en la mitad de la escala. Si nos dirigimos a la izquierda los reducimos, y a la derecha
los incrementamos. Puedes ver los cambios en el cuadro de pre-visualizacin.
Contraste automtico
La optimizacin del contraste se hace automticamente.
Duplicar
Crear una copia de la imagen en una nueva ventana.
Tamao imagen

2011-1-RO1-LEO05-15322
16/68

Si creemos que no hemos seleccionado bien las dimensiones, medidas o la resolucin de la
imagen cuando hemos creado el archivo, podemos cambiarlas con este comando.
Tamao del lienzo
Habitualmente este comando se usa para aumentar el tamao del espacio donde se encuentra
la imagen, dejando el tamao de la imagen intacto, para aadir nuevos elementos.
Rotacin de imagen
Realiza las operaciones discutidas en Edicin /Transformacin.
3.1.4.
Capa
Como ya se ha dicho, las capas son elementos grficos bsicos de Adobe Photoshop, porque a
travs de ellas podemos controlar de manera separada los elementos de la imagen,
colocndolos en diferentes capas.
Para ilustrar las operaciones con capas crearemos dos de estas capas: El castillo Pele y agua.
Para esto abriremos una ventana del buscador, y buscaremos con Google: Pele Casillo,
escogemos y abrimos una imagen y hacemos click con el ratn para copiar. Entonces
abriremos Photoshop y escribimos Ctrl + N (nuevo fichero), y Ctrl + V (Pegar). En el panel

2011-1-RO1-LEO05-15322
17/68

de capas que puede ser activado o desactivado desde el men de Windows, hacemos doble
click en Capa 1, escribe Castillo Pele y presiona Enter.
Vuelve a Google, busca ocano, abre la imagen y presiona con el botn derecho del ratn
Copiar, despus ve a Photoshop y presiona Ctrl + V en la imagen del castillo para pegar el
ocano. Haz doble click de nuevo en la capa 1, escribe ocano y presiona Enter. Podemos ver
solo la ltima imagen, el ocano, se puede ver porque el ocano esta situado por encima de la
imagen del castillo. Si quieres ver el castillo, selecciona y mueve con el ratn la capa del
Castillo.
Nueva
Capa
Este comando crea una nueva capa que por defecto se llama Capa 1. Como se ha dicho es
posible cambiar el nombre hacienda doble click con el ratn sobre ella.
El mismo efecto puede obtenerse presionando el penltimo icono de la parte de abajo del
Panel Capa.
Capa a partir de fondo

Este comando convierte la capa por defecto llamada Fondo en la capa 0. Esta tiene la ventaja
de que la imagen del fondo puede convertirse en transparente. Para hacer esto selecciona el
comando Seleccionar Todos, o escribe Ctrl + A, y entonces presiona Borrar.
Lo mismo puede hacerse arrastrando con el ratn el Fondo o la capa 0 en el Panel Capa. Una
ilustracin del valor prctico de este trabajo se muestra en las imgenes de abajo, con Fondo o
sin l.

2011-1-RO1-LEO05-15322
18/68
Grupo
Este comando crea una carpeta en el panel Capas, donde se pueden agrupar las capas por
temas, para poder ser manipuladas ms faclmente. Esta caracterstica es til para imgenes
complejas, donde se trabaja con un gran nmero de capas. Por defecto la carpeta de capas se
llama Grupo 1, pero este nombre se puede cambiar despus, haciendo doble click.
Por ejemplo arrastra con el ratn la capa ocano en el Grupo 1. El panel de capas mostrar la
imagen de abajo:
Para volver, tenemos que hacer la operacin contraria, arrastrar la capa de nuevo al la
ventana principal. Los grupos Folder pueden abrirse y cerrarse hacienda click en la fleche. Si
no se necesita podemos arrastrar la carpeta al panel Papelera de Reciclaje.

2011-1-RO1-LEO05-15322
19/68

Duplicar Capa
Crea una copia de la capa actual.
Eliminar
Elimina la capa seleccionada.
Estilo de capa
Permite crear efectos en las capas. Este submenu es ms fcil de utilizar si hacemos doble
click en el icono Capas o en la parte azul y vaca de la capa deseada. Veremos la siguiente
ventana:
Los efectos ms usados son: Sombra paralela, sombra interior, resplandor exterior, resplandor
interior, bisel y relieve y satinado. Te sugerimos jugar con cada uno de estos efectos y
observar los resultados.
Como hemos dicho antes, si una capa est situada debajo de otra, la primera no puede ser
vista normalmente. Para hacerla visible debemos cambiar el nivel de opacidad de esta capa.
Podemos hacer esto desde el panel capas. Puedes ver ahora como aparece el Castillo Pele
con un 50% de opacidad:

2011-1-RO1-LEO05-15322
20/68
Si queremos manipular ms capas juntas, haz click en una de ellas en el panel capas, y
posteriormente haz click en la segunda casilla a la izquierda de la capa que queremos
relacionar. En este cuadro una cadena que indicar esto.
Si queremos eliminar esta relacin, haz click en el cuadro con la cadena.

El primer cuadro, el que tiene un ojo, muestra si la capa esta visible o no. Esto puede ser
activado o desactivado con un click de ratn.

2011-1-RO1-LEO05-15322
21/68

Combinar capas
Haz una sola capa de las capas enlazadas
Combinar visibles
Haz una sola capa de las capas visibles.
Acoplar imagen
Hacer una sola capa de todas las capas existentes.
3.1.5.
Seleccin
Todo
Ctrl + A. Selecciona el contenido de la capa actual
Deshacer seleccin
Cancelar la seleccin.
Volver a seleccionar
Restaurar la seleccin.
Invertir
Invertir el area seleccionada.
Perfeccionar borde
Suaviza el borde de la seleccin realizada, de modo que no aparezca pixelada si queremos
cortarla.
Si introducimos en el cuadro de dilogo Pluma un valor ms alto, el borde se difuminar.
En la mayor parte de los casos los valores son 1 o 2.

2011-1-RO1-LEO05-15322
22/68
Modificar
Borde
Crea un borde para la seleccin, con el grosor que escojamos. Aadindole color, obtendremos
algo como la imagen de abajo:
Expandir
Expande el rea seleccionada con el nmero de pixeles que hayamos introducido.
Contraer
Reducir el rea seleccionada con el nmero de pixeles que hayamos introducido.
Transformar seleccin
Modifica la altura y la anchura del rea seleccionada sin afectar a la imagen de ninguna forma.
Despus de ejecutar este comando, en la pantalla aparecern 8 puntos de control, cuatro en
las esquinas y cuatro en la mitad de los lados. Arrastrando con el botn izquierdo del ratn en
las esquinas, podemos modificar la altura y la anchura. Si no queremos distorsionar la
seleccin , debemos mantener presionado la tecla Mayscula. Arrastrando con el ratn desde
la mitad d elos lados modificamos slo la altura o la anchura. Si colocamos el cursor del ratn
cerca de un punto de control pero fuera de el, nos daremos cuenta que Pointer se convierte en
una pequea curva con fechas en ambos extremos. Ahora podemos girar la seleccin
arrastrando el ratn en la direccin deseada.

2011-1-RO1-LEO05-15322
23/68

3.1.6.
Filtro
Este menu nos permite aadir diferentes tipos de efectos a nuestras composiciones. Te
recomendamos probar todos estos filtros con la imagen del Castillo, o con otra imagen. Te
presentaremos solo los efectos ms importantes.
Artistico
Bordes Poster
La imagen parece una litografa.

Desenfocar
Los filtros de esta categora producen una imagen distorsionada. El ms usado es Gaussian
Blur.
Gaussian Blur

2011-1-RO1-LEO05-15322
24/68

Distorsionar
Difuminar luz
Da a tu imagen una luz difusa.

Ruido
Aadir ruido
Aadir ruido a la imagen.
Destramar
Es el contrario del comando ruido. Este comando elimina el ruido de la imagen.

2011-1-RO1-LEO05-15322
25/68
Polvo & Rascaduras

Se usa para retocar viejas fotos.
Antes
Despus

2011-1-RO1-LEO05-15322
26/68

Mediana
Es similar al comando Raspaduras, pero con un control ms fino.
Antes
Despues
Interpretar
Diferenciar nubes
Algunas partes de la imagen se transforman en una clase de nubes.

2011-1-RO1-LEO05-15322
27/68

Destello
Simula destellos de luz causadas por la refraccin de la luz en una lente.
Efectos de iluminacin
Diferentes estilos de iluminacin.
Enfocar
Enfocar ms
Ilumina la imagen.

2011-1-RO1-LEO05-15322
28/68

Estilizar
Difusin
La imagen adquiere un toque difuminado.
Relieve
Da a la imagen una apariencia de relieve o litografa.

2011-1-RO1-LEO05-15322
29/68
Bordes resplandecientes
Proporciona un aspecto psicodlico a la imagen.
Solarizar
Nivela y cambia los colores de la imagen.

2011-1-RO1-LEO05-15322
30/68

Azulejos
Proporciona una rejilla artstica a la imagen.
Trazar contorno
Transforma la imagen en un dibujo.
Textura
Texturizar
Aplicar una textura a una imagen.

2011-1-RO1-LEO05-15322
31/68

3.1.7.
Vista
Aumentar (Ctrl+) / Reducir (Ctrl-)

Aumentar/ reducir la escala de cmo se ve la imagen, pero sin modificar su tamao actual.
Reglas
Pulsando o no esta orden se activa o desactivan la visibilidad de las reglas desde el borde la
ventana que contiene la imagen. Con estas reglas aadimos diferentes guas que van a
permitir el alineamiento de los diferentes elementos de la imagen, como puedes ver en la
imagen de abajo:

2011-1-RO1-LEO05-15322
32/68

3.1.8.
Ventana
Desde aqu podrs activar o desactivar herramientas y el Panel de Control, que son
especialmente importantes en el uso de Adobe Photoshop.
Las puedes ver activadas en la imagen de arriba. Ya hemos hablado de algunas de ellas, sobre
las restantes hablaremos ms adelante.
3.1.9.
Ayuda
Como en cualquier otro programa con el menu Ayuda de Photoshop podremos encontrar
resopuestas a nuestras dudas.
Desde este submenu usaremos Photoshop Ayuda (F1).
En la parte de arriba de la ventana que este abierta pulsa la ltima pestaa de la izquierda,
Buscar.
Entonces escribe uno o ms palabras clave en el cuadro y presiona Buscar.
A la derecha aparecern las respuestas a nuestra preguntas.

2011-1-RO1-LEO05-15322
33/68

2011-1-RO1-LEO05-15322
34/68
3.2. Caja de herramientas de Adobe Photoshop

Para aprender, de una manera divertida, que herramientas proporciona Adobe Photoshop, te
proponemos que importes una imagen de Internet y que comiences a jugar con ella. Por
ejemplo busca en Google imgenes familia. Podemos elegir la imagen de abajo, hacienda
click con el botn derecho del ratn y despus guardarla en nuestra ordenador. Despues brela
en Photoshop.
3.2.1. Recortar
Si queremos dividir esta foto en dos partes, podemos usar la herramienta Recortar:

2011-1-RO1-LEO05-15322
35/68

Haz click en Recortar y sita el ratn en la parte superior de la foto. Presiona el botn
izquierdo y arrastra el ratn de forma diagonal hasta la parte media de la imagen y entonces
suelta el botn del ratn. Haz doble click en cualquier lugar dentro de la seleccin y obtendrs
la imagen deseada:
3.2.2. Herramienta marco rectangular
Se usa para crear selecciones rectangulares. Creemos esa seleccin al pie de la foto cortando
las sombras. Selecciona la herramienta marco rectangular de la caja de herramientas
Arrstrala hasta el pie de la imagen, presiona el botn izquierdo del ratn y arrstralo desde la
izquierda hasta la derecha hasta que cubra las sombras. Entonces, suelta el ratn y presiona la
tecla Suprimir. El resultado es la imagen de abajo:

2011-1-RO1-LEO05-15322
36/68
3.2.3. Herramienta marco elptico

Para seleccionar est aherramienta presiona el boton izquierdo del raton en la herramienta y
aparecera una herramienta desde donde puedes seleccionar la herramienta especfica.
Seleccinala desde el cuadro de la izquierda arriba. Si queremos que la seleccin se convierta

en un crculo, presiona la tecla Mayusculas. Ve al men y selecciona de la lista la opcin
Invertir. Presiona la tecla Borrar, entonces retrocede y pulsa Deshacer. La imagen ser algo
como esto:

2011-1-RO1-LEO05-15322
37/68
Si queremos que la imagen tenga un borde, antes de presionar Deshacer, selecciona Invertir
de nuevo y entonces ve al men Edicin y selecciona Contornear.
Los ms importantes parmetros son el grosor del contorno, el color y su ubicacin, como ya
hemos visto en la seccin anterior. Haz los cambios que quieras y presiona OK.
3.2.4. Herramienta lazo

2011-1-RO1-LEO05-15322
38/68
Hay tres tipos de Herramientas Lazo: Herramienta lazo (a mano), Lazo poligonal y Lazo
magntico. El ms adecuado y ms usado es el lazo poligonal.
Vamos a usarlo para cortar a la madre de nuestra imagen de la familia. Para ver mejor la foto,
presiona Control + combinacin de teclas. Pulsamos siempre dentro de la madre y nunca
fuera de ella. Comienza desde un punto, por ejemplo desde el centro de la cabeza y vuelve al
mismo punto. Esto significa que hemos cerrado la seleccin. Seleccion Seleccionar Invertir y
pulsa la tecla Borrar. Corta la imagen alrededor de la madre y obtendrs algo como esto:
Cuando el color de fondo es uniforme o casi uniforme, como el caso de arriba la herramienta
Varita Mgica es una excelente opcin.

2011-1-RO1-LEO05-15322
39/68
Un importante parmetro de esta herramienta es la Tolerancia. A tolerancia 0 se selecciona

solo una tonalidad de color. Si la tolerancia es ms alta, se seleccionarn ms colores. Otro
parmetro
importante
es
Suavizar.
Si
esta
opcin
est
seleccionada
aplicamos
un
suavizado que previene los bordes irregulares.

La seleccin puede moverse con el ratn cuando la herramienta Seleccionar esta activada en el
Panel de Herramientas.
Para mover el objeto seleccionado utilizaremos la herramienta Mover.
3.2.5. Herramienta sector
Hablaremos de esta herramienta en el captulo dedicado a la creacin del diseo de la pgina

web.

2011-1-RO1-LEO05-15322
40/68

3.2.6. Herramienta pincel y herramienta lpiz
Pincel y lpiz son herramientas para deibujar a mano. El parmetro ms importante es el

grosor de la linea o el cepill.
3.2.7. Herramienta tampon de clonar

2011-1-RO1-LEO05-15322
41/68

Se usa principalmente para ajustes finos. Presiona la tecla Alt y haz click en la parte de la
foto que quieres clonar. Entonces haz click en la parte de la imagen donde quieres pegarla. El
parmetro ms importante es el tamao.
3.2.8. Herramienta degradado y bote de pintura
Estas herramientas se usan para rellenar con un color una seleccin.

Degradado es una transicin gradual de un color a otro. Tambin podemos usar otros colores.
Hagamos una seleccin rectangular usando la herramienta de marco rectangular. Hacemos
click en la herramienta Degradado. En la barra de arriba de las propiedades de esta
herramienta haz click en la barra de colores. Obtendremos el siguiente cuadro de dilogo:

2011-1-RO1-LEO05-15322
42/68
Desde arriba podemos escoger un modelo por defecto, o podemos personalizar el degradado
desde el fondo, haciendo click en los sliders de arriba para definir color o en un punto de la
barra de colores para aadir un color adicional. Entonces arrastra el ratn de lado a lado de la
imagen, en la direccin deseada. Obtendremos un resultado similar a la imagen de arriba:
La herramienta Bote de pintura llena el rea seleccionada con un color uniforme. Podemos
seleccionar este color desde el panel de colores, del que hablamos antes.
Una vez que has seleccionado tu color haz click en Bote de Pintura y selecciona el rea que
desees. Obtendremos un resultado similar a la imagen de abajo:

2011-1-RO1-LEO05-15322
43/68
3.2.9. Desenfocar
Se usa para desenfocar una porcin de la imagen, por ejemplo la cara que no queremos que
sea reconocida.
El parmetro ms importante es el tamao de la herramienta usada para difuminar.

Busquemos en internet la foto de alguien famoso, haz click con el botn derecho del ratn y
despus Copiar. De vuelta en Photoshop, Fichero Nuevo o Ctrl + N, establecemos los
parmetros y presionamos OK. Despus, Edicin, Pegar o Ctrl + V.
Con la herramienta Desenfocar seleccionada, difumina el rea que desees. Obtendrs un
resultado parecido a ste:

2011-1-RO1-LEO05-15322
44/68

3.2.10. Herramienta texto
Con esta herramienta podemos aadir y formatear texto con imgenes.
Entremos en el sitio web Coca Cola, buscando Coca Cola en Google. Una vez que entres en el
sitio, presiona Imprimir Pantalla, asegurndote de que el ratn esta fuera del rea til del sitio.
Por medio de esta operacin hacemos una captura de la pantalla complete, una clase de copia.
Volvamos a Adobe Photoshop y presiona Ctrl + N para crear un documento, despus presiona
Ctrl + V (pegar). Obtendremos la siguiente imagen.

2011-1-RO1-LEO05-15322
45/68

Escondemos las barras del ordenador seleccionando la Herramienta Marco Rectangular a la
anchura total. Comencemos con la parte de arriba. Una vez que has hecho la seleccin, escoge
tu color favorito del Panel de Colores y pulsa Edicin Rellenar. Repite esta operacin en la
parte de abajo de la imagen. De esta forma creamos un espacio para un ttulo y un texto
explicatorio. Recorta la imagen para reducir la anchura. Obtendremos algo parecido a esto.
Hay cuatro clase de texto en Photoshop:
Texto horizontal;
Texto vertical;
Texto en una lnea (para ttulos, por ejemplo);
Texto en varias lineas, para prrafos.
Te presentamos abajo la barra de texto para formato. Es muy similar a la conocida y usada de
Microsoft Word.
Podemos escoger la direccin, tipo de letra, tamao, estilo (normal, negrita, cursiva), como
alinearla, color, texto curvado o opciones de prrafo.
Dado que en la parte de arriba de la imagen tenemos ms espacio que en la parte de abajo,
introduciremos el texto en el primer prrafo, y el de la parte de abajo para el ttulo.
En los bordes usamos el texto vertical.

2011-1-RO1-LEO05-15322
46/68

Haz click abajo y escribe Coca-Cola en el formato deseado.
Arriba, arrastra con el ratn desde cualquier lugar desde arriba hasta abajo, con la
herramienta Texto seleccionada. Al final suelta el botn. Establecemos los parmetros
deseados y escribimos. El formato del texto puede establecerse despus. El tamao de la caja
puede ser cambiado arrastrando con el ratn desde los puntos de control que estn en el
centro de los lados. Se puede mover usando la herramienta Mover. Escribamos el siguiente
texto: Este es un pantallazo de la pgina web de Coca Cola para formacin. Obtendremos un
resultado como el de la imagen de abajo:

2011-1-RO1-LEO05-15322
47/68

3.2.11. Herramienta cuentagotas
Esta herramienta se usa para clonar el color de una parte de una imagen para despus usarla
en otra seccin.
3.2.12. Herramienta mano
Esta herramienta se usa para visualizar partes de la imagen que no entran en la ventana.

2011-1-RO1-LEO05-15322
48/68
3.2.13. Herramienta zoom
La lupa se usa para reducir o agrandar la escala de la imagen. La opcin por defecto es zoom
conectado. Para desconectar presiona la tecla Alt.
3.2.14. Color frontal y color de fondo
El color frontal es el color principal que se usa en las herramientas como Pincel, Lpiz o Bote
de pintura. Color de fondo es el color del fondo y es usado por la herramienta Borrador y
Borrar. Por defecto estos colores son blanco y negro. Estos colores pueden ser cambiados
hacienda click en la flecha que est entre ellos.
Estos colores pueden ser cambiados haciendo click sobre ellos.

2011-1-RO1-LEO05-15322
49/68
3.3. Lista de atajos de teclado para Adobe Photoshop CS6

Los siguientes atajos pueden hacer tu trabajo ms fcil hacienda las mismas operaciones pero
ms rpido. Para una lista completa de atajos, visita la pgina de Ayuda de Adobe
(http://help.adobe.com)1.
Atajos para seleccionar Herramientas

V
Mover
Shift + M
Herramienta Marco Rectangular, Herramienta Marco Eliptico
Shift + L
Herramienta Lazo, Lazo poligonal, Lazo magnetico
Shift + W
Seleccin
Shift + C
Copiar
Shift + I
Eyedropper tool, Color Sampler tool, Measure tool, Count tool
Shift + J
Herramienta Pincel corrector, Herramienta Parche, Herramienta Pincel Ojos Rojos
Shift + B
Herramienta Pincel, Herramienta Lpiz, Herramienta sustitucin color
Shift + S
Herramienta Tampn de clonar
Shift + Y
Herramienta Pincel de Historia, Herramienta Pincel Histrico
Shift + E
Herramienta Borrado, Herramienta Borrador Fondo
Shift + G
Herramienta Desenfocar
Shift + O
Herramienta Esponja
Shift + P
Herramienta Lpiz
Shift + T
Texto Horizontal, Texto Vertical,
Shift + A
Elegir ruta
Shift + U
Herramienta Rectangulo, Herramienta Elipse, Herramienta Polgono
Shift + N
Herramienta 3D
Shift + K
Herramienta 3D Rotacin
Herramienta rotar vista
Herramienta mano
Herramienta zoom
http://help.adobe.com/en_US/photoshop/cs/using/WSD578BD7D-07BC-46f6-AAC26E491E8AD818a.html#WS24E993BC-E1F3-4ac6-8225-7685C3B17669a

2011-1-RO1-LEO05-15322
50/68

Atajos para vista imagen
Ctrl + Tab
Moverse por documentos abiertos
Shift-Ctrl-W
Cerrar un fichero
Cambiar modos
Shift + F
Cambiar adelante/atrs en la pantalla estandar, pantalla ampliada
, pantalla entera
Double-click Hand tool
Colocar imagen en una ventana
Ctrl + 1
Ampliar 100%
Ctrl + space
Conectar zoom
Alt + space
Desconectar Zoom
Space + drag
Move Zoom marquee while dragging with the Zoom tool
Page Up / Page Down
Scroll up or down 1 screen
Shift + Page Up / Page Down Scroll up or down 10 units

Home or End
Mover vista a view to upper left corner or lower right corner
Atajos para Galera de Filtros

Alt-click a filter
Aplica un Nuevo filtro
Alt-click a disclosure triangle Abrir/cerrar todos los triangulos

Ctrl
Cambiar el botn Cancelar al predeterminado en Adobe Photoshop
Alt
Change Cancel button to Reset
Ctrl + Z
Deshacer/Rehacer
Ctrl + Shift + Z
Paso adelante
Ctrl + Alt + Z
Paso atrs
Atajos para Curvas

Ctrl + M
Abre el cuadro de dilogo Curvas en Adobe Photoshop
Ctrl + Tab
Selecciona el prximo punto de la curva
Shift + Ctrl + Tab
Selecciona el punto previo de la curva
Ctrl-click on the points
Selecciona mltiple puntos en la curva
Ctrl + D
Deselecciona un punto
Select a point and press Delete Borrar un punto en la curva

Arrow keys
Mover el punto seleccionado 1 unidad
Shift + Arrow keys
Mover el punto seleccionado 10 unidades


2011-1-RO1-LEO05-15322
51/68

Alt-drag black/white point sliders Muestra puntos de luz y sombras que sern recortados
Ctrl-click the image
Establece un punto en la curva
Shift + Ctrl-click the image Establece un punto en los canales de la curva

Alt-click the field
Cambiar el tamao de la rejilla
Atajos para el modo Mezcla

Shift + + (plus) or - (minus) Cambia los modos de mezcla
Shift + Alt + N
Normal
Shift + Alt + I
Disolver
Shift + Alt + Q
Detras
Shift + Alt + R
Limpiar
Shift + Alt + K
Oscurecer
Shift + Alt + M
Multiples
Shift + Alt + B
Color copia
Shift + Alt + A
Color lineal
Shift + Alt + G
Iluminar
Shift + Alt + S
Pantalla
Shift + Alt + F
Luz suave
Shift + Alt + H
Luz fuerte
Shift + Alt + V
Luz viva
Shift + Alt + J
Luz lineal
Shift + Alt + E
Diferencia
Shift + Alt + X
Exclusion
Shift + Alt + U
Tonalidad
Shift + Alt + T
Saturacin
Shift + Alt + C
Color
Shift + Alt + Y
Luminosidad
Sponge tool + Shft + Alt + D Des-saturar

Sponge tool + Shft + Alt + S Saturar

2011-1-RO1-LEO05-15322
52/68
3.4. Algunas cosas acerca de CorelDRAW

Como dijimos en el inicio del modulo, CorelDRAW es una aplicacin de diseo grfico que te
permitir crear diseos profesionales (simples o complejos).
Una ventana CorelDRAW es como aparece abajo:
Puedes ver que muchos de los componentes estn prestados de Windows. Para ser ms
concreto una ventana de CorelDRAW incluye lo siguiente:
-
Una barra de ttulos que muestra el nombre y la versin de la aplicacin, el nombre del
fichero que esta Abierto y otros controles (minimizar, restaurar y cerrar):
La barra de menu permite al acceso a las diferentes funciones y otros botones

(minimizar, restaurar y cerrar); la barra de men es similar al men de Windows:
Barra de propiedades:

2011-1-RO1-LEO05-15322
53/68
Caja de herramientas:
Herramienta Seleccin Permite seleccionar y transformar objetos

Herramienta Forma l (F10) Permite el ajuste de la forma del objeto
Herramienta Recortar Elimina el area fuera de la seleccin
Herramienta Zoom Tool (Z) Aplica zoom en el rea de trabajo
Herramienta Mano Alzada (F5) Dibuja curvas y alinea segmentos
Herramienta Relleno inteligente Rellena rpidamente el rea
Herramienta Rectangulo (F6) Permite dibujar rectngulos y esquinas
Herramienta Elipse (F7) Permite dibujar elipses, circulos y arcos
Herramienta Poligono (Y) Permite dibujar plgonos y estrellas
Herramienta Formas Bsicas Disea formas bsicas
Herramienta Texto (F8) Permite escribir (prrafos o textos artsticos)
Herramienta Tabla - Permite dibujar tablas
Herramienta Mezcla Mezcla dos objetos
Herramienta Cuentagotas de color - Permite seleccionar un color ya usado en un
dibujo
Herramienta Pluma del contorno - Permite cambiar los atributos como el grosor,
color, estilos.de cualquier lnea.
Herramienta Relleno - Rellena objetos con cualquiera de los cinco tipos de relleno:
uniforme, degradado, mapa de bits, textura o PostScript
Herramienta Relleno Interactivo (G) Crea un relleno de manera dinmica
La paleta CMYK, te permite cambiar fcilmente los colores de fondo o contornos

2011-1-RO1-LEO05-15322
54/68
En el prximo captulo aprenderemos cmo crear un diseo en CorelDRAW.
3.5. Lista de atajos de teclado para CorelDRAW X6

Los siguientes trabajos pueden hacer tu trabajo ms fcil, haciendo lo mismo que con las
operaciones y mens, pero mucho ms rpido. Para ver una lista completa de dichos atajos
por favor visita la pgina web de Corel (www.corel.com)2
COMANDO
ATAJO
CONSEJOS
Medios artsticos
Dibuja curvas y aplica medios artcticos
Atrs
Ctrl+PgDn
Situa a los objetos seleccionados una posicin atrs
Cursiva
Ctrl+B
Cambia el estilo a cursiva
Romper atrs
Ctrl+K
Rompe el objeto seleccionado
Comillas
Ctrl+M
Aade/elimina comillas
Centrar
Ctrl+E
Cambia la alineacin del texto al centro
Centrar a pgina
Alinea al centro de la pgina los objetos seleccionados
Color
Shift+F12
Abre el cuadro de dilogo Color
Combinar
Ctrl+L
Combina los obhjetos seleccionados
Convertir a curvas
Ctrl+Q
Convierte el objeto seleccionado a una curva; convertir

a curvar facilita la edicin
Convertir prrafos a texto
Ctrl+F8
Convierte textos artsticos a prrafos o viceversa
http://product.corel.com/help/CorelDRAW/540240626/Main/EN/Doc/wwhelp/wwhimpl/js/html/wwhelp.htm?context=
CorelDRAW_Help&topic=IDDH_DEFAULT_HELP_PAGE&single=

2011-1-RO1-LEO05-15322
55/68
Convertir diseos a objetos
Ctrl+Shift+Q
Convierte un diseo en un objeto
Copiar
Ctrl+C
Copia la seleccin y la sita en el Portapapeles
Cortar
Ctrl+X
Corta la seleccin y la sita en Portapeles
Borrar
Delete
Borra el objeto seleccionado
Duplicar
Ctrl+D
Duplica
el
objeto
seleccionado
hasta
el
nmero
especificado
Editat texto
Ctrl+Shift+T
Abre el cuadro de dialogo Edicin
Ellipse
F7
Dibuja elipses y crculos; doble click abre la Caja de

Herramientas
Borrador
Borra parte de un grfico o divide un objeto
Salida
Alt+F4
Sale de CorelDRAW y guarda el diseo activo
Exportar...
Ctrl+E
Exporta texto o objetos a otro formato
Rellenar
Relleno interactivo
Encontrar texto...
Alt+F3
Busca el texto especificado en el objeto
Tipos de letras
Ctrl+Shift+F
Muestra una lista de las fuentes disponibles
Formato texto.
Ctrl+T
Formatea las propiedades del texto
Adelante un paso e
Ctrl+PgUp
Situa el objeto seleccionado un paso adelante
Fuente
F11
Aplica fuenets a objetos
Dibujo libre
F5
Dibuja lineas y curvas
Completal
Ctrl+J
Cambia
la
alineacin
del
texto
alineamiento
completot
Pantalla-completa
F9
Muestra una pantalla previa entera del dibujo
Dibuja un grupo de rectngulos; con doble clik abre la
Previsualizacin
Papel grfico
caja de herramientas del cuadro de dilogo Opciones

Grupo
Ctrl+G
Agrupa los objetos seleccionados
HTML Lista de Fuentes
Ctrl+Shift+H
Muestra
una
lista
de
todas
las
fuentes
activas/disponibles
Texto horizontal
Ctrl+,
Cambia el texto a horizontal
Importar..
Ctrl+I
Importa textos o objetos
Interactive Fill
Relleno interactivo
Izquierda
Ctrl+L
Changes the alignment of text to left alignment
Relleno de Malla
Relleno de malla

2011-1-RO1-LEO05-15322
56/68
Prxima pgina
PgDn
Va a la siguiente pgina
Nuevo
Ctrl+N
Crea un nuevo fichero
Abrir...
Ctrl+O
Abre un fichero existente
Opciones...
Ctrl+J
Abre
el
cuadro
de
dilogo
de
opciones
predeterminadas
Pegar
Ctrl+V
Pegar
Atributos de delineado
F12
Atributos de delineado
Poligono
Dibuja polgonos simtricos ; al hacer doble clik abre la

caja de herramientas
Pgina previa
PgUp
Va a la pgina anterior
Imprimir...
Ctrl+P
Imprime el dibujo actual
Propiedades
Alt+Return
Muestra objetos o propiedades de la herramientas

dependiendo de la seleccin actual de herramientas
Rectangulo
F6
Dibuja rectngulos
Rehacer
Ctrl+Shift+Z
Rehace los ltimos cambios
Refrescar pantalla
Ctrl+W
Actualiza el dibujo
Repetir
Ctrl+R
Repite la ltima operacin
Derecha
Ctrl+R
Chambia la alineacin de texto a derecha
Guardar...
Ctrl+S
Guarda el dibuho activo
Seleccionar todosl
Ctrl+A
Selecciona todos los objetos de la pgina activa
Formas
F10
Edita los nodos de un objeto
Comprobar ortografa
Ctrl+F12
Abre el comprobador de ortografia
Espiral
Dibuja
espirales;
doble
click
abre
la
caja
de
herramientas del cuadro de dialogo Opciones

Texto
F8
Aade texto; click en la pgina para aadir texto

artstico y arrastra para aadir prrafos
Deshacer
Ctrl+Z
Deshace las ltimas operaciones
Desagrupar
Ctrl+U
Desagrupa los objetos seleccionados o grupos de

objetos
Rellenar uniformemente.
Shift+F11
Aplica un color uniforme a los objetos
Subrayar
Ctrl+U
Cambia el estilo del texto a subrayado
Comillas
Ctrl+M
Muestra/Esconde Comillas
Texto vertical
Ctrl+.
Cambia el texto a vertical


2011-1-RO1-LEO05-15322
57/68
Editor visual bsico...
Alt+F11
Inicia el Editor Visual Bsico
Qu es esto?
Shift+F1
Qu es esto? Ayuda
Zoom
Zoom
Zoom- Alejar
F3
Zoom Alejar
Zoom Todos
F4
Zoom sobre todos objetos en el rea de trabajo
Zoom Pgina
Shift+F4
Zoom sobre toda la pgina
Zoom Seleccin
Shift+F2
Zoom sobre los objetos seleccionados

2011-1-RO1-LEO05-15322
58/68
4. DISEO WEB
4.1. Diseo web con Adobe Photoshop
Adobe Photoshop es el
software principal para crear diseo web profesional, al margen de
poder ser utilzado para abrir plataformas tales como WordPress, Joomla, OSCommerce etc.
Generalmente una pgina web incluye seis elementos bsicos: Cabecera, Sub-cabecera,
Izquierda, Derecha, Paginas y Pie de pgina.
Analizmoslas de forma separada para ver que contienen en realidad.
Cabecera
Sub-Cabecera (Menu Horizontal)
Derecha
(Noticias
Izquierda
Paginas
Contacto
(Menu vertical)
Mapa
etc.)
Pie de pgina (Contador de trfico, Copyright, etc.)
Cabecera
Contiene el nombre y el logo de la compaa que posee el sitio web, fotos, etc.
Sub Cabecera
Contiene el menu horizontal etc.

2011-1-RO1-LEO05-15322
59/68

Izquierda
Contiene el menu vertical etc.
Paginas
Contiene contenidos especficos en cada pgina, los otros elementos permanecen fijos.
Derecha
Puede contener: Noticias, Contacto, Mapa etc.
Pie de pgina
Puede contener: Contador de trafico; Copyright; etc.
Apliquemos este esquema a un caso. Supongamos que debemos crear a sitio web para una
compaa que organiza fiestas para nios. Aplicando lo que hemos aprendido en diseo
grfico, el sitio podra ser algo como esto:

2011-1-RO1-LEO05-15322
60/68

Vamos a usar ahora la herramienta Sector para dividir en rectngulos, de acuerdo al boceto
presentado anteriormente en este captulo.
Obtendremos un resultado parecido a la imagen de abajo:

2011-1-RO1-LEO05-15322
61/68

Ve a Archivo Guardar Web. La siguiente ventana se abrir:
Llama al fichero e index.html y gurdalo.

Cuando escribes la direccin de una pgina web en el buscador, aparece index.html,
default.html y diferentes extensiones de estos dos ficheros. Si el buscador no lo encuentra,
aparecer un mensaje de error.

2011-1-RO1-LEO05-15322
62/68

Automticamente se crear la carpeta Imgenes. Se mostrar lgo como la imagen de abajo:
Ahora vamos a la carpeta donde guardamos el sitio y hacemos doble click en index.html para
abrirlo. Obtendremos un resultado similar a la imagen de abajo:

2011-1-RO1-LEO05-15322
63/68
4.2. Diseo web con CorelDRAW

Crearemos el mismo diseo, que el que creamos con Photoshop, pero ahora usando
CorelDRAW. Con CorelDRAW es ms fcil crear diseos, pero las imgenes que vamos a usar
debern ser procesadas con Photoshop. Estas imgenes son las siguientes:
Abre CorelDRAW y crea un Nuevo documento usando Archivo - Nuevo o usando la combinacin
teclas Ctrl + N. Desde el men Diseo escoge Preparar pgina. Haz los cambios deseados de la
imagen de arriba y haz click en OK.

2011-1-RO1-LEO05-15322
64/68
Primero crearemos el fondo. Para hacer esto selecciona Rectngulo de la caja de herramienta
en la parte izquierda y rodala con un marco. Entonces, selecciona Rellenar - Degradado,
escoge el color que quieres usar, selecciona un ngulo de -90 grados, de forma que el
gradiente sea vertical y presiona OK.
Para un control ms fino podemos usar Herramienta Relleno Interactivo.
Seleccionamos la primera herramienta de la izquierda, Mover, y hacemos click en el rectngulo
para seleccionarlo, si no est ya seleccionado. Entonces haz click en la primera casilla de la
Paleta de Colores, a la derecha, aquella con una X, para eliminar el borde rectangular. Si la
paleta de colores no existe debemos activarla desde el men de Windows Paleta de Colores.
Ten cuidado en escoger la paleta RGB, porque trabajaremos para la web.
Obtendremos un resultado como el de la imagen de abajo:

2011-1-RO1-LEO05-15322
65/68

Ahora crearemos el espacio til para el diseo. Para esto selecciona de nuevo la herramienta
Rectangulo. Introduce en las propiedades, los valores de 1000 pxeles para altura y la anchura.
Ten cuidado en cerrar la llave para evitar que la altura y la anchura no se cambien
automticamente. Si la llave esta cerrada, haz click para abrirla.
Con el rectngulo presionado, presiona P para ponerlo en el centro de la pgina. Dibuja

lneas verticales en los lados y despus brralas.
Creemos ahora un rectngulo con 1000/400 pixeles para la cabecera. Dibuja una lnea en el
fondo de la diapositiva y luego borra el rectngulo.
A travs del men Archivo formato del comando Importar o con Ctrl + I combinacin de teclas,
trae al cuadro de cabecera las imgenes: casa, castillo, botones y nios. Muvelos usando la

2011-1-RO1-LEO05-15322
66/68

herramienta Seleccionar y si es necesario, acerca o aleja, para arrastrar con el ratn
diagonalmente desde una esquina hasta la izquierda o la derecha, arriba o abajo.
Escoge la herramienta Texto, escribe HOGAR, selecciona el texto con la herramienta
Seleccionar, haz click en verde oscuro de la Paleta de Colores, haz click de nuevo en el texto
para rotarlo desde una esquina y sitalo a la izquierda. Y as con todos los elementos. Haz lo
mismo para TRINKET y para YOU ARE THE PARTY, para el ultimo escoge un color rojo
oscuro.
Ahora crearemos cajas para textos e imgenes. Con la herramienta Rectngulo crearemos una
caja rectangular. Seleccionar la herramienta Seleccionar y haz click en Naranja en la Caja de
Colores para crear un contorno naranja y haz click en X, para no tener ningn color de fondo
en el rectngulo. Haz click fuera de la caja para des-seleccionar. Con la herramienta
Rectngulo crea una caja dentro del primer rectngulo para el ttulo para el ttulo, con un
fondo naranja para el ttulo y sin bordes. Con la herramienta Texto, en blanco, escribe en el
medio CONTACT. Con la herramienta Texto, crea una caja vaca arrastrando con el cursor
Entonces escribe los detalles de contacto en verde. Obtendremos un resultado como el de
abajo.
CONTACT
Str. Martisor nr. 55 sector 4
0721.196.893 0744.870.675
Zona Brancoveanu Langa
"Oraselul Copiilor"
Crearemos de la misma forma otras cajas. Para las fotos usaremos Archivo Importar o Ctrl +
I, como hicimos cuando trajimos a CorelDRAW las imgenes para la cabecera. Para mover

2011-1-RO1-LEO05-15322
67/68

todas las cajas, rodalas con el ratn usando la herramienta Seleccin y despus Ordenar
Grupo o Ctrl + G. Para des-agrupar usa: Ordenar Desagrupar o Ctrl + U. Finalmente, el
diseo se asemejar a la imagen de abajo.
Guarda la imagen en un formato reconocido por Photoshop (psd, tif, jpg, etc.), brelo con este
programa y transfrmalo en HTML usando la herramienta Sector, como hemos aprendido en el
sub-capitulo previo.
Hablaremos ms acerca de la creacin de pginas web en otros cursos desarrollados en el

proyecto e-LIFE.

2011-1-RO1-LEO05-15322
68/68

Module 4 - E-LIFE Graphic Design Course PORTRAIT ES

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 4 - E-LIFE Graphic Design Course PORTRAIT ES

Uploaded by

Copyright:

Available Formats

Modulo 4:Diseo Grafico

Este proyecto ha sido financiado con apoyo

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

DESCRIPCION DEL MODULO ....................................................... 3

3.1. Adobe Photoshop Menus ............................................................................ 6

3.2. Caja Herramientas Adobe Photoshop

Herramienta Marco Rectangular ............................................................... 36

HHerramienta Marco Elptico .................................................................... 37

Herramienta Lazo ................................................................................... 38

Herramienta Sector ................................................................................. 40

Herramiuenta Pincel y Lapiz ...................................................................... 41

Herramienta Tampon de Clonar ................................................................ 41

Herramienta Degradado y Bote pintura ..................................................... 42

Herramienta Desenfocarl .......................................................................... 44

Herramienta Texto ................................................................................... 45

Herramienta Cuentagotas ......................................................................... 48

Herramienta Mano .................................................................................. 48

Herramienta Zoom .................................................................................. 49

Color Frontal y color Fondo ...................................................................... 49

3.3. Lista de atajos de teclado para Adobe Photoshop CS6 ................................ 50

4.1. Diseo web con Adobe Photoshop ............................................................. 59

A Leonardo da Vinci Project

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

Diseo grfico - Adobe Photoshop y CorelDRAW

Diseo grfico, diseos

Los destinatarios de este modulo son personas

Trabajadores autnomos altamente especializado

web, trabajo virtual,

Este modulo proporcionar a los participantes con

Al completar el modulo los participantes

A Leonardo da Vinci Project

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

La evaluacin incluir un test de respuestas

coste (coste optimizacion)

A Leonardo da Vinci Project

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

A Leonardo da Vinci Project

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

3.1. Adobe Photoshop Menus

Para crear un documento Nuevo ve a Archivo Nuevo. El cuadro de dialogo de abajo

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

.bmp (bitmap): Fichero de imagen de Windows, reconocido por la mayor parte de

.tif y EPS: Su usan para impresin.

A Leonardo da Vinci Project

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

Analizemos las caractersiticas ms importantes de este ventana.

Aqu puedes escoger el diseo para la galera.

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

Aqu seleccionamos el tamao de la imagen.

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

A Leonardo da Vinci Project

e-LIFE e-Learning Virtual Center for People with Physical Disabilities

LdV Project e-LIFE Modulo 4 Diseo Grafico Photoshop y CorelDRAW

Tamao del papel (A4, A5 ), adecuado a la imagen, seleccin de bandeja (Bandeja 1,

A Leonardo da Vinci Project

e-LIFE e-Learning Virtual Center for People with Physical Disabilities