Modulo 4:Diseño Grafico Photoshop y CorelDRAW

Modulo 4:Diseño 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 Comisión Europea. Esta publicación

refleja las opiniones de los autores y la

Comisión no es responsable del uso que

pueda hacerse de la información.

LdV Project “e-LIFE” – Modulo 4 – Diseño Grafico Photoshop y CorelDRAW

A Leonardo da Vinci Project

e-LIFE – e-Learning Virtual Center for People with Physical Disabilities 2011-1-RO1-LEO05-15322

2/68

TABLA DE CONTENIDOS

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

2. INTRODUCCION ........................................................................... 5

3. DISEÑO 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 Elíptico .................................................................... 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. DISEÑO WEB .............................................................................. 59

4.1. Diseño web con Adobe Photoshop ............................................................. 59

4.2. Diseño web con CorelDRAW .................................................................... 64




3/68

1. DESCRIPTION MODULO

TITULO MODULO Diseño gráfico - Adobe Photoshop y CorelDRAW

CODIGO VAT4

PALABRAS CLAVE Diseño gráfico, diseños web, trabajo virtual,

gráficos raster (bitmap)

DESTINATARIOS Los destinatarios de este modulo son personas

con discapacidad física que buscan oportunidades

para entrar o mantener el contacto con el

Mercado virtual de trabajo.

NIVEL Intermedio

OPORTUNIDADES

PROFESIONALES

Trabajadores autónomos altamente especializado

que puedan crear diseños de páginas web,

gráficos para anuncios, etc.

OBJETIVOS DEL

MODULO

Este modulo proporcionará a los participantes con

conocimientos prácticos acerca de como diseñar

gráficos para anuncios y diseño de páginas web

Aprenderán lo necesario para iniciar una carrera

profesional en diseño gráfico.

RESULTADOS FORMATIVOS

Al completar el modulo los participantes

aprenderán como convertirse en diseñadores

gráficos.

REQUISITOS (DESTREZAS)

Uso de destrezas básicas en información y

comunicación

REQUISITO (CURSO):

Ninguna




4/68

HORAS DE FORMACION

44 horas

COMPENTENCIAS Desarrollar e implementar procesos y

procedimientos efectivos de trabajo

EVALUACION La evaluación incluirá un test de respuestas

múltiples. Cada test incluirá preguntas de

respuestas múltiples que comprobarán el

conocimiento y la comprensión de los

participantes de los resultados formativos.

CATEGORIA coste (coste optimizacion)

tiempo (gestión eficiente del tiempo)

s-calidad (calidad del servicio)

m-calidad (gestión de la calidad)

MATERIALE SUPLEMANTARIOS

Ninguno




5/68

2. INTRODUCCION

Hay dos tipos principales de ficheros de gráficos digitales: imágenes vectoriales y imagenes en

raster (bitmap).

Las imágenes vectoriales están hechas de miles de pequeñas líneas; las imágenes raster

bitmap) están hechas con pixeles.

Los gráficos vectoriales se usan principalmente para desarrollar dibujos, logos, dibujo

técnico, diseño de paginas web, etc.

Una de las principales ventajas de las imágenes vectoriales es que puedes hacer más grande la

imagen tanto como quieres sin perder calidad.

Uno de los programas más usados para este tipo de gráficos CorelDRAW, desarrollado y

publicado por Corel.

Los gráficos raster (bitmap) se usan en diseño gráfico, diseño web, edición de fotografías

etc.

Las imágenes raster, son también conocidas como imágenes bitmap, por los pixeles. A

diferencia de los gráficos sectoriales, cuando se incrementa el tamaño de una imagen la

calidad se reduce, y puedes ver los pixels.

El programa más usado para gráficos 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 más importantes usados en diseño gráfico y diseño web.

Al finalizar el modulo serás capaz de crear gráficos profesionales que cualquier compañía

querrá comprar y usar.




6/68

3. DISEÑO 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 tamaño de la imagen, las unidades de

medida, la resolución, 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 imágenes de tu ordenador para

edición.

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.




7/68

Guardar

Esta opción 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 tensión o porque

tu ordenador se haya bloqueado.

Para tener más velocidad puese usar el atajo Ctrl + S. La primera vez que uses este comando

debes especificar el nombre, la extensión y la ruta donde quieres guardar el archivo, como

sucede con el comando Guardar Como. Hablaremos en seguida de este comando. Después de

