Ejercicio

131
Ejercicio Ps

Transcript of Ejercicio

Page 1: Ejercicio

Ejercicio Ps

Page 2: Ejercicio

Abres el archivo que descargaste de 960grid system el de 12 columnas

Page 3: Ejercicio

Después eliminas la capa 12 col y deben quedar las lineas guía

Page 4: Ejercicio

Con ctrl+ , puedes manejar las guías

Page 5: Ejercicio

Después vas a tamaño de lienzo

Page 6: Ejercicio

Ir a tamaño de lienzo y modificar el ancho y el alto

Page 7: Ejercicio

Renombramos la capa “fondo”

Page 8: Ejercicio

Cambiamos el color del lienzo

Page 9: Ejercicio

el lienzo debe quedar del color elegido

Page 10: Ejercicio

Creas tres carpetas y las nombras en el siguiente orden: header main footer

Page 11: Ejercicio

Creas dentro de la carpeta header una nueva capa y la llamas fondo

Page 12: Ejercicio

con el color blanco y la herramienta rectángulo

Page 13: Ejercicio
Page 14: Ejercicio

si presionamos dos veces en la lupa veremos el tamaño real

Page 15: Ejercicio

ahora le agregas un degradado con click derecho+opciones de fusión +superposición de degradado

Page 16: Ejercicio

cambias el degradado

Page 17: Ejercicio
Page 18: Ejercicio

creamos un carpeta dentro de header que se llame logotipo

Page 19: Ejercicio

activas la herramienta texto

Page 20: Ejercicio

escribes o traes la imagen de tu logo tocando las reglas o lineas guía

nombre o imagen del logo

Page 21: Ejercicio

centrarlo verticalmente para eso seleccionas las dos capas con ctrl

nombre o imagen

Page 22: Ejercicio

con este botón centran el contenido

nombre o imagen del logo

Page 23: Ejercicio

y después shift+las flechas para centrar horizontalmente

nombre o imagen del logo

Page 24: Ejercicio

haces una nueva carpeta la dejas debajo de logotipo y la llamas menú

Page 25: Ejercicio

generas texto para crear los botones

Page 26: Ejercicio

seleccionas las dos capas y centras verticalmente

Page 27: Ejercicio

duplicas las capas para hacer los botones que necesites

Page 28: Ejercicio

con shift + las flechas mueves las capas duplicadas y las colocas en la misma posición

Page 29: Ejercicio
Page 30: Ejercicio
Page 31: Ejercicio

Tomas la herramienta de rectángulo redondeado

Page 32: Ejercicio

Creas una capa debajo de inicio y le cambias el color

nombre o imagen del logo

Page 33: Ejercicio

Realizar un rectángulo como lo muestra la imagen

Page 34: Ejercicio
Page 35: Ejercicio

Creas una carpeta dentro de main que se llame slideshow

Page 36: Ejercicio

Dentro creas una capa y trazas un rectángulo como lo muestra la imagen.

nombre o imagen del logo

Page 37: Ejercicio

seleccionas la capa t con ctrl se crea una zona de selección

Page 38: Ejercicio

Vas a selección + modificar + contraer 20px

nombre o imagen del logo

Page 39: Ejercicio

este es el resultado

Page 40: Ejercicio

Pintas esa capa de un nuevo color

nombre o imagen del logo

Page 41: Ejercicio

Traes una imagen la haces mas pequeña

Page 42: Ejercicio

Colocas la capa de la foto encima de la capa donde esta el rectángulo que coloreaste y

oprimes alt justo en la mitad de esas capas (aparece la flechita apuntando hacia abajo

con un cuadro blanco)

nombre o imagen del logo

Page 43: Ejercicio

después presionas ese símbolo y la foto se debe adaptar al recuadro

Page 44: Ejercicio

Seleccionas la herramienta elipse para generar los botones del slide

Page 45: Ejercicio

en la carpeta slideshow juntas las tres capas creadas

Page 46: Ejercicio
Page 47: Ejercicio

nombras ese grupo como imagen

Page 48: Ejercicio

creas una nueva carpeta debajo de imagen y llamas controles

Page 49: Ejercicio

En esa nueva carpetas haces el pequeño circulo

nombre o imagen del logo

Page 50: Ejercicio

Seleccionas la capa que acabas de crear con el fondo y alineas

nombre o imagen del logo

Page 51: Ejercicio

