Revista-Diseño-Web

stalinmanu

INTEGRANTES:

Cesar Briceño

Erick Carrillo

Eduador Castillo

Stalyn Gonzáles

WEB Y MULTIMEDIA I

CREANDO PROTOTIPO

Y

MAQUETA WEB

EN PHOTOSHOP

OBJETIVO:

Planificar y preparar prototipos y maquetas web

destinadas a la creación de contenido web mediante

ejemplos de sitios web ya existentes.


1.Planeando el proyecto

Antes de iniciar a diseñar un sitio web ya sea con herramientas en línea o con programas

diseñados para este fin, como Photoshop, puedes planear la estructura de tu sitio en un documento

que muestre cómo estará organizado el contenido. Divídela en segmentos o categorías

para que tus visitantes entiendan la navegación de tu sitio y la forma en que está ordenado

el contenido.

Durante la etapa de análisis del proyecto es donde tendrás una idea más clara de tus objetivos,

de quién es tu público meta, los requisitos del sitio y solicitudes en específico.

El primer paso es enfocarse en la estructura del sitio siguiendo

los siguientes pasos:

1. Iniciando la Estructuración

El documento que generes puede incluir

diagramas complejos que muestren la relación

entre estos segmentos o una jerarquía

de los elementos principales y secundariosrios.

2. Una navegación clara para

que el sitio fluya mejor

El inicio de este proceso normalmente involucra

una discusión con quien o quienes

sean los que esten a cargo del desarrollo del

contenido.

3. Recursos y herramientas

Se puede empezar a hacer un bosquejo de

tu estructura como guía del contenido del

proyecto.

Una buena referencia o punto de inicio es

revisar sitios similares de la competencia.

4. Para organizar el flujo

Lo más importante que tienes que considerar

al estar construyendo la estructura de un

sitio, es que tiene que haber una organización

lógica del contenido


5. Mapeo del sitio

La estructura del sitio es básicamente lo

mismo que el mapa, un resumen de la jerarquía

de las páginas en tu sitio

6. Navega a través del menú

de navegación

Un menú de navegación es una serie de

elementos que guiarán a tus visitantes a

través de tu sitio.

El menú de navegación principal para un

sitio casi siempre se basa en el mapa de

dicho sitio.

Se basa en lo que quieres que resalte

más y el sentido común. Si tu sitio tiene

muchas páginas de contenido y no todas

caben en el menú de navegación, entonces

deja algunas de lado.

2.Guías y Reglas

Guías

Para trabajar en web es fundamental el uso

de guías para alinear nuestro contenido.

Las guías son líneas verticales u horizontales

que podemos situar sobre la imagen

para tener una ayuda visual al alinear objetos.

Hay que destacar que no saldrán al

imprimir un documento o al guardar la

imagen salvo que indiquemos lo contrario,

por lo que podemos usarlas sin miedo.


Las columnas y las guías son

tus amigas

No hay necesidad de partir desde cero con

cada diseño. Una buena forma de agilizar el

proceso es partir de una base sólida que

nos facilite la generación de un layout para

la interfaz.

Se puede descargar las plantillas que

puedes utilizar para PSD que contienen las

columnas base para iniciar un diseño. No

solamente te serviran para columnas en un

tamaño de computadora de escritorio, sino

que también incluye opciones para tablets y

smartphones.

3.Desarrollando

una estructura con

formas de capas

Una vez que tengamos nuestras guias en la

mesa de trabajo, vamos a proceder a ir

estructurando en Photoshop, el boceto que

tenemos del diseño de la pagina web que

vamos a crear.

3.Usando un sistema

de rejilla

Este sistema está pensado para ayudarnos

en la disposición de los contenidos de nuestra

web y para su adaptación a los diferentes

tamaños de pantalla de forma automática.

Es decir, que con solo programar una vez

ya no nos debemos preocupar si se ve o no

en el navegador.

Para ello vamos a utilizar los diferentes tipos

de herramientas que pone Photoshop a

nuestra disposición, como la herramienta

rectangulo para luego tambien poder encuadrar.

Podemos iniciar con la cabezera de la

pagina web, luego el contenido, imagenes

hasta llegar al pie de pagina.


AJUSTANDO A PIXEL

Para la fase de maquetado talvez no hayamos puesto atención a la alineación correcta que nuestro

prototipo vaya a tener es por eso que Photoshop dispone de ajustes para cada elemento para que

así todo este correctamente alineado.

1-Para centrar un elemento y que

este quede alineado correctamente se

selecciona la capa del objeto luego presionando

la combinación de teclas ctrl + A para

seleccionar todo el contenido de la página.

Luego en el submenú de la parte superior

de Photoshop nos aparecerán diferentes

opciones para así alinear nuestro objeto, le

damos click para decir que “Alinee centros

horizontales”, el programa automáticamente

ya nos da alineado el objeto de acuerdo a

nuestro espacio de trabajo.

2-También se lo puede hacer manualmente se puede ajustar los elementos de acuerdo a las

líneas guía que anteriormente ya hemos creado.


3-Para definir espacios entre los

diferentes objetos se puede realizar

mediante la creación de guías para que

dichos objetos tengan un espacio de