esto, el programa ya no te preguntará más; 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

edición del fihero y para impresión.

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

programas con funciones gráficas. Este tipo de fichero es menos usado en el trabajo

profesional.

- .jpg, .gif, .png: Son formatos de imágenes para web, intercambio de ficheros, y para

inserter en otros programas. El formato Jpg también puede ser usado para impresión.

- .tif y EPS: Su usan para impresión.

Guardar como

A diferencia de Guardar, cuando usamos Guardar como podemos especificar el nombre de

fichero, la carpeta y la extensión.

Guardar para Web

Este comando guarda imágenes que pueden ser usadas en la web en los formatos .jpg, .gif y

.png. También se usa para convertir diseños en formato HTML, pero hablaremos de esto en el

próximo capítulo – Creación de Diseño Web.

Una de las características más importantes en relación a estos tipos de ficheros es la relación

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

cámaras digitales.




8/68

Automatizar

Una de las opciones más usadas de este submenu es Web Photo Gallery. Es una herramienta

excelente para crear rápidamente álbumes de fotos para sitios web, atractivos y fáciles de

navegar.

Analizemos las caracterísiticas más importantes de este ventana.

Estilos

Aquí puedes escoger el diseño para la galería.




9/68

Carpetas

Buscar

Escoge la carpeta que contiene las imágenes que serán usadas en la galería.

Destino

Especifica la carpeta donde vamos a crear la galería.

Opciones

Aquí seleccionamos el tamaño de la imagen.

Información acerca de la Galería

Especifica el nombre de la web, el nombre del fotógrafo, los datos de contacto (e-mail,

teléfono …), fecha, nombre de la fuente, tamaño de la fuente.




10/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

Diseño de página




11/68

Escoge el número de copias y la orientación del papel – Horizontal o vertical, etc.

Papel

Tamaño del papel (A4, A5 …), adecuado a la imagen, selección de bandeja (Bandeja 1,

Bandeja 2…), especifica tipo de papel (normal……).

Calidad de impresión




12/68

Resolución significa calidad de la imagen. Cuando la resolución es alta, la calidad de la imagen

lo es también.

La impresión en blanco y negro o en escala de grises se usa para economizar toner.

3.1.2. Edición

Atras / Adelante

Como en la mayor parte de los programas el comando Atrás cancela la última acción 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 acción determinada.

Para volver o corregir más de una acción, debemos usar Pincel de Historia y hacer click en la

acción 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.




13/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 parámetros más importantes que se

pueden definir son: anchura, color y localización (dentro, fuera o centro).

Transformacion libre

Con este comando podemos escalar y/o rotar el área seleccionada de la capa actual.

Después 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 botón izquierdo del ratón presionado, podemos cambiar la

anchura y la altura.




14/68

Si queremos escalar la imagen de manera proporcional, debemos presionar la techa

Mayúsculas.

Presionando con el ratón desde la mitad de los lados modificaremos solo una dimensión.

Si queremos rotar la selección coloca el puntero fuera de un punto pero cercano a él.

Aparecerá una pequeña curva con flechas a ambos lados. Entonces, dibuja con el ratón hacia

la izquierda o la derecha.

Transformar

Escalar – Comentado más arriba

Rotar – Explicado en Transformación Libre

Sesgar – Cambia la selección de la capa actual como un paralelogramo vertical o horizontal

Distorsionar – Deformar el área seleccionada, presionando con el ratón 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 códigos de color usados en una imagen. El modo de color se escoge en función del

entorno donde queremos usar la imagen: monitor, Internet o impresión.




15/68

Escala de grises

Transforma las imágenes 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 más importantes en

Adobe Photoshop, ya que nos permiten manipular los elementos diferentes de una imagen de

forma separada. Hablaremos de esto en el próximo 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 numérico que oscila entre 0 y 255. Por ejemplo el código para el color negro es

es R:0 G:0 B:0, y el código para el color blanco es R:255 G:255 B:255. Este código de colores

es usado por el monitor y para diseño gráfico para la web.

Color CMYK

El nombre de este código 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 numérico

que oscila entre 0 y 100. Por ejemplo el código del color negro es C:0 M:0 Y:0 K:100, mientras

que el código para el blanco es C:0 M:0 Y:0 K:0.

El código de color CMYK se usa en impresión.

Ajustes

Curvas

