Tutorial: Diseñando y Codificando una Página Web Desde Cero. Parte 1
Publicado por Samuel | 07.11.2009Headline . Tutoriales
Desde el tutorial Diseña una Plantilla para WordPress en Photoshop he recibido muchas preguntas de como se pasa la página de Photoshop a Dreamweaver o cualquier software de creación de páginas web. Debido a la inquietud de tantos lectores hoy presento la primera parte de una guia que te mostrará cual es el proceso de una página web desde el diseño en Photoshop luego a Dreamweaver y por último a la pantalla de tu computadora, espero disfrutes esta primera entrega donde mostraré el diseño inicial en Photoshop.
Paso 1
Decidí crear un template como si se tratasé de una tienda en linea, iniciamos creando un nuevo documento de 1300 x 800 píxeles.
Paso 2
Ahora limitaremos el espacio de trabajo, agregaremos guias midiendo 150px desde cada borde lateral hacia el centro del documento lo que nos dejara con 1000px de espacio para trabajar nuestra página web. Para crear las guias basta con dar clic sostenido sobre la regla y arrastrar midiendo la distancia necesaria, si no tienes las regla activada solo presiona Ctrl+R para hacerla aparecer.
Paso 3
Ahora que ya tenemos delineada nuestra área principal vamos a empezar a trabajar en el diseño del sitio, primero necesitarás estos Pinceles Grunge que encontré en DeviantArt, luego crea una nueva capa, selecciona el color Gris 70% y da pinceladas en con distintos pinceles, mi fondo quedó así.
Paso 4
Ahora necesitamos crear el área del producto para eso toma la Herramienta Rectangulo, luego selecciona el color #404040 y crea un rectángulo como el que te muestro en la imágen inferior.
Crea una nueva capa sobre la del rectágulo, luego da Ctrl+Clic sobre el trazado del rectángulo, luego en la capa nueva con un pincel de bordes suaves y con color #1b1b1b sombrea el área entre ambas guias, pero ojo solo debes sombrear la parte superior dejando la inferior levemente intacta.
Paso 5
Muy bien con el área princiap diseñada podemos tomar la parte superior como nuestro header o cabecera y la inferior como footer o pie de página, empezaremos por la cabezera, agregegaremos un poco de texto para hacer el nombre/logo del sitio y un pequeño detalle en el mismo, estoy usando Helvetica para el logo puedes usar la que más te guste.
Luego crea un pequeño circulo con la Herramienta Elipse, luego toma la Pluma y mientras presionas la tecla Control da clic en el borde del circulo para hacer aparecer sus puntos de ancla, luego deja de presionar la tecla Control y en vez de ella presiona la tecla Alt y da clic sobre el punto izquierdo del circulo, te muestro como se ve el circulo en cada una de las partes que te he indicado hasta su forma final.
Presiona Ctrl+T para activar las opciones de transformación y simplemente rota el circulo en contra del sentido del relog y reubicalo sobre la palabra Stuff del logo, algo así.
Ahora necesitarás la fuente Museo que puedes descargar de forma gratuita desde MyFonts, debes registrate y descargar la fuente en sus tres versiones gratuitas 300, 500 y 700 el proceso de descarga es como si estubieras comprando las fuentes. Luego con Museo 700 en tamaño 18 escribe algo en el circulo.
Paso 6
Ahora en el extremo derecho crearemos un formulario de búsqueda el mio quedó así, la fuente es Arial y el rectangulo solo tiene por estilo de capa Trazo 1 pixel en color #b4b4b4.
Paso 7
Vamos a crear un poco más de texto esta vez en el área principal primero con Arial crearemos el siguente texto, en la misma imagen te muestro las propiedades que use para crearlo.
Luego..
Después..
Algo más..
Solo una capa más..
Ahora solo necesitamos un set de iconos, descargalos y busca el icono de la cesta en tamaño 64×64 pixeles y agregalo al trabajo, al final la imágen deberia verse así.
Paso 8
Con que hablamos del iPhone? necesitaremos un buen ejemplar en formato PSD, en DeviantArt hay una gran colección de estos aparatos yo descargue uno y lo agregue al trabajo redimensionandolo un poco para que se ajuste al tamaño de mi página.
Bien para finalizar esta primera parte lo último que haremos será agruegar más texto, primero tres columnas con títulos en Museo 700, tamaño 30pt y enfocado y el resto en Arial Regular a 14pt, lo que luce así.
Palabras Finales
Así finalizamos la primera entrega de esta serie de Como Diseñar y Codificar una Página Web, espero que lo encuentres útil y puedas dejar tus comentarios al final, muy pronto publicaré el tutorial donde condificaremos esta plantilla con código XHTML y CSS válidos.
Da clic para verla en grande.
Acerca del Autor
Samuel Bran es estudiande de Diseño Gráfico, tiene una gran pasión por el diseño gráfico y web, fan de Adobe y la edición de video. Originario de El Salvador, autor y creador de Photodesigner.Net un blog dedicado a publicar Tutoriales en Español para Adobe Photoshop, Recursos e Inspiración.
25 Comentarios en “Tutorial: Diseñando y Codificando una Página Web Desde Cero. Parte 1”
kilO Dijo:
07.11.2009genial! espero la siguiente parte xD
no puedo esperar
Azael Dijo:
07.11.2009muy bueno un tutorial que seguire ^_^
Edwingraf Dijo:
07.11.2009Excelente como siempre, amigo!
News Tutorial: Diseñando y Codificando una Página Web Desde Cero. Parte 1 | Web 2.0 Designer Dijo:
07.11.2009[...] See the rest here: Tutorial: Diseñando y Codificando una Página Web Desde Cero. Parte 1 [...]
Samuel Dijo:
07.11.2009Gracias a todos por los comentarios!!!
Esperen muy pronto la parte dos.
Carlosmax Dijo:
07.12.2009Buena, buena, me ha gustado mucho, hay detalles que no les prestaba atención, ahora gracias ti, si! Saludos y keep with the good work!
henry Dijo:
07.12.2009oie.. genial ee el tutorial.. y buen diseño de la pagina
tmb espero con ancias la 2 parte!
Javier Dijo:
07.13.2009Saludos recien conozco la web y te ando siguiendo desde el Google Reader
Gracias Samuel hice el tuto pero con algunas modificaciones de esta primera parte Diseñando y Codificando una Página Web Desde Cero desde hace mucho que queria que alguien haga este tipo de tutos tengo conocimientos solidos en varios Software de diseño de Adobe pero me falta un poco de HTML Y CSS espero nos ayudes con tus tutos muchas gracias te mando mi resultado de esta primera parte…
http://farm4.static.flickr.com/3438/3716426269_0bd934c93f_b.jpg
Gracias otra vez sigue asi un saludo desde Peru
Javier…
Samuel Dijo:
07.13.2009Agradezco los comentarios y sus palabras Carlosmax que bueno que ahora notes esos detalles!, Henry Espero publicar pronto la segunda parte pendientes!, Javier que buen resultado amigo creo que pronto abriré un grupo en Flickr para que todos puedan subir sus resultados o trabajos.
Muchas gracias a todos!!.
diseño logos Dijo:
07.16.2009Gracias por el tutorial me resulto muy util, y te felicito por el blog, esta muy bien diseñado. Saludos
Daniel Dijo:
07.17.2009Muy bueno! Al fin diseño web!! En cuanto pueda intentaré hacer este, pero ya quiero el segundo!
AlanCorp Dijo:
07.17.2009Simplemente excelente, llegue a este blog por el tuto de la plantilla de wordpress simplemente fantástico, y ahora me vuelves a sorprender he estado buscando un tuto como este desde hace tiempo. Desde ya me pongo a hacerlo. Gracias.
Lo Mejor de la Red – Julio de 2009 | Tinnta Dijo:
07.30.2009[...] Ver parte 1 | Ver parte 2 | Ver parte 3 [...]
Daniel Riquelme Dijo:
08.13.2009Hace mucho que buscaba algo así, sinceramente un espectáculo el tutorial. Millones de gracias. Mis saludos desde Paraguay
Pablo Dijo:
08.16.2009Genial!!!!!!!! Ya lo estoy probando para realizar mi sitio!!!! Lo subire para que lo puedas ver. Muchas gracias por tus aportes, me son de mucha ayuda!!!!
Samuel Dijo:
08.16.2009Gracias a todos por comentar y dejar sus resultados.
Saludos amigos.
Daniel Dijo:
08.21.2009Vuelvo a comentar con una duda: directamente no entendí lo que se hace en el punto 4. Logré hacer el rectángulo, pero en el momento de crear la nueva capa, no entiendo qué hay que hacer con el Ctrol+Click sobre el trazado del rectángulo, y de ahí qué tendría que pintar con el pincel. Toda esa parte me dejó perdido, y no sé qué se está haciendo con eso. Muchas gracias!!
Daniel Dijo:
08.22.2009Ya encontré el por qué del Ctrol Click, y cómo hacerlo! Era para tener seleccionado el recuadro. Aunque todavía no sé cómo quedaría lo que hay que pintar. Muchas gracias!
Samuel Dijo:
09.11.2009Muy bueno aunque para los que somos principiantes debería entrar más a detalle, pero de todas formas muy bueno, felicidades.
pablo iovane Dijo:
09.29.2009Samuel: al fin encontré el maestro que buscaba!!! En castellano, de lenguaje claro, práctico y sin escaparte el más mínimo detalle! Gracias y de nuevo Gracias!
Marco R Dijo:
09.30.2009muy bueno el tutorial la verdad me sirve bastante
solo una pregunta y aunque paresca tonta para algunos para mi es urgente ya que me sta quebrando la cabeza.
como agrego la canastita y la imagen del iphone a mi documento?? ya que cuando los quiero arrastra al documento se abren en un documento(ventana) nuevo.
Nemesio Dijo:
02.16.2010Este Tutorial no lo explica del todo bien! hay que hacer uno para gente menos profesional joder.
kasbeel Dijo:
03.11.2010exelente este tuto, cosas como estas son las que hacen agradable pasear pasarse por la web de vez en cuando
Paola Dijo:
03.19.2010hola!! acabo de descubrir este sitio y la verdad esta muy bueno , hay tutoriales muy interesantes, yo estoy empezando con el diseño grafico , seria muy bueno si publicas información conrespecto a diseñar para llevar a na imprenta ,, desde ya gracias y saludos..
HARUKA Dijo:
05.5.2010este tutorialaplica de la misma forma para blogspot o eso es d eotra manera , gracias era impresionante, muchas bendiciones para ti, exito en todo