Aqui se enseña como crear una plantilla web basica desde 0 con photoshop.
1.-lo primero que vamos a hacer es crear un documento nuevo con dimenciones de 800*600 pixeles con fondo blanco o transparente.
**si no tienes la opcion de reglas ve a ver/Reglas o preciona ctrl+R
Creacion de Banner
2.-marcamos la guias dende ira cada una de las secciones como se puestra en la
imagen
Seleccionamos la opcion de lazo poligonal y marcamos la seleccion del banner
3.-creamos una capa nueva rellenamos la seleccion de cualquier color y le
ponemos las propiedades de la capa como se muestra en la imagen
presionamos OK
despues nos vamos a seleccionar/modificar/contraer y lo contraemos 5 pixelesy precionamos en ok
ahora presionamos suprimir en nuestro teclado
sin perder la selecciona creamos una capa nueva la colocamos en medio de capa 1 y capa 2
en esta capa crearemos una fondo para el baner son libres de hacer el fondo que ustedes deseen
no creare un fondo muy vistoso recuerden solo les enseño ustedes deciden los efectos que le pondran
ahora quitemos la guia para eso vamos a ver/clear guides o limpiar guias
4.-creamos unas nuevas guias para marcar las posisiones de el cuadro de menu el de contenido
y el de afiliacciones
en una capa nueva crearemos con la herramienta de seleccion la cabesera del recuadro
y la rellenamos de este color "c9c9c9" sin los parentesis ahora vamos a editar/transformar/distorcion
precionando shif arrastramos el cuadrado de la esquina inferioir derecha y izquierda uno
a la ves asta tener algo como esto
hacemos lo mismo con los demas recuadros pero sin crear capa nueva hasta tener ago asi
nos vamos a capa/estilo de capa y colocamos los siguiente
nos vamos a seleccion despues modificar y contraer lo contraemos 2 pixeles y precionamos suprimir en nuestro teclado nos quedara algo asi
sin perder la seleccion creamos una capa nueva y lo rellenamos con el mismo estilo del fondo del baner o con el efecto del
borde del baner como en mi caso
ahora terminemos con lo cuadros...
para esto crearemos una capa nueva
presten atencion a la imagen ya que en esta se mira donde deven de estar las selecciones
como son varias guias aveces te confundes
puedes seleccionar de uno por uno o los 2 a la vez solo recuerda que los 2 deven de estar en una misma capa
ahora rellenamos de cualquier color y colocamos las siguientes propiedades de la capa
presionamos ctrl+D y marcamos el cuadro del centro... creamos una nueva capa y colocamos
las mismas propiedades
Bueno ya solo falta colocarle los ultimos retoques (Botones, imagenes y detalles)
recomiendo no colocar texto ya que eso retardaria la carga de la paguina es recomendable
colocarlo en el codigo html
vallamos a ver/limpiar guias o clear guides
para crear los botones creamos las siguientes guias
***nota solo crearemos 3 botones
la manera mas rapida de crear los botones es la siguiente...
creamos una nueva capa y seleccionamos los 3 botones como se muestra en la imagen
utilizamos es el gradien y rellenamos la seleccion
creamos una nueva capa y utilisando el lapiz en color blanco y con un ancho de 1 px
lo pasamos por encima de las lineas de adentro
creamos una mascara y con el gradian la pasamos de derecha a izquierda vamos a ver/limpiar guias
y nos quedara algo así
ahora colocamos el texto deseado
guardamos el documento con el nombre de (index) sin parentesis
ahora vamos a capa/flatten imagen no recuardo tradiccion les dejo la imagen
nos debio de haber quedado una sola capa llamada fondo
Eso es todo
Espero que les seal util.
1.-lo primero que vamos a hacer es crear un documento nuevo con dimenciones de 800*600 pixeles con fondo blanco o transparente.
**si no tienes la opcion de reglas ve a ver/Reglas o preciona ctrl+R
Creacion de Banner
2.-marcamos la guias dende ira cada una de las secciones como se puestra en la
imagen
Seleccionamos la opcion de lazo poligonal y marcamos la seleccion del banner
3.-creamos una capa nueva rellenamos la seleccion de cualquier color y le
ponemos las propiedades de la capa como se muestra en la imagen
presionamos OK
despues nos vamos a seleccionar/modificar/contraer y lo contraemos 5 pixelesy precionamos en ok
ahora presionamos suprimir en nuestro teclado
sin perder la selecciona creamos una capa nueva la colocamos en medio de capa 1 y capa 2
en esta capa crearemos una fondo para el baner son libres de hacer el fondo que ustedes deseen
no creare un fondo muy vistoso recuerden solo les enseño ustedes deciden los efectos que le pondran
ahora quitemos la guia para eso vamos a ver/clear guides o limpiar guias
4.-creamos unas nuevas guias para marcar las posisiones de el cuadro de menu el de contenido
y el de afiliacciones
en una capa nueva crearemos con la herramienta de seleccion la cabesera del recuadro
y la rellenamos de este color "c9c9c9" sin los parentesis ahora vamos a editar/transformar/distorcion
precionando shif arrastramos el cuadrado de la esquina inferioir derecha y izquierda uno
a la ves asta tener algo como esto
hacemos lo mismo con los demas recuadros pero sin crear capa nueva hasta tener ago asi
nos vamos a capa/estilo de capa y colocamos los siguiente
nos vamos a seleccion despues modificar y contraer lo contraemos 2 pixeles y precionamos suprimir en nuestro teclado nos quedara algo asi
sin perder la seleccion creamos una capa nueva y lo rellenamos con el mismo estilo del fondo del baner o con el efecto del
borde del baner como en mi caso
ahora terminemos con lo cuadros...
para esto crearemos una capa nueva
presten atencion a la imagen ya que en esta se mira donde deven de estar las selecciones
como son varias guias aveces te confundes
puedes seleccionar de uno por uno o los 2 a la vez solo recuerda que los 2 deven de estar en una misma capa
ahora rellenamos de cualquier color y colocamos las siguientes propiedades de la capa
presionamos ctrl+D y marcamos el cuadro del centro... creamos una nueva capa y colocamos
las mismas propiedades
Bueno ya solo falta colocarle los ultimos retoques (Botones, imagenes y detalles)
recomiendo no colocar texto ya que eso retardaria la carga de la paguina es recomendable
colocarlo en el codigo html
vallamos a ver/limpiar guias o clear guides
para crear los botones creamos las siguientes guias
***nota solo crearemos 3 botones
la manera mas rapida de crear los botones es la siguiente...
creamos una nueva capa y seleccionamos los 3 botones como se muestra en la imagen
utilizamos es el gradien y rellenamos la seleccion
creamos una nueva capa y utilisando el lapiz en color blanco y con un ancho de 1 px
lo pasamos por encima de las lineas de adentro
creamos una mascara y con el gradian la pasamos de derecha a izquierda vamos a ver/limpiar guias
y nos quedara algo así
ahora colocamos el texto deseado
guardamos el documento con el nombre de (index) sin parentesis
ahora vamos a capa/flatten imagen no recuardo tradiccion les dejo la imagen
nos debio de haber quedado una sola capa llamada fondo
Eso es todo
Espero que les seal util.