Haz tu diseño web en Photoshop

NOTA: Usted puede descargar el PSD archivos que se usan en este tutorial en la parte inferior de la página.


Vamos a empezar las cosas mediante la creación de un nuevo documento Photoshop: 1000px de ancho 980px alto, sobre un fondo transparente. Siguiente vamos a crear tres bloques rectangulares que fluyen por todo el ancho del lienzo, cada uno en su propia capa. El primer bloque es de color blanco ( #FFFFFF), 72 px alto y se coloca en la parte superior del lienzo. Directamente debajo de la barra blanca crearemos una naranja ( #FF7200) bar 158px alto.



Paso 1
En el interés de mantener nuestra organización cordura, pongamos por ejemplo el tiempo de etiquetar nuestras nuevas capas. La capa que contenga el rectángulo blanco nosotros denominaremos "Logo colocación", la naranja rectángulo se llamará "Cabeza", y la brown rectángulo "Cuerpo". Ahora vamos a hablar aquí del logotipo "colocación" layer.





Paso 2
todavía se está trabajando sobre el logotipo "colocación" capa, vamos ahora agregar el texto VoiceTrader y darle un tratamiento logotipo. Vamos con una todos los tapones helvetica Neue LTD Condensada fuente para comenzar con. Ahora selecciona sólo la "voz" texto, darle una fuente extra de peso de color negro y a color de # 2E2926. Hacer lo mismo con "operador", con el más ligero peso y un color de # 877A70.



Para agregar un sutil efecto sombra al tipo de logotipo seleccionaremos la capa con la "VOICETRADER" texto y una vez más vaya a la ventana estilo Capa, aplicando los siguientes ajustes:



Paso 3
Paisájes sitios son un gran recurso para sabrosas tus diseños. Mientras se realiza la búsqueda y compra de acciones de arte va más allá del alcance de este tutorial, logré encontrar un simple icono vector que funcionará perfectamente sentado justo a la izquierda del VoiceTrader texto. Vamos a agregar otra línea de texto conjunto en 12pt Arial regular con un color de # 4A443E, que reza "Home | Acerca de | Contacto" (el " |" o "pipa" es justo por encima de la tecla "Enter" de su teclado).





Paso 4
ahora trabajaremos con una imagen que encontré para amenizar nuestro encabezado. Stock.xchng (http://www.sxc.hu) es un gran recurso para libre stock imagry, y encontré esta imagen en http://www.sxc.hu/photo/964319. Colocar la imagen en su pizarra y escalar a la altura de su naranja encabezado. Para darle esa mezcla "pluma", efecto, saque la herramienta Borrador, ajustar el tamaño de la punta a 150 con una dureza de 10, y borrar de la dirección de las flechas a continuación:



Buena pinta! Ahora, condimentar el encabezado por algunos llamada texto. Usemos nuestros helvetica Neue LTD en 36pt y agregar el texto "nos sentimos orgullosos NUESTROS CLIENTES" toda en mayúsculas. Seleccione "Orgullo" y darle un mayor grosor de la fuente de efecto añadido:



Luego, iremos a nuestra ventana estilo Capa y agregar una sombra paralela a nuestro "nosotros ORGULLO NUESTROS CLIENTES" texto:



Justo por debajo de la "Nos enorgullece nuestro cliente" texto, utilizaremos una segunda línea de texto usando la misma fuente en 12pt lectura "Y VALOR DE SU PARTICIPACIÓN EN NUESTRA sociedad". Aplicar un gradiente superposición junto con la misma sombra paralela utilizada en el paso anterior para el "valor y su participación en nuestra empresa":



Paso 5
Para finalizar el encabezado vamos a crear dos "llamada a la acción" los botones dirigiendo al público a áreas importantes del sitio. Comencemos por crear la forma de la base de nuestro botón. Usaremos la herramienta Rectángulo redondeado con un radio de redondeo de 12px (mostrada a continuación) para crear el botón deseado forma:



Abra la ventana estilo capa, y agregar efecto sombra, Gradiente superposición, accidente cerebrovascular y estilos con los ajustes indicados a continuación:







Luego, agregue el texto del botón "SABER MÁS" en "Neue Helevetica LTD tamaño 12pt en la misma naranja como encabezado antecedentes ( #FF7200), y agregar una sombra paralela a la capa estilo:



Después de eso, simplemente duplicar el botón (y texto) y muévalo a la derecha del botón original. En la ventana Capa Estilos para el botón nuevo, cambiar el color de la superposición de degradado gris. Cambiar el nuevo texto del botón en un tono más oscuro de color gris. Ahora debes de tener algo idéntico a la pantalla siguiente:



Paso 6
hemos terminado con el Encabezado por eso, ahora estamos en la navegación! Comience por crear una nueva capa y dándole el nombre de "navegación". Utilizando la herramienta rectangular Mark, seleccione un 20px alto área directamente debajo de la cabecera ocupa todo el ancho del lienzo. Rellenar la selección con el color de fondo ( # 2E2926). Tome su quemadura herramienta, ajustar el tamaño de la punta y el 30 con una dureza de 0, y pincel, en la parte inferior de su nuevo rectángulo de acuerdo a la siguiente pantalla:



Ahora podemos añadir la navegación texto. Toda en mayúsculas Arial Negrita 12pt, tipo "hogar", "con VOZ COMERCIANTE", "NUESTROS SERVICIOS", "EL MERCADO", "foros" y "apoyo" en una sola línea con un importe a tanto alzado de espaciamiento entre cada uno:



En una nueva capa, que vamos a añadir un vuelco muestra estado tomando nuestra herramienta rectangular Mark y creando un pequeño rectángulo 20px tall y sólo lo suficientemente amplio como para cubrir el "hogar" el texto. Rellena con un color gris más claro ( # 48403C) y utilizar su quemadura herramienta de nuevo para crear un efecto de gradiente similar que has usado en la navegación antecedentes:



Paso 7
Con la navegación completa, es hora de que el cuerpo de la página. Vamos una vez más una nueva capa y utilizar la herramienta rectangular Marquee para seleccionar un área de la parte inferior de la nav en la parte inferior de la página, que se extiende por todo el lienzo. Llenar esta selección con el mismo color que el fondo (nO 2E2926) y, a continuación, utilice la herramienta Dodge (con la punta 150px y una dureza de 0) para aliviar la zona según las flechas a continuación:



Ahora agregamos un pequeño blanco línea vertical entre la navegación y partes de la carrocería para separar visualmente las dos. En una nueva capa, traer a colación la herramienta Lápiz con un tamaño de 1px y el primer plano en blanco. Mantenga presionada la tecla "Mayúsculas" y arrastre una línea recta que va de un lado del lienzo a la otra. Colocar la opacidad de la capa a 45 %, y empujarlo hacia arriba o hacia abajo si no es exactamente alineado con la parte inferior de la Navegación sección:



Paso 8
Vamos a empezar agregando en contenido. Yo he encontrado otro sitio digno de existencias de icono y colóquelo junto a algún texto de bienvenida para un poco visual punch. En Arial 14pt regulares y un color de # 9D9A99, agregar el texto "Bienvenido a Voz comerciante, su Asesor en Telecom las existencias":




Ahora crearemos un área para nuestro primer contenido el párrafo que se llevará a cabo. Utilice la herramienta Rectángulo redondeado con una 12pt radio para seleccionar un área 373px y 144px alto, y llenarla con una luz gris ( # 3F3935):



Vaya a su ventana estilo Capa y aplicar Sombra paralela y configuración de trazo a continuación:





Ahora agregamos unos llenadora contenido con un titular en blanco 12pt Arial negrita y la copia del cuerpo en 12pt Arial regular con un toque de naranja ( #CAB38A)

http://www.templamatic.com/_Documents/Images/Blog/BlogID33/EightStepRoundShapeTextThum.jpg

Duplicar nuestro recién creado el párrafo junto con todos los titulares y copia del cuerpo y mover el nuevo grupo de la derecha del original. Cambiar el marcador encabezado y cuerpo copiar el texto para indicar una materia diferente:



Paso 9
En este paso vamos a utilizar muchas de las técnicas que hasta ahora hemos creado en el tutorial, así que no voy a entrar en demasiados detalles explicando los pasos. Comencemos por crear el trasfondo de nuestra gran área de contenido... Aviso en la pantalla a continuación que el área de contenido es un rectángulo redondeado con dos colores distintos. Esto puede hacerse mediante la creación de un rectángulo redondeado color en blanco y, a continuación, duplicarla y cambiando el segundo rectángulo de color grisáceo ( # 38322E).



Aplicar los parámetros de estilo capa inferior a la nueva capa gris:





Continuando con la zona gris, que vamos a añadir una introducción simple partida que dice: "Nuestras soluciones" y agregar el siguiente icono en la parte derecha de la partida para algunos eyecandy:



Ahora seleccione la capa blanca con su forma y aplicar las siguientes opciones en el estilo Capa ventana:





Vamos a terminar esta zona con un cierto contenido de relleno. Añadir una cabecera de set en 18 puntos Arial con un color de # FF7200, un subtítulo establecido en Arial 12 puntos con un color de # A38D71, y el texto establecido en Arial 12 puntos con un color de # A5826B. Coloque la imagen de archivo siguientes a la izquierda de la cabecera y subtítulo. Todo lo que ahora debe ser similar a la siguiente pantalla:





Paso 10
En el paso 10, terminamos poner contenido más oscuro en la mitad de nuestro cuerpo el párrafo. Volver a la capa donde hemos añadido "Nuestras soluciones" y crear un rectángulo redondeado 226px ancho y 36px tall y un color de # 231E1B:



Ahora aplicar la siguiente capa ajustes de estilo de la recién creada forma:





Agregar un icono y algún texto de la etiqueta, y luego duplicar las pestañas hasta que tenga una lista completa:



Último paso en nuestro último paso, vamos a crear el pie usando el mismo truco que hicimos antes. Utilice la herramienta rectangular Mark y sacar un pequeño rectángulo 55px alto, extendiendo la anchura del lienzo. Rellenar la selección con su fondo estándar gris ( # 2E2926) y utilizar la quemadura herramienta junto al comienzo de una nueva forma:



Agregar algún texto de pie y listo:



Ultima vista:



Allí está, usted ha creado una magnífica plantilla web! Usando técnicas que acaba de aprender, ahora tiene el conocimiento para crear un sinfín de diseños web.

Gracias se me olvidaba algo...
Rockero777: despues del diseño e photoshp se maqueta con CSS en una hoja de estilo, saludos




POR LOS QUE QUIEREN PASAR EL PSD A HTML AQUI LINK:

MUCHOS HAN ESTADO EXPERIMENTANDO PROBLEMAS AL PASAR PSD A HTML O CSS DEBIDO HA ESTO PONDRE 1 ¨MINI GUIA¨ PARA PASARLO A HTML TU PSD ONLINE LA OTRA ES LA DEL POST PARA HACELO MAS PROFESIONALMENTE LA UNICA DIFERIENCIA ES QUE NO QUEDA TAN PERFECTAMENTE EL CONVERTIDO ONLINE COMO UNO EDITADO POR NOSOTROS MISMOS BUENO SIN MAS QUE DECIR AQUI LES PRESENTO LA MANERA DE PASARLOS ONLINE (ESTE ULTIMO LO ENCONTRE EN OTRA PAGINA WEB AQUI EL LINK ORIGINAL:
SI QUIEREN LA WEB DONDE DAN LOS CURSOS PARA HACERLO PROFESIONALMENTE ES:
http://psdahtml.wordpress.com/

Y GRACIAS POR SU VISITA A MI NUEVO POST
Convertir PSD en HTML y CSS Online






Convertir archivos PSD (Photoshop) en plantillas HTML y CSS es una de las tareas más comunes para el diseñador, para los desarrolladores tal vez sea un poco complicado en caso lo necesitemos, para esto podemos recurrir a una herramienta online que hace el trabajo por nosotros.




PSD2CSS es una herramienta Online, solo tienes que subir tu archivo PSD y automáticamente generara código HTML y CSS para que lo puedas descargar gratis.


Paso 1: Diseñar la página web



Lo primero que tenemos que hacer es nuestro diseño de página web utilizando capas en Photoshop (también podemos utilizar Gimp) .


Luego que terminemos nuestro diseño debemos guardarlo como .psd.


Este es un archivo .psd de ejemplo.


Descargar PSD


Paso 2: Subir y Descarga



Ahora solo debemos subir nuestro archivo para que nos genere un Zip con el código HTML y CSS.


Nota: recientemente se ha restringido la generación de código solo para usuarios registrados, pero el registro es gratuito, así que no habría ningún problema.


Luego de procesar el PSD nos mostrara 2 links, uno para ver el sitio web online y el otro para descargar el Zip.


Sin dudad una herramienta para sacar de apuros a cualquiera, tienen criticas sobre esta herramienta?, saben de alguna otra?, mejores características?, pueden comentarla y con todo gusto aportaremos más ideas!