Desde aquí podemos controlar el tono de los colores de las imágenes colocando el ratón 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. También podemos trabajar en canals

de color de forma separada; RGB seleccionando desde arriba del cuadro de diálogo. Una vez

que estas satisfecho con los resultados presiona OK o Cancear si quieres cancelar los cambios.




16/68

Brillo /Contraste

Cambiar el brillo y el contraste puede hacerse usando los cursores del ratón, que están 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-visualización.

Contraste automático

La optimización del contraste se hace automáticamente.

Duplicar

Crear una copia de la imagen en una nueva ventana.

Tamaño imagen




17/68

Si creemos que no hemos seleccionado bien las dimensiones, medidas o la resolución de la

imagen cuando hemos creado el archivo, podemos cambiarlas con este comando.

Tamaño del lienzo

Habitualmente este comando se usa para aumentar el tamaño del espacio donde se encuentra

la imagen, dejando el tamaño de la imagen intacto, para añadir nuevos elementos.

Rotación de imagen

Realiza las operaciones discutidas en Edición /Transformación.

3.1.4. Capa

Como ya se ha dicho, las capas son elementos gráficos básicos de Adobe Photoshop, porque a

través de ellas podemos controlar de manera separada los elementos de la imagen,

colocándolos 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 ratón para copiar. Entonces

abriremos Photoshop y escribimos Ctrl + N (nuevo fichero), y Ctrl + V (Pegar). En el panel




18/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 océano, abre la imagen y presiona con el botón derecho del ratón –

Copiar, después ve a Photoshop y presiona Ctrl + V en la imagen del castillo para pegar el

océano. Haz doble click de nuevo en la capa 1, escribe océano y presiona Enter. Podemos ver

solo la última imagen, el océano, se puede ver porque el océano esta situado por encima de la

imagen del castillo. Si quieres ver el castillo, selecciona y mueve con el ratón 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 ratón sobre ella.

El mismo efecto puede obtenerse presionando el penúltimo 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 ratón el Fondo o la capa 0 en el Panel Capa. Una

ilustración del valor práctico de este trabajo se muestra en las imágenes de abajo, con Fondo o

sin él.




19/68

Grupo

Este comando crea una carpeta en el panel Capas, donde se pueden agrupar las capas por

temas, para poder ser manipuladas más facílmente. Esta característica es útil para imágenes

complejas, donde se trabaja con un gran número de capas. Por defecto la carpeta de capas se

llama Grupo 1, pero este nombre se puede cambiar después, haciendo doble click.

Por ejemplo arrastra con el ratón la capa océano en el Grupo 1. El panel de capas mostrará la

imagen de abajo:

Para volver, tenemos que hacer la operación 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.




20/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 más fácil de utilizar si hacemos doble

click en el icono Capas o en la parte azul y vacía de la capa deseada. Veremos la siguiente

ventana:

Los efectos más 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:




21/68

Si queremos manipular más 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 relación, 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 ratón.




22/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. Selección

Todo

Ctrl + A. Selecciona el contenido de la capa actual

Deshacer selección

Cancelar la selección.

Volver a seleccionar

Restaurar la selección.

Invertir

Invertir el area seleccionada.

Perfeccionar borde

Suaviza el borde de la selección realizada, de modo que no aparezca pixelada si queremos

cortarla.

Si introducimos en el cuadro de diálogo Pluma un valor más alto, el borde se difuminará.

En la mayor parte de los casos los valores son 1 o 2.




23/68

Modificar

Borde

Crea un borde para la selección, con el grosor que escojamos. Añadiéndole color, obtendremos

algo como la imagen de abajo:

Expandir

Expande el área seleccionada con el número de pixeles que hayamos introducido.

Contraer

Reducir el área seleccionada con el número de pixeles que hayamos introducido.

Transformar selección

Modifica la altura y la anchura del área seleccionada sin afectar a la imagen de ninguna forma.

Después de ejecutar este comando, en la pantalla aparecerán 8 puntos de control, cuatro en

las esquinas y cuatro en la mitad de los lados. Arrastrando con el botón izquierdo del ratón en

las esquinas, podemos modificar la altura y la anchura. Si no queremos distorsionar la

selección , debemos mantener presionado la tecla Mayúscula. Arrastrando con el ratón desde

la mitad d elos lados modificamos sólo la altura o la anchura. Si colocamos el cursor del ratón

cerca de un punto de control pero fuera de el, nos daremos cuenta que Pointer se convierte en

