[TUTORIAL] Diseño Web Profesional

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 :lol: :lol: 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

[contenido no disponible]

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)

[contenido no disponible]

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:

[contenido no disponible]

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

[contenido no disponible]

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...

[contenido no disponible]

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:

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

hay que convertirlo en:

<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

[contenido no disponible]

Y listo
:lol: :lol: :lol: 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 evolution

Un saludo, ciao.... :wink:

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 :wink:

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.---

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, *** :roll:

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

Gracias por ayudarnos a los que empezamos con esto :wink:

EDIT:Hmmm ya me consegui el programa ^^

Amigo si fueras tan amable y me manadaras el photoshop y el dream ,full, te lo agradesco, gracias,aqui te va mi email:
[correo eliminado]

Gracias

graciasssss

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

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

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

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.

TIFORO escribió: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..

Cierto. Precisamente ahora estoy empezando a interesarme por los aspectos formales de las webs. Hasta ahora solo me interesaban los contenidos.

No es lo mas importante el contenido en una pagina web, si es un factor muy importante pero con un diseño mediocre no da el mismo resultado final con una maquetación grafica por un profesional y con la larga atraera a muchos visitantes.

1. Diseño Profesional
2. Contenido excelente.
3. Linkear
4. Bloguear

Si le da un vistado por en Internet vera muchas maneras de atraer a visitantes pero eso esta claro sin contenido perdemos toda la buena informacion visual al cliente.

Saludos.

Astonmartin escribió:Cierto. Precisamente ahora estoy empezando a interesarme por los aspectos formales de las webs. Hasta ahora solo me interesaban los contenidos.

Siempre se aprende algo nuevo, yo he hecho varios diseños de imagen en photoshop pero no sabia que podia hacer eso tambien, muy buen aporte!! :D :D

no entendi bien el ultimo paso :S
porke tiene la misma imagen.. me podrias explicar eso de copiar la rutaa.. no entendi.. gracias

es decir, cambias las imagenes estaticas por fondos para las celdas que photoshop te creo

Esta bueno el tuto, práctico y rápido.

Hola! oye me interesaba mucho este tutorial pero las imagenes no se ven si no fuese mucha molestia y aun las tienes las podrias poner de nuevo?

Hola Mcmago
Hay muchas páginas de video tutoriales como esta.

http://www.tutorial-lab.com/tutoriales-photoshop/

Y el tema que quieras respecto a photoshop u otros programas en

http://www.youtube.com/


:D