ComoCrearTuWeb (CCTW)

MzStudios · Habitante Registrado: 07 Jul 2008 Mensajes: 310

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 Laughing

Y para marquetar la web Smile

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)

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:

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:

Yaneth · Publicado: Jue Ene 22, 2009 4:34 pm **Asunto**:

geniaaaaaaaaial

Very Happy

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

_________________
______________________________________

reparacion de rines

_____________________________________

kimapa · Publicado: Jue Ene 22, 2009 4:40 pm **Asunto**:

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 · Publicado: Jue Ene 22, 2009 4:52 pm **Asunto**:

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, *** Rolling Eyes

_________________
______________________________________

reparacion de rines

_____________________________________

nosabernada · Publicado: Vie Ene 23, 2009 6:33 pm **Asunto**:

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
_________________
Foro internavegacio

Aldonati · Merodeador Registrado: 31 Ene 2009 Mensajes: 3

Gracias por ayudarnos a los que empezamos con esto Wink

Skizel · Publicado: Sab Ene 31, 2009 6:17 pm **Asunto**:

EDIT:Hmmm ya me consegui el programa ^^

elilor · Habitante Registrado: 11 Ene 2009 Mensajes: 30

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 · Publicado: Jue Feb 05, 2009 9:09 pm **Asunto**:

graciasssss

cricri · Habitante Registrado: 02 Ene 2009 Mensajes: 43

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 · Publicado: Lun Feb 16, 2009 6:59 pm **Asunto**:

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
_________________
Foro internavegacio

dragster2020 · Habitante Registrado: 06 Nov 2008 Mensajes: 28

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

TIFORO · Habitante Registrado: 13 Mar 2009 Mensajes: 186

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 · Habitante Registrado: 07 Jul 2008 Mensajes: 310

Astonmartin · Publicado: Sab May 09, 2009 5:27 pm **Asunto**: Interesante...

Cierto. Precisamente ahora estoy empezando a interesarme por los aspectos formales de las webs. Hasta ahora solo me interesaban los contenidos.
_________________
Ya hablaremos...
http://www.brasilpipa.com
http://www.nautiscuela.com
http://www.ubired.com