Creando páginas webs

[Zedmix]

Hoy os voy a hablar de las páginas web creadas desde Photoshop, realmente, desde Photoshop solamente creamos el diseño y los fondos, pero para finalizar nuestro diseño web nos es necesario algún que otro programita más. Entre ellos necesitaremos el Adobe ImageReady, nosotros los usaremos en su versión CS2 y por otro lado también nos hará falta el Dreamweaver de Macromedia, lo usaremos en su versión 8. Con estos tres programas y un poco de inmaginación vereis el tipo de páginas web que podemos llegar a hacer, en principio haremos una web estática, es decir, hay que cambiar el contenido de forma manual. Ya cuando vayamos avanzando haremos un tutorial sobre páginas webs dinámicas.

Photoshop

Comenzamos con Photoshop, creamos un nuevo documento, nosotros le vamos a dar un formato de (1024×800) esto ya depende de nuestro contenido y demás, nosotros en principio le daremos este. Una vez que ya tenemos delante de nosotros nuestro escenario comenzaremos a trabajar. Para ello nos hará falta las reglas si no las tienes colocadas puedes colocarlas en Vista—> Reglas (Ctrl+R). Una vez ya colocada las Reglas comenzaremos a marcar nuestra página, para ello marcaremos las siguientes secciones: Banner, dos menús laterales, una columna de contenido en el centro y un pie de página. Para marcar con las reglas debemos que pulsar nuestro ratón con el botón izquierdo dentro de la regla, mantenerlo pulsado y arrastrarlo hasta nuestro escenario de la siguiente forma.



Pues así tenemos hacerlo con ambas reglas, tanto con la regla superior como la de la izquierda, y vamos formando espacios donde irán nuestro contenido, una vez que ya tenemos delimitado esos espacios nos tocaría rellenarlos con el material adecuado que deseamos introducir. Además con la ayuda de las guiás hemos delimitado los márgenes tanto los laterales como el inferior y superior, para que no se salgan las cosas de esos límites y se respeta un mínimo de organización y márgenes.



Bien empecemos por el principio, el Banner, muy sencillo lo abrimos con Photoshop, marcamos copiamos y pegamos en nuestra web y lo colocamos en su correspondiente hueco. Yo voy a aprovechar y voy a hacer una web que tengo pendiente del Colectivo CEPA. Una vez colocado el Banner continuaremos con el menú de la izquierda al cual lo vamos a llamar Menú Principal. Para ello vamos a crear antes un Grupo dentro de las capas para poder tenerlas bien ordenadas. A la cual le vamos a llamar "menu left", ahora creamos una capa. Que la colocaremos dentro de está carpeta que hemos creado. Decir también que cada vez que hagáis un botón como es inicio, contactos, etc... hay que crearlo en capas independientes el uno al otro para poder trabajar más cómodo. Yo me voy a permitir sacar un par de guiás más para poder guiarme a la altura a la que voy a colocar las letras para que estén a la misma altura tanto en la columna de la izquierda como en la de la derecha. Ya tenemos colocados los primeros botones de la columna de la izquierda quedando algo así.



 
Bien empecemos por el principio, el Banner, muy sencillo lo abrimos con Photoshop, marcamos copiamos y pegamos en nuestra web y lo colocamos en su correspondiente hueco. Yo voy a aprovechar y voy a hacer una web que tengo pendiente del Colectivo CEPA. Una vez colocado el Banner continuaremos con el menú de la izquierda al cual lo vamos a llamar Menú Principal. Para ello vamos a crear antes un Grupo dentro de las capas para poder tenerlas bien ordenadas. A la cual le vamos a llamar "menu left", ahora creamos una capa. Que la colocaremos dentro de está carpeta que hemos creado. Decir también que cada vez que hagáis un botón como es inicio, contactos, etc... hay que crearlo en capas independientes el uno al otro para poder trabajar más cómodo. Yo me voy a permitir sacar un par de guiás más para poder guiarme a la altura a la que voy a colocar las letras para que estén a la misma altura tanto en la columna de la izquierda como en la de la derecha. Ya tenemos colocados los primeros botones de la columna de la izquierda quedando algo así.



  Solamente he puesto unos ejemplos para que lo veáis bien podéis poner cuando os deje la resolución que hayáis puesto al comienzo. Ahora a su vez crearemos el menú de la derecha el cual pretendo que las letras que coloque a continuación estén a la misma altura en el de la izquierda, para ello ya antes puse su correspondientes guiás. Aquí incluiré una imagen a la cual después le haremos un enlace al final.

    Ya tenemos las dos columnas rellenas, yo solamente he puesto un pequeño ejemplo para que lo veáis.



