DISEÑO GRÁFICO Y MULTIMEDIA
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP DISEÑADOR GRÁFICO
OBJETIVO
Planifica y prepara prototipos y maquetas web destinadas a la creación de contenido web mediante ejemplos de sitios web ya existentes.
Planeando el Proyecto. Guías y Reglas. Usando un sistema de rejilla. Desarrollando una estructura con formas de capa. Ajustando al píxel. Empezando por el prototipo de nuestr maqueta web. Organizando la estructura de página. Añadiendo elementos maestros. Trabajando con fotografías. Trabajando con texto. Creando contenido de relleno. Creando botones. Resolución ejercicios: Prototipos y maquetas.
1 PLANEANDO EL PROYECTO
En primera instancia debemos bocetar nuestro proyecto a lápiz y papel, el cual nos servirá como base de lo que va hacer el posterior sitio final, debemos tomar en consideración que es lo que vamos a construir, como lo vamos a hacer, cual es el público al que está destinado este sitio. El boceto planteado en la imagen contiene una zona de cabecera, a continuación una zona llamada slider para pase de diapositivas, debajo de este encontramos una zona de videos,luego un párrafo de texto, a la derecha una imagen decorativa y el proyecto de diseño se cierra con un pie de página. Una vez pensada la idea de cómo va hacer el diseño tenemos que empezar desde un documento nuevo, modificando una anchura, altura, resolución y color y tendremos la base de nuestro diseño web, es a partir de ahí donde determinaremos las posiciones y tamaños exactos de los elementos que va a componer nuestro documento usando guías, sistemas de retículas o rejillas y sistemas vectoriales
2 GUÍAS REGLAS Acerca de las reglas. Las reglas le ayudan a colocar imágenes o elementos de forma precisa.Cuando están visibles, las reglas aparecen a lo largo de la parte superior y a la izquierda de la ventana activa. Cambiar el origen de la regla (en las reglas superior e izquierda) le permite medir desde un punto específico de la imagen. El origen de la regla también determina el punto de origen de la cuadrícula. Para mostrar u ocultar reglas, seleccione Vista > Reglas o Control+R Acerca de Guías. Las guías y la cuadrícula le ayudan a colocar imágenes o elementos de forma precisa. Las guías aparecen como líneas en la imagen, pero no se imprimen. Puede mover y eliminar las guías. También puede bloquearlas para no moverlas por
error. Puede utilizar guías inteligentes para facilitar la alineación de formas, sectores y selecciones. Aparecen automáticamente al dibujar una forma o crear una selección o sector. Si prefiere, puede ocultar las guías inteligentes.
3 USANDO UN SISTEMA DE REJILLA Podemos abrir una plantilla de 12 columnas que es un sistema que viene con guias predefinidas y unas columnas de un ancho de 60px con un espacio de 20 px. De está manera podemos empezar a
maquetar nuestro prototipo basandonos en dichas columnas.
Es importante destacar que debemos crear documentos con medidas que se adapten a los diferentes dispositivos como para monitores tablets y para móviles.
De esta manera podríamos empezar a crear con la herramienta rectángulo la zona de cabecera y definir una zona de diapositivas e ir realizando poco a poco nuestra maqueta de sitio web. Luego en face de desarrollo nuestro desarrollador emplea como base este
sistema de reticula para transladar el diseño a formato HTML CCS.
4 DESARROLLANDO UNA ESTRUCTURA CON FORMAS DE CAPA
Para el desarrollo de nuestra estructura nos vamos fijando en el boceto que hicimos al inicio y así nos ubicamos en un documento nuevo empezando a crear la zona de cabecera, continuando con el slider dirigiéndonos a la herramienta de rectángulo ubicando las medidas correspondientes, nos dirigimos de las guías para centrar los elementos en su lugar, seguimos con los recuadros de los videos; empleamos la misma herramienta y hacemos un cuadrado y realizamos 6 copias de este recuadro, creamos un párrafo de texto y un nuevo rectángulo para la imagen que le acompaña al texto en el boceto realizado y así mismo para el pie de página ajustando las determinados medidas. En pocos pasos conseguimos un prototipo concreto que nos servirá para seguir evolucionando nuestro sitio web. A continuación observaremos como quedo el resultado final de nuestro maquetado en Photoshop.
5
6 AJUSTANDO AL PIXEL Este nos ayuda a corregir los errores como la alineación o disposición entre los elementos para tener un mejor prototipado. Para iniciar alinear los elementos se debe trabajar con reglas, ya que estas nos ayudarán a tener una medición exacta en cada disposición del elemento.
La alineación y el tamaño de cada elemento deben restringirse a las líneas trazadas, ya que de esto dependerá para lograr una buena armonía entre los elementos
El uso de las líneas guías son fundamentales a la hora de realizar nuestro prototipo, sirven para tener una buena alineación entre los elmentos con más precisión.
que se compone nuestra interfaz.
7 EMPEZANDO POR EL PROTOTIPO DE NUESTRA MAQUETA WEB Iniciamos nuestro proyecto web partiendo de un prototipo muy sencillo que nos servira para definir los aspectos más importantes. De esta manera vamos a tener una guía para determinar los márgenes o la posición de elementos importantes como el logotipo, gráficos, como va hacer el fondo entre otros. Utilizando el prototipo como la maqueta básica para completar el diseño de la
página web a realizar, se determina los márgenes, los espacios entre los elementos de manera general que nos servirá como guía para crear el diseño final.
8 ORGANIZANDO LA ESTRUCTURA DELCONTENIDO Una vez que se tenga el prototipo que nos servirá como base, el primer paso que se debe hacer es organizar de forma eficiente las capas que se va ir creando, el contenido que se va ir incorporando a nuestro diseño web.
Asignaremos nombres a cada grupo por ejemplo: cabecera en donde abarca el logotipo, otro grupo llamado contenido_inicio siendo la página inicial, otro de contenido_acerca _de en donde contenga datos del cliente, el siguiente contenido_tienda, etc ., estos grupos nos ayudará a tener un orden de la información o el contenido que tenga la página dependiendo de lo que pida el cliente.
Este proceso no es obligatorio, pero nos servirá en fases posteriores a localizar de una manera más facil el contenido.
AÑADIENDO ELEMENTOS MAESTROS
9
-
Al crear y construir nuestra visualización, llega para otras personas en forma de visualizaun punto en el que nos damos cuenta de que ción, dimención y medida, lista para su uso. hay elementos que merece la pena guardar, Uno de los objetivos de crear y mantener para volver a utilizarlos más adelante. elementos es que otros usuarios exploren sus Podemos guardar las visualizaciones, dimen- propios métodos y direcciones en los datos, ciones y medidas como elementos maestros además de lo que ya se ha proporcionado en en el panel de activos. Cuando la app se públi- la app como hojas y vizualicaiones predefinica estos elementos maestros estarán disponi- das. Los usuarios podrán crear sus propias visualizaciones. bles
Los elementos maestros son muy útiles ya que es posible utilizar una dimensión principal en tantas visualizaciones como se desee y mantenerla en un solo lugar. Todas las actualizaciones que se realicen en el elemento maestro se aplicarán en todos los casos de dicho elemento.
10 TRABAJANDO CON FOTOGRAFÍAS -
Al incorporar fotografías es interesante el poder incorporar este tipo de imágenes como son las del prodcuto ya que los clientes buscan fotos que se adapten a sus necesidades.
Portafolio o galería Es una muestra de nuestro trabajo, por lo que debe reflejar nuestros puntos fuertes. Es normal e incluso interesante mostrar trabajos sobre diferentes especialidades.
Impacto Al cargar la página principal de toda la web el visitante decidirá si tiene interés por “explorarla” o pasa a otra página. Disponemos de muy poco tiempo para generar la atracción necesaria, así que la página pricipal debe ser atractiva, y no recargada.
11 TRABAJANDO CON TEXTO En la solapa de la derecha de Carácter Character se encuentra Párrafo| Paragraph, y si clickeamos sobre la misma se abrirá esta paleta. En la misma podemos encontrar distintas opciones de alineación del texto y párrafos.
La herramienta texto funciona en capas, es decir que cuando nos disponemos a escribir un texto nuevo, se creará automáticamente una nueva capa. Los caracteres que escribimos usando la misma están compuestos por píxeles en la resolución de la imagen que trabajamos.
La barra de herramientas que se encuentra en la parte superior debajo del menú principal nos ofrece otras opciones, las cuales son las que más comúnmente usaremos al momento de trabajar con texto.
Comenzando a escribir Hay tres formas de crear texto una vez seleccionada la herramienta: una es haciendo click en el mouse directamente en el lugar de la imagen y otro dibujando una caja de texto manteniendo presionando el botón del mouse.
Editando el texto Si escribimos algún texto y después queremos editarlo, podemos hacerlo seleccionando las palabras con el mouse, manteniendo apretado el botón, y luego yendo a alguna de las opciones, por ejemplo cambiar el tamaño de los caracteres o el color.
12 Otra manera de modificar en forma interactiva el texto es al presionar Ctrl+T en Windows o Cmd+T en Mac. Allí veremos que aparecen unos controladores en cada esquina y en los puntos medios, con los cuales podremos cambiar, por ejemplo, el tamaño de lo escrito. Manteniendo Shift presionado mientras arrastramos con el mouse, vere mos que las proporciones se mantienen, y si hacemos lo mismo pero con la tecla Alt en Windows u Option en Mac, la transformación conservará su centro, hacia afuera y no desde el controlador que presionemos. También podemos combinar las dos teclas para hacer una transformación proporcional y manteniendo el centro. Si presionamos el botón derecho del mouse en Windows veremos que aparecen más opciones para transformar. En Windows y Mac tendremos estas mismas opciones si vamos a Edit->Transform|Editar->Transformar
Hay que definir una serie de palabras clave para conseguir el mejor posicionamiento ante los buscadores, respecto a los temas que puedan ser usados parabuscar una página web y debemos ir repitiendo estas palabras a lo largo del contenido de la web (en la página principal, en la pág. de servicios, etc.).
Estas opciones nos permitirán escalar el texto, rotarlo en forma arbitraria (o exacta, si introducimos los datos en la barra superior de herramientas), deformarlo con la función Warp, rotarlo a 180º o 90º y espejarlo horizontal o verticalmente
13 CREANDO CONTENIDO DE RELLENO EN PHOTOSHOP Sabemos que Photshop nos permite incrustar un video pero no sería una práctica eficaz, ya que nosotros en nuestra maquetación no necesitamos un contenido de este tipo además nuestro archivo PSD se haría muy pesado.
En este caso le vamos a dar una estética mucho mejor que represente a un video como en el ejemplo que se muestra.
Para ello necesitamos una imagen que incrustamos como objeto inte-
ligente en nuestra maquetación dándole doble click en el conteni-
Le crearemos una capa nueva para rellenarla de color negro y para crear una especie de contenidos bajándole la opacidad a nuestra capa y añadimos un pequeño botón
de play en el centro con los tipos de formas que nos dan.
14 Una vez seleccionadas las formas a utilizar se las puede modificar a gusto de cada uno, la centramos y guardamos los cambios de contenido despúes tenemos que colocar nuestra imagen editada en nuestra maquetación y así realizamos un contenido de relleno para
cualquier maquetación
CREANDO BOTONES Los botones son los elementos más importantes en nuestra página web al momento de interactuar con los usuarios, los cuales se los suele usar para comprar y enviar, al momento de realizarlo podemos ser muy creativos utilizando todo tipo de colores
siempre y cuando estén acorde a nuestra maquetación tomando en cuenta las dimenciones al colocarlos.
15 También se le dará un estilo de capa aplicando un efecto de sombra según nuestro criterio.
texto se le puede dar un estilo de capa, una sombra y obtendremos nuestro botón creado.
Cuando ya tenemos colocado un
Aquel botón será nuestra base para continuar maquetando, si deseamos hacer una copia para ir creando los siguientes botones ubicamos
los comandos control C control V y cambiamos de nombre a los respectivos botones.
16 RESOLUCIÓN EJERCICIOS PROTOTIPOS Y MAQUETAS
En la presente imagen observamos un prototipo de una página comercial la cual hemos empezado con un respectivo boceto, continuamente utilizamos guías inteligentes, texto falso o Lorem Ipsum y rectángulo. Lo importante de maquetar en Photoshop es que podemos diseñar modelos de prototipos a nuestro gusto,
y de ahora en adelante podemos estructurar de una manera eficiente varios prototipos para así poder maquetar a futuro en el programa Dreamweaver.
17 BIBLIOGRAFÍA Mediaactive. (2014). Aprender Dreamweaver CC con 100 ejercicios prácticos. Barcelona, España: Editorial MARCOMBO, S.A. JAVAJAN & COHEGI OFICIAL DISSENY GRAFIC. Guía para diseñadores gráficos. cataluña, España. Recuperado [04 de abril de 2017: 9:30 am] de: http://xn-guiadiseo-s6a.com/02_vocabulario.php Olalde, Daniel. (2013). Dreamweaver CS6; Libro de formación oficial de Adobe System. Editorial ANALAYA MULTIMEDIA. Recuperado de: https://es.scribd.com/document/211261196/cursodreamweavercs6-130110223812phpapp01 Justin Seeley & Armando Sotoca. (2013). Diseño web con Photoshop: Teoría y práctica del trabajo con Photoshop para crear tus diseños web [DVD]. Recuperado de: https://www.video2brain.com/mx/cursos/dreamweaver-cc-1-creacion-sencillade-sitios-web/contenido-del-curso
DISEÑADOR GRÁFICO