una pequeña curva con fechas en ambos extremos. Ahora podemos girar la selección

arrastrando el ratón en la dirección deseada.




24/68

3.1.6. Filtro

Este menu nos permite añadir 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 más importantes.

Artistico

Bordes Poster

La imagen parece una litografía.

Desenfocar

Los filtros de esta categoría producen una imagen distorsionada. El más usado es Gaussian

Blur.

Gaussian Blur




25/68

Distorsionar

Difuminar luz

Da a tu imagen una luz difusa.

Ruido

Añadir ruido

Añadir ruido a la imagen.

Destramar

Es el contrario del comando ruido. Este comando elimina el ruido de la imagen.




26/68

Polvo & Rascaduras

Se usa para retocar viejas fotos.

Antes

Después




27/68

Mediana

Es similar al comando Raspaduras, pero con un control más fino.

Antes

Despues

Interpretar

Diferenciar nubes

Algunas partes de la imagen se transforman en una clase de nubes.




28/68

Destello

Simula destellos de luz causadas por la refracción de la luz en una lente.

Efectos de iluminación

Diferentes estilos de iluminación.

Enfocar

Enfocar más

Ilumina la imagen.




29/68

Estilizar

Difusión

La imagen adquiere un toque difuminado.

Relieve

Da a la imagen una apariencia de relieve o litografía.




30/68

Bordes resplandecientes

Proporciona un aspecto psicodélico a la imagen.

Solarizar

Nivela y cambia los colores de la imagen.




31/68

Azulejos

Proporciona una rejilla artística a la imagen.

Trazar contorno

Transforma la imagen en un dibujo.

Textura

Texturizar

Aplicar una textura a una imagen.




32/68

3.1.7. Vista

Aumentar (Ctrl+) / Reducir (Ctrl-)

Aumentar/ reducir la escala de cómo se ve la imagen, pero sin modificar su tamaño 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 añadimos diferentes guías que van a

permitir el alineamiento de los diferentes elementos de la imagen, como puedes ver en la

imagen de abajo:




33/68

3.1.8. Ventana

Desde aquí podrás 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 más 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 pestaña de la izquierda,

Buscar.

Entonces escribe uno o más palabras clave en el cuadro y presiona Buscar.

A la derecha aparecerán las respuestas a nuestra preguntas.




34/68




35/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 imágenes “familia”. Podemos elegir la imagen de abajo, hacienda

click con el botón derecho del ratón y después 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:




36/68

Haz click en Recortar y sitúa el ratón en la parte superior de la foto. Presiona el botón

izquierdo y arrastra el ratón de forma diagonal hasta la parte media de la imagen y entonces

suelta el botón del ratón. Haz doble click en cualquier lugar dentro de la selección y obtendrás

la imagen deseada:

3.2.2. Herramienta marco rectangular

Se usa para crear selecciones rectangulares. Creemos esa selección al pie de la foto cortando

las sombras. Selecciona la herramienta marco rectangular de la caja de herramientas

Arrástrala hasta el pie de la imagen, presiona el botón izquierdo del ratón y arrástralo desde la

izquierda hasta la derecha hasta que cubra las sombras. Entonces, suelta el ratón y presiona la

tecla Suprimir. El resultado es la imagen de abajo:




37/68

3.2.3. Herramienta marco elíptico

Para seleccionar est aherramienta presiona el boton izquierdo del raton en la herramienta y

aparecera una herramienta desde donde puedes seleccionar la herramienta específica.

Selecciónala desde el cuadro de la izquierda arriba. Si queremos que la selección se convierta

en un círculo, presiona la tecla Mayusculas. Ve al menú y selecciona de la lista la opción

Invertir. Presiona la tecla Borrar, entonces retrocede y pulsa Deshacer. La imagen será algo

como esto:




38/68

Si queremos que la imagen tenga un borde, antes de presionar Deshacer, selecciona Invertir

de nuevo y entonces ve al menú Edición y selecciona Contornear.

Los más importantes parámetros son el grosor del contorno, el color y su ubicación, como ya

hemos visto en la sección anterior. Haz los cambios que quieras y presiona OK.

3.2.4. Herramienta lazo




39/68

Hay tres tipos de Herramientas Lazo: Herramienta lazo (a mano), Lazo poligonal y Lazo

magnético. El más adecuado y más 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 + combinación 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 selección. Seleccion Seleccionar Invertir y