separación.

Y así colocaríamos nuestros objetos correctamente alineados y centrados para así colocar nuestro

contenido real en nuestro prototipo de página Web.


EMPEZANDO POR EL PROTOTIPO

DE NUESTRA PAGINA WEB

Para empezar nuestro proyecto web siempre

se parte de un prototipo muy básico ya

sea formado con unas simple formas como

cuadrados, rectángulos para así saber

dónde irían todos los elementos que contengan

nuestra página, es por eso que

desde el principio es muy importante ser

los más ordenado posible para definir

nuestros espacios y la disposición de

nuestros objetos para cuando ya se decida

pasar a la parte final no estar ordenando

cada elemento de forma correcta.

ORGANIZANDO LA ESTRUCTURA DE PAGINA

Siempre que podamos es lo mejor ser los

más precisos al momento de ubicar cada

objeto siempre aliándolo a nuestras líneas

guía que creemos. Es por eso que desde

el principio lo más recomendable es

siempre tener en cuenta que cada va a

tenar un tamaño al cual restringirse,

entonces cuando ya estemos listos para

colocar nuestros elementos ya solo nos

tocaría respetar los espacios que ya

hayamos dispuestos en un principio.


AÑADIENDO ELEMENTOS MAESTROS

Para añadir elementos maestros se debe ordenar

la zona de maquetación

1. Se debe organizar una hoja de trabajo

2. Crear figuras con solidos, donde se va a

incorporar la imagen

3. Distribuir de forma adecuada sin aglomerar

de imágenes

Se puede colocar de forma precisa por medio de

guias inteligentes, para activarlas debes ir a :

1.Ventana-activar guías inteligentes

2.selección de solidos. Puedes ir a herramientas

y leccionar un solido de tú preferencia


TRABAJANDO CON FOTOGRAFÍA

Cuando se usa photoshop como

herramienta de diseño web, no se

limita a utilizar solo objetos y

formas, sino también trabajar con

fotogafía y veremos como integrarlas

a nuestros diseños.

1.Se la puede agregar usando la

extención “minibrige”que está

dentro del programa y permite

naver dentro de nuestro equipo y

solo arrastrar la imagen

2. Se la puede escalar pre sionando

Shift + click y se agrega como

“objeto inteligente”

3. Se puede hacer doble click en la

capa donde se encuentra la imagen

y editar la imagen como: brillo,

trazos, color etc

4. Otra forma de agragar la imagen

es:Click en archivo- colocar-seleciona

imagen-colocar .

5. Si aparece en un documento difernete

al de trabajo , se hace click

en la imagen y se la arrastra hasta

el lugar de trabajo y ediar con Shift

el ancho y alto.


TRABAJANDO CON TEXTO

Para optimizar nuestro flujo de

trabajo en texto recomiendo

Usar máximo 2 tipografías.

1. Para comenzar se selecciona la

herramienta texto “T” que está

dentro de la barra de herramientas.

2. Luego de agregado el texto, se

puede editar en la barra superior:

tipografía, color, tamaño etc.

3. Para crear texto en párrafo,

selecciona herramienta texto y

con el ratón se arrastra toda la

zona donde va a agregar el texto”

aparece un recuadro donde se

puede escribir sin salir de la zona

establecida.

Para la optimización y reutilizar un

mismo tipo de letra, tamaño y

color.

Estilos de carácter

1. Ir a: ventana-estilo de carácter-selecciona

texto creado- dar color-crear

nuevo estilo de carácter- hacer doble

click y dar un nombre al estilo de

carácter nuevo.

Estilos de párrafo

2. Se selecciona el párrafo completo.

Estilo de párrafo-nuevo estilo-doble

click para editar valores-ecocger

nombre y cambios a realizar-interlineado,

medidas, carácter, color y justificación.


Creando Contenido De Relleno

Incorporar contenidos de videos a

photoshop podria hacer que nuestro

documento sea muy pesado y lento y

no sea agil al momento de pasar al

desarrollador. Por lo que podemos

dejar el espacio especificando que ahi

va un video o podemos ir un poco mas

alla colocando una imagen con el

icono de pley de la siguiente manera.

Nuestra maquetacion de la pagina

web nos quedaria de esta manera


Creando Botones

Son los elementos mas importantes a

la ora de interactuar ante nuestros

usuarios los botones generalmente se

suelen usar para acciones principales

como por ejemplo comprar y ampliar

informacion. Los botones deben tener

un buen contraste de color y un especial

cuidado en cuanto se trata en

dimension o tamaño y todos los botones

deben tener el mismo tamaño y

color lo que cambiaria seria su tipográfia.


CONCLUSIONES

-El organizar nuestros elemento desde el principio nos ayudara

a ahorrar tiempo al momento de ya añadir nuestro contenido

real por lo tanto es mejor ir arreglado nuestros espacios

desde el principio para luego no arreglar un objeto por objeto.

-Los contenidos de relleno son muy imporgantes ala hora

de maquetar en photoshop por nos permite ubicar y diferemciar

q elemento va en tal lugar como videos images y texto.

Al igual q los botones seran basicos para la navegaciom en la

pagina.

More magazines by this user
Similar magazines