HOLA A TODOS VOY A EXPLICARLES COMO CREAR UN DISEÑO WEB DESDE 0 CON 3 PARTES ! USAREMOS EL PHOTOSHOP PARA HACER EL DISEÑO.
PARTE 1
Hola pues hace 3 dias me puse en la construccion de este Tutorial para que aprendan como hacer una pagina web desde 0
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
despues 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
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 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
PARTE 2
en imagen ready precionamos (k)y empesemos a hacer los cortes
cortamos el primer boton y le colocamso es nombre de boton_1
cortamos el segundo boton y le colocamso el nombre de boton_2
cortamos el tersero ycolocamos el nombre de boton_3
al terminar los corteste quedara algo asi
Lo guardamos como (Guarda optimizada como)
y le ponemos el nombre de index.html y lo guardamos
Y eso es todo no enrare en detalle con imagen ready solo lo esencial
La parte 1 y 2 son para mi las mas faciles
PARTE 3 Y LA MAS COMPLICADA!
HuuuuFFFF porfin la ultima parte y las mas laboriosa.
Bueno iniciemos
Recomiendo utilizar macromedia dreamweaver
lo primero que ahi que hacer es colocar el color de fondo similar o igual al color del fondo de nuestra web para eso
la siguiente linea
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
cambiamos el numero que viene dentro de las comillas del codigo bgcolor y colocamos el deseado
si no tienes dreamweaver y no te saves el numero del color que deseas puedes colocar el nombre del color en ingles
ejemplo
bgcolor="white" o bgcolor="#ffffff" que es lo mismo
para darse una idea pueden buscar en la web tablas con lo colores y sus respectivos numeros
ahora ay que identificar la linea
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
al ultimo de esta linea agregaremso (align="center" sin los parentesis tendremos algo asi
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0" align="center">
ahora colocamos los links en los botones que creamos vamos a ver como
"boton 1"
busquemos la siguiente linea
<td colspan="2"><img src="images/boton_1.jpg" width="135" height="27" alt=""></td>
este link sera el que nos enlasa al principio de la pagina
el codigo a utilisar sera el siguiente
<td colspan="2"><a href="index.html"><img src="images/boton_1.jpg" width="135" height="27" border="0"></a></td>
"boton 2"
busquemos la siguiente linea
<td colspan="2"><img src="images/boton_2.jpg" width="135" height="25" alt=""></td>
este link nos manda a la pagina de la galeria de imagenes
este sera el codigo
<td colspan="2"><a href="galeria.html"><img src="images/boton_2.jpg" width="135" height="27" border="0"></a></td>
"boton 3"
busquemos la soguiente linea
<td><img src="images/boton_3.jpg" width="134" height="24" alt=""></td>
este link nos manda a la pagina de los tutoriales
<td><a href="tutoriales.html"><img src="images/boton_3.jpg" width="134" height="24" border="0"></a></td>
aa todas las de mas imagenes solo cambialas por fondo para que al momento de que cresca la tabla no se distocione, un ejemplo
<td colspan="5" rowspan="2"><img src="images/website-desede-0_24.jpg" width="144" height="286" alt=""></td>
si lo dejas como esta y escribes por encima de la imagen la imagen tiende a separarse y eso desfigura la tabla
para impedir eso solo es cuastion de colocarlo de esta manera
<td colspan="5" rowspan="2" width="144" height="286" background="images/website-desede-0_24.jpg"></td>
yo recomiendo que todas la imagenes esten de esta manera asi evitaras problemas con las tablas
y es es todo
Doy por terminado el Tutorial Website desde 0
Y COMO NO A TODOS LES INVITO A QUE VEAN MIS POST SORE TUTORIALES CON PHOTOSHOP TODOS CON MUCHAS IMAGENES QUE LO HICE CON ESFUERZO! RECOMIENDEN LOS QUE LES GUSTEN GRACIAS !
http://www.taringa.net/posts/arte/13683883/Como-crear-un-ojo-con-photoshop-_-con-imagenes.html
http://www.taringa.net/posts/arte/13683959/Dibujar-una-pluma-con-Photoshop_-Con-imagenes.html
http://www.taringa.net/posts/arte/13684152/bosque-dark-en-Photoshop_-Con-Imagenes_.html
http://www.taringa.net/posts/arte/13687358/Texto-vacio-por-dentro-Photoshop_-Con-Imagenes_.html
http://www.taringa.net/posts/arte/12310052/Como-congelar-una-fruta-con-photoshop-_DD-muy-bueno_.html
http://www.taringa.net/posts/arte/13687411/Crear-una-rueda-dentada-con-Photoshop_-Con-Imagenes_.html
http://www.taringa.net/posts/arte/13687529/Textura-de-un-ojo-con-photoshop_-con-imagenes_-No-es-facil_.html
http://www.taringa.net/posts/arte/13694401/Crear-una-jaula-esfera-en-3d-con-photoshop_-con-imagenes_.html
http://www.taringa.net/posts/arte/13694489/Como-crear-un-marco-quemado-con-photoshop_-con-imagenes_.html
http://www.taringa.net/posts/arte/13694643/Imagenes-divididas-en-marco-con-photoshop_-con-imagenes_.html
http://www.taringa.net/posts/arte/13695882/Texto-con-velocidad-_-con-photoshop_-con-imagenes_.html
PARTE 1
Hola pues hace 3 dias me puse en la construccion de este Tutorial para que aprendan como hacer una pagina web desde 0
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
despues 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
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 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
PARTE 2
en imagen ready precionamos (k)y empesemos a hacer los cortes
cortamos el primer boton y le colocamso es nombre de boton_1
cortamos el segundo boton y le colocamso el nombre de boton_2
cortamos el tersero ycolocamos el nombre de boton_3
al terminar los corteste quedara algo asi
Lo guardamos como (Guarda optimizada como)
y le ponemos el nombre de index.html y lo guardamos
Y eso es todo no enrare en detalle con imagen ready solo lo esencial
La parte 1 y 2 son para mi las mas faciles
PARTE 3 Y LA MAS COMPLICADA!
HuuuuFFFF porfin la ultima parte y las mas laboriosa.
Bueno iniciemos
Recomiendo utilizar macromedia dreamweaver
lo primero que ahi que hacer es colocar el color de fondo similar o igual al color del fondo de nuestra web para eso
la siguiente linea
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
cambiamos el numero que viene dentro de las comillas del codigo bgcolor y colocamos el deseado
si no tienes dreamweaver y no te saves el numero del color que deseas puedes colocar el nombre del color en ingles
ejemplo
bgcolor="white" o bgcolor="#ffffff" que es lo mismo
para darse una idea pueden buscar en la web tablas con lo colores y sus respectivos numeros
ahora ay que identificar la linea
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
al ultimo de esta linea agregaremso (align="center" sin los parentesis tendremos algo asi
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0" align="center">
ahora colocamos los links en los botones que creamos vamos a ver como
"boton 1"
busquemos la siguiente linea
<td colspan="2"><img src="images/boton_1.jpg" width="135" height="27" alt=""></td>
este link sera el que nos enlasa al principio de la pagina
el codigo a utilisar sera el siguiente
<td colspan="2"><a href="index.html"><img src="images/boton_1.jpg" width="135" height="27" border="0"></a></td>
"boton 2"
busquemos la siguiente linea
<td colspan="2"><img src="images/boton_2.jpg" width="135" height="25" alt=""></td>
este link nos manda a la pagina de la galeria de imagenes
este sera el codigo
<td colspan="2"><a href="galeria.html"><img src="images/boton_2.jpg" width="135" height="27" border="0"></a></td>
"boton 3"
busquemos la soguiente linea
<td><img src="images/boton_3.jpg" width="134" height="24" alt=""></td>
este link nos manda a la pagina de los tutoriales
<td><a href="tutoriales.html"><img src="images/boton_3.jpg" width="134" height="24" border="0"></a></td>
aa todas las de mas imagenes solo cambialas por fondo para que al momento de que cresca la tabla no se distocione, un ejemplo
<td colspan="5" rowspan="2"><img src="images/website-desede-0_24.jpg" width="144" height="286" alt=""></td>
si lo dejas como esta y escribes por encima de la imagen la imagen tiende a separarse y eso desfigura la tabla
para impedir eso solo es cuastion de colocarlo de esta manera
<td colspan="5" rowspan="2" width="144" height="286" background="images/website-desede-0_24.jpg"></td>
yo recomiendo que todas la imagenes esten de esta manera asi evitaras problemas con las tablas
y es es todo
Doy por terminado el Tutorial Website desde 0
Y COMO NO A TODOS LES INVITO A QUE VEAN MIS POST SORE TUTORIALES CON PHOTOSHOP TODOS CON MUCHAS IMAGENES QUE LO HICE CON ESFUERZO! RECOMIENDEN LOS QUE LES GUSTEN GRACIAS !
http://www.taringa.net/posts/arte/13683883/Como-crear-un-ojo-con-photoshop-_-con-imagenes.html
http://www.taringa.net/posts/arte/13683959/Dibujar-una-pluma-con-Photoshop_-Con-imagenes.html
http://www.taringa.net/posts/arte/13684152/bosque-dark-en-Photoshop_-Con-Imagenes_.html
http://www.taringa.net/posts/arte/13687358/Texto-vacio-por-dentro-Photoshop_-Con-Imagenes_.html
http://www.taringa.net/posts/arte/12310052/Como-congelar-una-fruta-con-photoshop-_DD-muy-bueno_.html
http://www.taringa.net/posts/arte/13687411/Crear-una-rueda-dentada-con-Photoshop_-Con-Imagenes_.html
http://www.taringa.net/posts/arte/13687529/Textura-de-un-ojo-con-photoshop_-con-imagenes_-No-es-facil_.html
http://www.taringa.net/posts/arte/13694401/Crear-una-jaula-esfera-en-3d-con-photoshop_-con-imagenes_.html
http://www.taringa.net/posts/arte/13694489/Como-crear-un-marco-quemado-con-photoshop_-con-imagenes_.html
http://www.taringa.net/posts/arte/13694643/Imagenes-divididas-en-marco-con-photoshop_-con-imagenes_.html
http://www.taringa.net/posts/arte/13695882/Texto-con-velocidad-_-con-photoshop_-con-imagenes_.html