Ahora vamos a lo principal, al centro vamos a buscar un fondo con sentido, usando los dos manuales anteriores yo me he creado este centro. Solamente he creado la imagen la he copiado y la he pegado en el centro dentro de una nueva capa.



Ahora vamos a crear el footer, para ello vamos a crear una capa nueva y con la herramienta marco rectangular (M) seleccionamos la zona del footer. Una vez que lo tenemos marcado, por ejemplo le vamos a hacer un degradado desde un tono gris hacia un blanco para resaltar un poco más esa zona de la web. Todo esto ya dependerá de nuestros gustos hacia los colores, de todas formas os dejo como me ha quedado.




Ya hemos hecho todo lo que se hace con Photoshop dentro de este manual que es diseñar nuestra web ahora tenemos que llenarla de textos, imágenes, enlaces y contenidos para ello vamos a continuar con el siguiente programa ImageReady, recomiendo que hagáis una copia antes de empezar a trabajar con Imageready. Para pasar nuestra web de Photoshop a Imageready tenemos que hace click en el siguiente botón. (Mayus+Ctrl+M)



ImageReady

Aquí lo que vamos a hacer es recortar toda nuestra web en pequeñas imágenes, será útil para cuando nos vayamos a Dreamweaver y para que a la hora de cargar nuestro sitio web no se haga muy pesado, ya que en vez de ser una gran imagen que pese mucho, serán pequeñas imágenes de poco peso cada una.



Comencemos a recortar nuestras imágenes. Para ello usaremos la Herramienta Sector (K) he iremos recortando imagen por imagen y botón por botón, tenemos que recordar que tanto el centro como el footer lo tenemos que seleccionar entero. Comencemos de arriba a abajo. Ya tenemos recortada nuestro banner.



Continuemos con el menú, los botones y la columna de la derecha y después haremos el centro y el footer. Una vez que ya tenemos el Banner y las dos columnas de menús recortadas tendríamos que tener algo parecido a esto.



Ahora vamos a recortar el centro y el footer, para ello seleccionamos todas las imágenes que tengamos como centro, en mi caso la hoja y las tres cintas de celo, después veréis el motivo de esto. Y por último el footer, y nos quedaría algo así ya con todo seleccionado.



Una vez que ya tenemos todo recortado tenemos que pasarlo a html, para que después el Dreamweaver sea capaz de interpretarlo. Así que nos vamos a Archivos—> Guardar Optimizada... (Ctrl + Alt + S) le ponemos como titulo index.html ya que el index es la web principal y le damos a aceptar. Si abrimos el index.html con algún explorador nos dará el resultado, en nuestro caso ha sido este.



Ahora vamos a trabajar con Dreamweaver, para comenzar a introducir texto y demás. Para ello ya podemos cerrar tanto Photoshop, como Imagineready. Y abrimos Dreamweaver.

Dreamweaver

Ya estamos dentro de Dreamweaver, desde aquí abrimos nuestro archivo index.html



Lo primero que vamos a hacer es centrar la web, para ello vamos a acceder al código de nuestro archivo index.html, por lo que accedemos al apartado "Código"



Una vez dentro vamos a buscar la etiqueta <body>



Justo delante de esta etiqueta vamos a escribir <center>, después vamos a buscar la etiqueta </body> la cual cierra la sentencia del cuerpo de la web y vamos a poner al final de esta etiqueta </center>