luego duplicas la capa en dos oportunidades

Page 52: Ejercicio

Generas una carpeta llamada banner después de slideshow

Page 53: Ejercicio

creas una nueva capa y trazas un rectángulo

Page 54: Ejercicio

Que quede 20 px debajo de los botones del slideshow

Page 55: Ejercicio

Cambias el color de la siguiente manera

Page 56: Ejercicio

Pueden agregar una sombra paralela

Page 57: Ejercicio
Page 58: Ejercicio
Page 59: Ejercicio

ahora colocan un texto

Page 60: Ejercicio

Modificas la fuente

Page 61: Ejercicio
Page 62: Ejercicio
Page 63: Ejercicio

pegas el texto

Page 64: Ejercicio
Page 65: Ejercicio

separas donde están los puntos y eliminas el texto último

Page 66: Ejercicio
Page 67: Ejercicio

modificas el auto 30px

Page 68: Ejercicio
Page 69: Ejercicio

Creas una carpeta llamada articulo

Page 70: Ejercicio

imagenes de 220 x 150 ejemplo

Page 71: Ejercicio
Page 72: Ejercicio
Page 73: Ejercicio
Page 74: Ejercicio
Page 75: Ejercicio

Seleccionas capas y las metes en la carpeta articulo

Page 76: Ejercicio

Nueva carpeta llamada sidebar

Page 77: Ejercicio
Page 78: Ejercicio

Una nueva caja de texto dejando 10 px a cada lado

Page 79: Ejercicio

Ajusta el texto

Page 80: Ejercicio

Cambias el color del texto

Page 81: Ejercicio

El texto lo metes en la carpeta de articulo

Page 82: Ejercicio

Duplicas articulo y la nombras como articulo 2

Page 83: Ejercicio
Page 84: Ejercicio

Para el sidebar cambiaremos el fondo

Page 85: Ejercicio
Page 86: Ejercicio

Cambias el color

Page 87: Ejercicio
Page 88: Ejercicio

Seleccionas con click

Page 89: Ejercicio
Page 90: Ejercicio
Page 91: Ejercicio

Selección invertir

Page 92: Ejercicio

Agregar una sombra

Page 93: Ejercicio

Agregas otra capa y haces un rectángulo

Page 94: Ejercicio

agregas un texto

Page 95: Ejercicio

Haces un grupo y le cambias a widget

Page 96: Ejercicio

Duplicas

Page 97: Ejercicio
Page 98: Ejercicio
Page 99: Ejercicio

haces una nueva capa dentro de la carpeta footer

Page 100: Ejercicio

Realizas un rectángulo

Page 101: Ejercicio

Seleccionas con control

Page 102: Ejercicio
Page 103: Ejercicio
Page 104: Ejercicio

luego selección + invertir

Page 105: Ejercicio

y presionas suprimir

Page 106: Ejercicio

el resultado esta en la imagen

Page 107: Ejercicio

Cambiar el fondo

Page 108: Ejercicio
Page 109: Ejercicio

para la parte de abajo del rectángulo

Page 110: Ejercicio

para la parte superior del rectángulo

Page 111: Ejercicio

Activas la opción invertir degradado

Page 112: Ejercicio

Agregan una sombra paralela

Page 113: Ejercicio
Page 114: Ejercicio
Page 115: Ejercicio

agregas un texto

Page 116: Ejercicio

Agregas lorem ipsum

Page 117: Ejercicio

recuerden auto para la separación entre lineas

Page 118: Ejercicio
Page 119: Ejercicio

Seleccionas estas dos capas

Page 120: Ejercicio

las agrupas y nombras este grupo

Page 121: Ejercicio
Page 122: Ejercicio

Extraes los iconos de redes sociales

estos iconos pueden descargar de iconspedia por ejemplo aunque los vas a encontrar en muchas pagina recuerda los tienes que guardar en recursos

Page 123: Ejercicio
Page 124: Ejercicio

observar que la licencia sea gratuita

Page 125: Ejercicio

los arrastras a Ps

Page 126: Ejercicio

Agrupas

Page 127: Ejercicio

y después para cada icono creas una carpeta

Page 128: Ejercicio
Page 129: Ejercicio

A cada icono le haces un texto

Page 130: Ejercicio

Haces el texto de la parte inferior debajo de todas las capas de

iconos

Page 131: Ejercicio

guardas