Creat Layout T! (Resubido)

Como hacer un layout para T!

Hola a todos queria aprovechar para mostrarles como hacer un layout para taringa.
Basta de barras separadoras pedorras, etc. Demosle a nuestro post el aspecto que se merece

Requisitos:

Photoshop*: Medio/Avanzado
Conocimientos*: Diseño Web, Posicionamiento, Gráfico.
Duracion*: Depende el diseño

Ok son mis primeros posts asi que si no me expreso muy bien sepan disculparme, voy a tratar de ser lo mas claro posible.

Pero primero orientacion:





Que es un Layout Web?:


Diseño, maqueta. Es la estructura de la distribución de los contenidos de un sitio web-





Que es Photoshop:

Adobe Photoshop (Taller de Fotos) es una aplicación informática en forma de taller de pintura y fotografía que trabaja sobre un "lienzo" y que está destinado para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits (o gráficos rasterizados).

http://es.wikipedia.org/wiki/Photoshop

Que es un requisito:


Circunstancia o condición necesaria para algo, necesidad o expectativa establecida, generalmente implícita u obligatoria.

http://es.wiktionary.org/wiki/requisito




Que es un conocimiento:

El conocimiento es, por una parte, el estado de quien conoce o sabe algo, y por otro lado, los contenidos sabidos o conocidos que forman parte del patrimonio cultural del Homo sapiens. Saber que se consigue mediante la experiencia personal, la observación o el estudio.

http://es.wikipedia.org/wiki/Conocimiento



Que es duracion:

La duración corresponde al tiempo que duran las vibraciones que producen un sonido. La duración del sonido está relacionada con el ritmo. La duración viene representada en la onda por los segundos que ésta contenga.

http://es.wikipedia.org/wiki/Duración_(música)

Ok ya sabemos todo ahora vamos a probar hacer un Layout para nuestros post de T!.


Primero abrimos Photoshop


Ahora abrimos el menu de archivo


Cliqueamos en uevo y nos va aparecer este dialogo




Elegimos este tamaño: 710 Pixeles de ancho y el alto sera la eleccion propia, en este caso vamos a usar 1000 Pixels*



Que es un Pixel:




Un píxel o pixel (acrónimo del inglés picture element, "elemento de imagen" es la menor unidad homogénea en color que forma parte de una imagen digital, ya sea esta una fotografía, un fotograma de vídeo o un gráfico.

es.wikipedia.org/wiki/Píxel


--------------------------------------------------------------------------------------------------------------------------------------------------------

Listo, si hicimos bien lo anterior nos quedaria algo parecido a esto:




Ok... Vamos a necesitar usar estas herramientas de photoshop para poder lograr un Layout:



HERRAMIENTA DE SELECCION |
HERRAMIENTA MOVER |
HERRAMIENTA CORTAR |
HERRAMIENTA SECTOR |
HERRAMIENTA PINCEL |
HERRAMIENTA BORRADOR |
HERRAMIENTA TEXTO |
HERRAMIENTAS CUENTAGOTAS |
CONFIGURAR COLOR FRONTAL |
CONFIGURAR COLOR DE FONDO |


--------------------------------------------------------------------------------------------------------------------------------------------------------


Bien ahora nos proponemos a hacer un Layout
vamos a elegir un tema basico...
Peliculas*:



Que es una Pelicula:



Una película es una obra de arte cinematográfica que narra una historia de manera visual por medio de fotografías en movimiento basada en un guión escrito por lo general por un guionista y en la que los personajes son interpretados por actores.

es.wikipedia.org/wiki/Película


--------------------------------------------------------------------------------------------------------------------------------------------------------


Bien... Un post de peliculas de terror:

Bajamos la CARATULA* de un titulo que elegimos

Que es una caratula:

Máscara o careta; Portada de un libro o de un disco; Parte frontal de un reloj

es.wiktionary.org/wiki/car%C3%A1tula


--------------------------------------------------------------------------------------------------------------------------------------------------------


Yo elegi el siguiente titulo:
The hills Have Eyes 2






AhoraDIistribuimos* nuestras imagenes para ir creando el layout

Que es distribuir o Distribucion:

Darle a cada cual una porción de algo en función de algún criterio; Otorgarle a cada parte de un todo una función determinada; Colocar cada cosa en un lugar siguiendo algún criterio; Hacer llegar un producto comercial a cada uno de los compradores o intermediarios, para su reventa o venta al detalle.

es.wiktionary.org/wiki/distribuir


--------------------------------------------------------------------------------------------------------------------------------------------------------


Como las distribuimos?

Haciendo lo siguiente, vamos a ARCHIVO/ABRIR y seleccionamos nuestra imagen.
Una vez abierta la imagen vamos a Seleccion/Todo
Luego Edicion/Copiar
Cerramos la ventana de nuestra imagen y nos dirigimos a la ventana de nuestro Layout.
Ahora vamos a Edicion/Pegar
Y la adaptamos con la Herramienta Mover; y le cerramos el candado en la parte superior media



Y HACEMOS LO MISMO CON LAS IMAGENES RESTANTES.
LUEGO QUEDARIA ALGO ASI:
(En este caso solo use una sola imagen)

Agregue las imagenes pero quedaron desparejas, quiero simetria:



Que es la Simetria:



La simetría es la exacta correspondencia de todas las partes de una figura respecto de un centro, un eje o un plano..



es.wikipedia.org/wiki/Simetría



Ahora tenemos que organizar

Si queremos poner una descripcion de la pelicula
Si queremos agregar un Link
Seguimo, comenta o lo que quieran
texto.. lo que sea
El diseño queda en sus manos
Eso es personal el mio termino asi:





Ok el layout va tomando forma!


Ahora ya tenemos el layout pero como darle individualidad a las imagenes que contienen links?


Que es la individualidad:


Etimológicamente proviene de indiviso, que no se puede dividir. Es por tanto el señalamiento de una unidad. Cómo haya o pueda entenderse dicha unidad y en qué consiste dicha unidad frente a diferentes unidades o pluralidades: * Una unidad elemental de un sistema mayor o más complejo


es.wikipedia.org/wiki/Individualidad



Que es un Link/Enlace?


Unión. Se llama así a las partes de una página WEB que nos llevan a otra parte de la misma o nos enlaza con otro servidor.


www.angelfire.com/biz/HUMBERTOLOTNAVARRO/glosario.h…

Ahora que tenemos el diseño terminado vamos a dividir en Sectores la imagen en photoshop
de esta manera:
Ahora separamos en sectores que vamos a utilizar, Quedaria algo asi:


Ok una vez terminado esto tenemos que elegir los sectores que vayan a ser enlaces y hacer lo siguiente:
Boton derecho sobre elSector/Modificar opciones del sector
Si lo hicimos bien tendria que aparecernos esta ventana de dialogo:

Ahora en donde dice URL: Pondremos la URL que vamos a usar.

Que es una URL:


Un localizador uniforme de recursos, más comúnmente denominado URL (sigla en inglés de uniform resource locator), es una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que se usa para nombrar recursos en Internet para su localización o identificación, como por ejemplo



es.wikipedia.org/wiki/URL

Una vez agregado nos saldra esta ventana de dialogo


Ahora nos queda guardarlo nomas ya estamos a un paso!

Vamos a guardar como/dispositivos; Web


Luego vamos a buscar a donde lo guardamos y aparecera un archivo HTML y una carpeta llamada Imagenes;
lo unico que tenemos que hacer es subir las imagenes a un servidor

en este caso yo uso Photobucket!