[TUTORIAL] Diseño Web Profesional

**MzStudios** · 22/01/2009, 01:19

Hola amigos, hoy les traigo una tecnica muy usual para los diseños y paginas web...

Se han preguntado... "Como rayos hacen para que las webs se miren tan geniales" bueno, hoy les traigo la respuesta a esas preguntas.... no esperen aprender mucho HTML con mi tutorial, yo soy una persona muy practica, y evito trabajar de mas...

Lo que se necesita para un diseño genial, es un cambio de enfoque... cuando nos referimos al diseño web, nos referimos a DISEÑO + WEB eso significa que necesitamos ir en orden...

1ro: Esta el diseño
2do: Estan los elementos que hacen que este se adapte a la web

Y que mejor para un buen diseño, que un buen programa de diseño

Para seguir este tutorial, necesitaran Adobe Photoshop CS2 o superior, no voy a suministrarles un link para la descarga full, pero pueden usar la version de prueba de CS4 que esta disponible en la pagina oficial de adobe, es por 30 dias, y suficiente para llevar este tutorial

www.adobe.com

me imagino que todos han oido hablar de Photoshop, bueno... este es un programa con el cual pueden hacer imagenes.. me preguntaran entonces: Wtf? no era un tutorial para crear un sitio web con un gran diseño?

R: SI

Y vamos a usar photoshop para hacer nuestro diseño

Y para marquetar la web :) SI SEÑORES, NO ME VOLVI LOCO, esto es perfectamente posible.... de hecho, la mayoria de los diseñadores web lo usan

Bueno, vamos a comenzar configurando nuestro espacio de trabajo... definamos

1ro: La resolucion ideal de mi sitio

las resoluciones mas comunes son 800X600 y 1024X768 como la primera es poco comun, yo hare mi web para una resolucion de 1024X768

Entonces en Photoshop, una vez que lo hayamos abierto vamos a irnos a

File ---> New

Y vamos a configurar el documento en: 1000x980

Porque 980? para darle un espacio de scroll a la web, porque 1000 para darle margenes a la web

Bueno... Hay cosas que no explicare demaciado... yo prefiero ir usando varios layers diferentes para mis diseños, pero eso no es muy importante a la hora final..., bueno... lo que tenemos que hacer ene l nuevo documento es el diseño que queremos para nuestra web, en mi caso.. y como es para este tutorial, hize algo muy basico

Una vez que tenemos listo nuestro diseño, es hora de convertirlo en una web... bueno, vamos a tomar la herramienta "slice" (no se si asi se llame, pero asi le digo yo XD)

[img]http://api.ning.com/files/J96trQV0Pr7yt5AKZfE4*lcZOmzBjQ7G341lEP9HntZe5tlA6k uu7ekRI0RPDzfMOmKCFbMwbw7lcL3YNLDLh0a4BtFZDVnC/3.JPG[/img]

Luego, lo que tenemos que hacer, es marcar todas las areas que diferenciaran la web, cada uno de los cuadritos que marquenos sera una tabla que contendra la imagen que seleccionemos...

Una vez que terminen, veran algo asi:

[img]http://api.ning.com/files/J96trQV0Pr6buaY5e8vvp87-29ETEIDxeDcXynn2e7VC-MSuvDP4TAo986X*YuWWXF6EbL4-sqHJ9cMBlaoE1yI1VNnrrRHN/4.JPG[/img]

Luego de eso.... se van a File ---> save for web

Veremos una ventanita algo asi, eso es para los retoques o recortes extras que quieran hacer.... bueno, no explicare mucho esta parte... ahi seleccionan el formato de las imagenes y todo eso XD... le dan "save"

Se van a crear un archivo HTML y todas las imagenes de la web en una carpeta...

Bueno, si abren el archivo HTML ya podran ver si sitio... pero realmente eso solo son un monton de tablas con imagenes dentro XD es hora de arreglar ese desmadre... yo lo hago desde el Dreamweaver, ya ustedes podran usar el programa que quieran

Lo que hay que hacer, es pasar lo que esta asi:

Código:

<td colspan="2" rowspan="2">
			[img]images/plantilla_35.gif[/img]</td>

hay que convertirlo en:

Código:

