Hola pos hace 3 dias me puse en la construccion de este Tutorial para que aprendan como hacer una pagina web desde 0
***nota es importante que tengan conosimientos basicos de Photoshop, Imagen Ready y Macromedia DreamWeaver
empesemos
Diseño
1.-lo primero que vamos a hacer es crear un documento nuevo con dimencindes 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 Baner
2.-marcamos la guias dende ira cada una de las secciones como se puestra en la
imagen
Seleccionamos la opcion de lazo poligonal y marcmos la seleccion del baner
3.-creamos una capa nueva rellenamos la seleccion de cualquier color y le
ponemos las propiedades de la capa como se muestra en la imagenes
presionamos OK
despue nos vamos a seleccionar/modificar/contraer y lo contraemos 5 pixelesy precionamos en ok
ahora presionamos suprimir en nuestro teclado
sin perder la selecicona creamos una capa nueva la colocamos enmedio 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 desinden los efectos que le pondran
asi hise el mio jaja algo feo xDD...
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 aveses 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 cual quien color y colocamos las siguientes propiedades de la capa
precionamos ctrl+D y marcamos el cuadro del centro... creamos una nueva capa y colocamos
las mismas propiedades
vueno 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 botenes
la manera mas rapida de crear los bontones es la siguiente...
creamos una nueva capa y seleccionamos los 3 botones como se muestra en la imagen
utilisamos 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 haci
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 devio de aver quedado una sola capa llamada fondo
ahora precionamos ctrl+shif+M esto mandara nuestro documento a imagen ready
esta es la parte 1 o parte de diseño la parte 2 se trata de cortes en Imagen Ready
Saludos
Buscar