pulsa la tecla Borrar. Corta la imagen alrededor de la madre y obtendrás algo como esto:

Cuando el color de fondo es uniforme o casi uniforme, como el caso de arriba la herramienta

Varita Mágica es una excelente opción.




40/68

Un importante parámetro de esta herramienta es la Tolerancia. A tolerancia 0 se selecciona

solo una tonalidad de color. Si la tolerancia es más alta, se seleccionarán más colores. Otro

parámetro importante es Suavizar. Si esta opción está seleccionada aplicamos un

“suavizado” que previene los bordes irregulares.

La selección puede moverse con el ratón 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 capítulo dedicado a la creación del diseño de la página

web.




41/68

3.2.6. Herramienta pincel y herramienta lápiz

Pincel y lápiz son herramientas para deibujar a mano. El parámetro más importante es el

grosor de la linea o el cepill.

3.2.7. Herramienta tampon de clonar




42/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

parámetro más importante es el tamaño.

3.2.8. Herramienta degradado y bote de pintura

Estas herramientas se usan para rellenar con un color una selección.

Degradado es una transición gradual de un color a otro. También podemos usar otros colores.

Hagamos una selección 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 diálogo:




43/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 añadir un color adicional. Entonces arrastra el ratón de lado a lado de la

imagen, en la dirección 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:




44/68

3.2.9. Desenfocar

Se usa para desenfocar una porción de la imagen, por ejemplo la cara que no queremos que

sea reconocida.

El parámetro más importante es el tamaño de la herramienta usada para difuminar.

Busquemos en internet la foto de alguien famoso, haz click con el botón derecho del ratón y

después Copiar. De vuelta en Photoshop, Fichero – Nuevo o Ctrl + N, establecemos los

parámetros y presionamos OK. Después, Edición, Pegar o Ctrl + V.

Con la herramienta Desenfocar seleccionada, difumina el área que desees. Obtendrás un

resultado parecido a éste:




45/68

3.2.10. Herramienta texto

Con esta herramienta podemos añadir y formatear texto con imágenes.

Entremos en el sitio web Coca Cola, buscando “Coca Cola” en Google. Una vez que entres en el

sitio, presiona Imprimir Pantalla, asegurándote de que el ratón esta fuera del área útil del sitio.

Por medio de esta operación hacemos una captura de la pantalla complete, una clase de copia.

Volvamos a Adobe Photoshop y presiona Ctrl + N para crear un documento, después presiona

Ctrl + V (pegar). Obtendremos la siguiente imagen.




46/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 selección, escoge

tu color favorito del Panel de Colores y pulsa Edición – Rellenar. Repite esta operación en la

parte de abajo de la imagen. De esta forma creamos un espacio para un título 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 línea (para títulos, por ejemplo);

- Texto en varias lineas, para párrafos.

Te presentamos abajo la barra de texto para formato. Es muy similar a la conocida y usada de

Microsoft Word.

Podemos escoger la dirección, tipo de letra, tamaño, estilo (normal, negrita, cursiva), como

alinearla, color, texto curvado o opciones de párrafo.

Dado que en la parte de arriba de la imagen tenemos más espacio que en la parte de abajo,

introduciremos el texto en el primer párrafo, y el de la parte de abajo para el título.

En los bordes usamos el texto vertical.




47/68

Haz click abajo y escribe “Coca-Cola” en el formato deseado.

Arriba, arrastra con el ratón desde cualquier lugar desde arriba hasta abajo, con la

herramienta Texto seleccionada. Al final suelta el botón. Establecemos los parámetros

deseados y escribimos. El formato del texto puede establecerse después. El tamaño de la caja

puede ser cambiado arrastrando con el ratón desde los puntos de control que están en el

centro de los lados. Se puede mover usando la herramienta Mover. Escribamos el siguiente

texto: “Este es un pantallazo de la página web de Coca Cola para formación”. Obtendremos un

resultado como el de la imagen de abajo:




48/68

3.2.11. Herramienta cuentagotas

Esta herramienta se usa para clonar el color de una parte de una imagen para después usarla

en otra sección.

3.2.12. Herramienta mano

Esta herramienta se usa para visualizar partes de la imagen que no entran en la ventana.




49/68

3.2.13. Herramienta zoom

La lupa se usa para reducir o agrandar la escala de la imagen. La opción 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, Lápiz 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.




50/68