De esta manera si volvemos al apartado Diseño ya veremos nuestra web, perfectamente centrada. Una vez que ya está todo centrado vamos a comenzar a la introducción de texto y contenido, para ello nosotros vamos a jugar con tablas. Para comenzar vamos a eliminar la imagen del centro.



E introducimos una tabla en ese hueco que nos ha quedado vacío. Con los valores de 1 celda, 1 columna y 0 en grosor del borde.



Una vez que ya tenemos nuestra tabla en el centro lo que vamos a hacer es poner como fondo la imagen que antes recortamos y acabamos de quitar de aquí. Nos vamos hacia abajo en "Propiedades" y ahí abrimos la carpeta que tenemos marcada.



Una vez ya introducida la imagen empezamos a estirar la tabla hasta completar ese hueco que tenemos hay en blanco, si cuando empezamos a estirar la imagen para ocupar todo el espacio que en el que antes estaba la imagen nos ocurre algo como esto:



No os preocupéis con tan solo hacer click en una de las imágenes que no esté dentro de la tabla que hemos creado, todo se pondrá en su sitio sin ningún tipo de problema y continuamos estirando hasta ocupar todo el espacio. Nos quedaría algo así.



    Ahora hacemos exactamente lo mismo con el footer, quitamos la imagen, metemos una tabla y añadimos la imagen del footer como fondo de esa tabla que hemos creado.

    Y ya solamente introducir las imágenes y textos correspondientes quedándonos un resultado como este.



Aquí acaba este tutorial, espero que no haya sido muy pesado y que sobre todo te haya servido para algo. De todas formas si tenéis algún tipo de duda, podéis comentarla en los comentarios de aquí abajo o en el correo blog@ramondevesa.es

Y recuerda para más información visita blog.ramondevesa.es

[Azielito]

muy bueno, te agradeceria bastante que las imagenes las subas a

http://i.elhacker.net

[Zedmix]

Ok no sabia la existencia de eso.

Gracias y saludos.

[Spider-Net]

El manual es bastante parecido a uno que leí en internet. Está bastante bien pero no tienes en cuenta una cosa. Qué pasa si en la tabla que has puesto como fondo el post-it verde de contenido principal pego un text más grande que la imagen?. La tabla se va a estirar hacia abajo y la imagen de fondo de la tabla  va a duplicarse quedando bastante feo. Lo suyo es sectorizar esa imagen en 3 diferentes, la parte superior, la de en medio y la inferior y harías una tabla de 3 filas y una columna consiguiendo que el contenido fuese en la fila del medio por lo tanto por mucho que estirases la tabla nunca se repetirían los bordes de la imagen.

Pero bueno excepto por eso es muy buen tutorial sobre todo para aprender un poco de maquetación web.

Un saludo!

[peib0l]

este metodo esta bien para los qeu empiezan, pero esta bien hombre, el problema viene que no puedes realizar una web profesional con este metodo

[Zedmix]

En mi mente lo que tengo es el diseño de mi blog, y claro lo unico que esos manuales "tutoriales" que hago en el blog, me gusta compartirlo con toda la comunidad, la idea mia es la de ir complicando las cosas un poco más cada vez.

Saludos

[madpitbull_99]

nunca he diseñado una web entera en Photoshop ... hago logos , menus y demsa pero entera nunca ....

De hecho no se ni como guardar el .psd como html , por lo que he entendido del tuto se puede hacer con Photoshop ... podria guardar todos los elementos uno a uno y luego maquetarlos con css o con tablas en html pero me interesaria saber como se pasa el .psd a html .

Gracias de antemano.

PD : Tengo Photoshop CS3 y CS4

[jdc]

Hace un tiempo busqué lo mismo de guardar un psd como html pero nunca lo encontré

[madpitbull_99]

Hace un tiempo busqué lo mismo de guardar un psd como html pero nunca lo encontré

http://sdgestudio.wordpress.com/2008/01/12/breve-tutorial-como-pasar-de-psd-a-css-en-minutos/

Ahi esta .... ahora se como se hace


Saluddos!