<td colspan="9" rowspan="4" background="images/plantilla_35.gif"></td>

en e dreamweaver es mas facil, solo cuestion de copiar la ruta de la imagen, y luego ponerla de fondo de la celda

Y listo

ya ven que facil, y que bonito sitio el que les quedo? ya los efectos y eso, es CSS y ustedes ya saben como hacerlo ;)

si quieren el dreamweaver y el photoshop full manden un MP (este tuto es exclusivo para comocreartuweb) ni en mi sitio lo hize, si lo van a copiar pongan un enlace

Hi-Tech [R]evolution

Un saludo, ciao....

**Yaneth** · 22/01/2009, 14:34

geniaaaaaaaaial

:D :D :D :D :D :D

muichisimas graciaaaaaas
pondrá manos a la obra

saludos

*****por el momento lo pondré como post aqui**

pero su destino será en photoshop y en tutoriales

un beso

**kimapa** · 22/01/2009, 14:40

Yaneth:

Me alegro de que lo pusieras como post, porque lo del amigo Mzestudios presiento que va a ser muy agradecido.

Mzestudios, buena idea, buen aporte.

---.Saludos.---

**Yaneth** · 22/01/2009, 14:52

Si, si nadie tiene inconvenientes
lo dejamos aqui por una semana o dos, ya
que la mayoria, visita este foro directamente
ya luego lo movemos a donde debe estar
jejeje

***espero no venga jorgens y me regañe, ***

**nosabernada** · 23/01/2009, 16:33

Hola,

me gusto tu tutorial, facil, rapido y bueno

Yo lo he intentado probar, pero cada vez que lo hago, al venir a guardar, o se me cierra el photoshop (en mi version XP) o se queda colgaado sin responder (vista), alguien me puede decir el porque?

Adios

**Aldonati** · 31/01/2009, 15:08

Gracias por ayudarnos a los que empezamos con esto

**Skizel** · 31/01/2009, 16:17

EDIT:Hmmm ya me consegui el programa ^^

**elilor** · 04/02/2009, 09:05

Amigo si fueras tan amable y me manadaras el photoshop y el dream ,full, te lo agradesco, gracias,aqui te va mi email:
elidancer32@hotmail.com

Gracias

**makis_20** · 05/02/2009, 19:09

graciasssss

**cricri** · 15/02/2009, 23:02

gracias!! Pero una pregunta, el diseño de la web, como se puede hacer??? Yo es que de photoshop, aunque ya hace q tengo el programa, lo justo.

Graciñas, saludos

**nosabernada** · 16/02/2009, 16:59

Hola,

pues mira, el diseño lo puedes hacer como te venga en gana, pero luego lo guqardas y lo pasas a photoshop como nos indica nuestro amigo MzStudios y lo haces como quieras, includo con el paint si quieres.

Adios

**dragster2020** · 27/02/2009, 05:09

Hola, buena idea, solo ahi k tener un poco de idea de diseño

**TIFORO** · 02/05/2009, 00:29

Mirar yo siempre pensado que hay empezar por ahi, pero que yo cuando trabajo utilizo mucho las tablas y capas a la vez, y que hagas una plantilla con PhotoShop bastante buena luego para mi personalmente, no sale los resultados graficos como uno quiere, primero boceto y segundo tu cabeza con la rapidez con Dreamweaver seria mucho mejores resultados.

Yo no tardo tanto en montar un index si el cliente lo paga y confia en mis diseño perfectamente le podria montar un buen diseño.

Saludos.

**MzStudios** · 02/05/2009, 04:35

Iniciado por TIFORO

Mirar yo siempre pensado que hay empezar por ahi, pero que yo cuando trabajo utilizo mucho las tablas y capas a la vez, y que hagas una plantilla con PhotoShop bastante buena luego para mi personalmente, no sale los resultados graficos como uno quiere, primero boceto y segundo tu cabeza con la rapidez con Dreamweaver seria mucho mejores resultados.

Yo no tardo tanto en montar un index si el cliente lo paga y confia en mis diseño perfectamente le podria montar un buen diseño.

Saludos.

supongo que es cuestion de tecnica, ya con algo de experiencia, puedes utilizar tus propios metodos..