3.3. Lista de atajos de teclado para Adobe Photoshop CS6

Los siguientes atajos pueden hacer tu trabajo más fácil hacienda las mismas operaciones pero

más rápido. Para una lista completa de atajos, visita la página 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 Selección

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 Lápiz, Herramienta sustitución color

Shift + S Herramienta Tampón de clonar

Shift + Y Herramienta Pincel de Historia, Herramienta Pincel Histórico

Shift + E Herramienta Borrado, Herramienta Borrador Fondo

Shift + G Herramienta Desenfocar

Shift + O Herramienta Esponja

Shift + P Herramienta Lápiz

Shift + T Texto Horizontal, Texto Vertical,

Shift + A Elegir ruta

Shift + U Herramienta Rectangulo, Herramienta Elipse, Herramienta Polígono

Shift + N Herramienta 3D

Shift + K Herramienta 3D Rotación

R Herramienta rotar vista

H Herramienta mano

Z Herramienta zoom

1 http://help.adobe.com/en_US/photoshop/cs/using/WSD578BD7D-07BC-46f6-AAC2-

6E491E8AD818a.html#WS24E993BC-E1F3-4ac6-8225-7685C3B17669a

http://help.adobe.com/en_US/photoshop/cs/using/WSD578BD7D-07BC-46f6-AAC2-6E491E8AD818a.html#WS24E993BC-E1F3-4ac6-8225-7685C3B17669a

http://help.adobe.com/en_US/photoshop/cs/using/WSD578BD7D-07BC-46f6-AAC2-6E491E8AD818a.html#WS24E993BC-E1F3-4ac6-8225-7685C3B17669a




51/68

Atajos para vista imagen

Ctrl + Tab Moverse por documentos abiertos

Shift-Ctrl-W Cerrar un fichero

Q Cambiar modos

Shift + F Cambiar adelante/atrás 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 Galería de Filtros

Alt-click a filter Aplica un Nuevo filtro

Alt-click a disclosure triangle Abrir/cerrar todos los triangulos

Ctrl Cambiar el botón 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 atrás

Atajos para Curvas

Ctrl + M Abre el cuadro de diálogo Curvas en Adobe Photoshop

Ctrl + Tab Selecciona el próximo punto de la curva

Shift + Ctrl + Tab Selecciona el punto previo de la curva

Ctrl-click on the points Selecciona múltiple 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




52/68

Alt-drag black/white point sliders Muestra puntos de luz y sombras que serán 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 tamaño 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 Saturación

Shift + Alt + C Color

Shift + Alt + Y Luminosidad

Sponge tool + Shft + Alt + D Des-saturar

Sponge tool + Shft + Alt + S Saturar




53/68

3.4. Algunas cosas acerca de CorelDRAW

Como dijimos en el inicio del modulo, CorelDRAW es una aplicación de diseño gráfico que te

permitirá crear diseños profesionales (simples o complejos).

Una ventana CorelDRAW es como aparece abajo:

Puedes ver que muchos de los componentes están prestados de Windows. Para ser más

concreto una ventana de CorelDRAW incluye lo siguiente:

- Una barra de títulos que muestra el nombre y la versión de la aplicación, 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:




54/68

- Caja de herramientas:

Herramienta Selección – 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 selección

Herramienta Zoom Tool (Z) – Aplica zoom en el área de trabajo

Herramienta Mano Alzada (F5) – Dibuja curvas y alinea segmentos

Herramienta Relleno inteligente – Rellena rápidamente el área

Herramienta Rectangulo (F6) – Permite dibujar rectángulos y esquinas

Herramienta Elipse (F7) – Permite dibujar elipses, circulos y arcos

Herramienta Poligono (Y) – Permite dibujar plígonos y estrellas

Herramienta Formas Básicas – Diseña formas básicas

Herramienta Texto (F8) – Permite escribir (párrafos o textos artísticos)

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 línea.

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 dinámica

- La paleta CMYK, te permite cambiar fácilmente los colores de fondo o contornos




55/68

En el próximo capítulo aprenderemos cómo crear un diseño en CorelDRAW.

3.5. Lista de atajos de teclado para CorelDRAW X6

Los siguientes trabajos pueden hacer tu trabajo más fácil, haciendo lo mismo que con las

operaciones y menús, pero mucho más rápido. Para ver una lista completa de dichos atajos

por favor visita la página web de Corel (www.corel.com)2

COMANDO ATAJO CONSEJOS

Medios artísticos I Dibuja curvas y aplica medios artícticos

Atrás Ctrl+PgDn Situa a los objetos seleccionados una posición atrás

Cursiva Ctrl+B Cambia el estilo a cursiva

Romper atrás Ctrl+K Rompe el objeto seleccionado

Comillas Ctrl+M Añade/elimina comillas

Centrar Ctrl+E Cambia la alineación del texto al centro

Centrar a página P Alinea al centro de la página los objetos seleccionados

Color Shift+F12 Abre el cuadro de diálogo 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 edición

Convertir párrafos a texto Ctrl+F8 Convierte textos artísticos a párrafos o viceversa

2

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=

http://www.corel.com/

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=

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=




56/68

Convertir diseños a objetos Ctrl+Shift+Q Convierte un diseño en un objeto

Copiar Ctrl+C Copia la selección y la sitúa en el Portapapeles

Cortar Ctrl+X Corta la selección y la sitúa en Portapeles

Borrar Delete Borra el objeto seleccionado

Duplicar Ctrl+D Duplica el objeto seleccionado hasta el número

especificado

Editat texto Ctrl+Shift+T Abre el cuadro de dialogo Edición

Ellipse F7 Dibuja elipses y círculos; doble click abre la Caja de

Herramientas

Borrador X Borra parte de un gráfico o divide un objeto

Salida Alt+F4 Sale de CorelDRAW y guarda el diseño activo

Exportar... Ctrl+E Exporta texto o objetos a otro formato

Rellenar G 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 alineación del texto a alineamiento

completot

Pantalla-completa

Previsualización

F9 Muestra una pantalla previa entera del dibujo

Papel gráfico D Dibuja un grupo de rectángulos; con doble clik abre la

caja de herramientas del cuadro de diálogo 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 G Relleno interactivo

Izquierda Ctrl+L Changes the alignment of text to left alignment

Relleno de Malla M Relleno de malla




57/68

Próxima página PgDn Va a la siguiente página

Nuevo Ctrl+N Crea un nuevo fichero

Abrir... Ctrl+O Abre un fichero existente

Opciones... Ctrl+J Abre el cuadro de diálogo de opciones

predeterminadas

Pegar Ctrl+V Pegar

Atributos de delineado F12 Atributos de delineado

Poligono Y Dibuja polígonos simétricos ; al hacer doble clik abre la

caja de herramientas

Página previa PgUp Va a la página anterior

Imprimir... Ctrl+P Imprime el dibujo actual

Propiedades Alt+Return Muestra objetos o propiedades de la herramientas

dependiendo de la selección actual de herramientas

Rectangulo F6 Dibuja rectángulos

Rehacer Ctrl+Shift+Z Rehace los últimos cambios

Refrescar pantalla Ctrl+W Actualiza el dibujo

Repetir Ctrl+R Repite la última operación

Derecha Ctrl+R Chambia la alineación de texto a derecha

Guardar... Ctrl+S Guarda el dibuho activo

Seleccionar todosl Ctrl+A Selecciona todos los objetos de la página activa

Formas F10 Edita los nodos de un objeto

Comprobar ortografía Ctrl+F12 Abre el comprobador de ortografia

Espiral A Dibuja espirales; doble click abre la caja de

herramientas del cuadro de dialogo Opciones

Texto F8 Añade texto; click en la página para añadir texto

artístico y arrastra para añadir párrafos

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




58/68

Editor visual básico... Alt+F11 Inicia el Editor Visual Básico

¿Qué es esto? Shift+F1 ¿Qué es esto? Ayuda

Zoom Z Zoom

Zoom- Alejar F3 Zoom Alejar

Zoom Todos F4 Zoom sobre todos objetos en el área de trabajo

Zoom Página Shift+F4 Zoom sobre toda la página

Zoom Selección Shift+F2 Zoom sobre los objetos seleccionados




59/68

4. DISEÑO WEB

4.1. Diseño web con Adobe Photoshop

Adobe Photoshop es el software principal para crear diseño web profesional, al margen de

poder ser utilzado para abrir plataformas tales como WordPress, Joomla, OSCommerce etc.

Generalmente una página web incluye seis elementos básicos: Cabecera, Sub-cabecera,

Izquierda, Derecha, Paginas y Pie de página.

Analizémoslas de forma separada para ver que contienen en realidad.

Cabecera

Sub-Cabecera (Menu Horizontal)

Izquierda

(Menu vertical)

Paginas

Derecha

(Noticias

Contacto

Mapa

etc.)

Pie de página (Contador de tráfico, Copyright, etc.)

Cabecera

Contiene el nombre y el logo de la compañía que posee el sitio web, fotos, etc.

Sub Cabecera

Contiene el menu horizontal etc.




60/68

Izquierda

Contiene el menu vertical etc.

Paginas

Contiene contenidos específicos en cada página, los otros elementos permanecen fijos.

Derecha

Puede contener: Noticias, Contacto, Mapa etc.

Pie de página

Puede contener: Contador de trafico; Copyright; etc.

Apliquemos este esquema a un caso. Supongamos que debemos crear a sitio web para una

compañía que organiza fiestas para niños. Aplicando lo que hemos aprendido en diseño

gráfico, el sitio podría ser algo como esto:




61/68

Vamos a usar ahora la herramienta Sector para dividir en rectángulos, de acuerdo al boceto

presentado anteriormente en este capítulo.

Obtendremos un resultado parecido a la imagen de abajo:




62/68

Ve a Archivo – Guardar Web. La siguiente ventana se abrirá:

Llama al fichero e index.html y guárdalo.

Cuando escribes la dirección de una página 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.




63/68

Automáticamente se creará la carpeta “Imágenes”. 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:




64/68

4.2. Diseño web con CorelDRAW

Crearemos el mismo diseño, que el que creamos con Photoshop, pero ahora usando

CorelDRAW. Con CorelDRAW es más fácil crear diseños, pero las imágenes que vamos a usar

deberán ser procesadas con Photoshop. Estas imágenes son las siguientes:

Abre CorelDRAW y crea un Nuevo documento usando Archivo - Nuevo o usando la combinación

teclas Ctrl + N. Desde el menú Diseño escoge Preparar página. Haz los cambios deseados de la

imagen de arriba y haz click en OK.




65/68

Primero crearemos el fondo. Para hacer esto selecciona Rectángulo de la caja de herramienta

en la parte izquierda y rodéala 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 más fino podemos usar Herramienta Relleno Interactivo.

Seleccionamos la primera herramienta de la izquierda, Mover, y hacemos click en el rectángulo

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:




66/68

Ahora crearemos el espacio útil para el diseño. Para esto selecciona de nuevo la herramienta

Rectangulo. Introduce en las propiedades, los valores de 1000 píxeles para altura y la anchura.

Ten cuidado en cerrar la llave para evitar que la altura y la anchura no se cambien

automáticamente. Si la llave esta cerrada, haz click para abrirla.

Con el rectángulo presionado, presiona “P” para ponerlo en el centro de la página. Dibuja

líneas verticales en los lados y después bórralas.

Creemos ahora un rectángulo con 1000/400 pixeles para la cabecera. Dibuja una línea en el

fondo de la diapositiva y luego borra el rectángulo.

A través del menú Archivo formato del comando Importar o con Ctrl + I combinación de teclas,

trae al cuadro de cabecera las imágenes: casa, castillo, botones y niños. Muévelos usando la




67/68

herramienta Seleccionar y si es necesario, acerca o aleja, para arrastrar con el ratón

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 sitúalo 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 imágenes. Con la herramienta Rectángulo 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 ningún color de fondo

en el rectángulo. Haz click fuera de la caja para des-seleccionar. Con la herramienta

Rectángulo crea una caja dentro del primer rectángulo para el título para el título, con un

fondo naranja para el título y sin bordes. Con la herramienta Texto, en blanco, escribe en el

medio “CONTACT”. Con la herramienta Texto, crea una caja vacía 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 imágenes para la cabecera. Para mover




68/68

todas las cajas, rodéalas con el ratón usando la herramienta Selección y después Ordenar –

Grupo o Ctrl + G. Para des-agrupar usa: Ordenar – Desagrupar o Ctrl + U. Finalmente, el

diseño 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 transfórmalo en HTML usando la herramienta Sector, como hemos aprendido en el

sub-capitulo previo.

Hablaremos más acerca de la creación de páginas web en otros cursos desarrollados en el

proyecto e-LIFE.

Modulo 4:Diseño Grafico Photoshop y CorelDRAW

Documents

Transcript of Modulo 4:Diseño Grafico Photoshop y CorelDRAW