Diseño y maquetado de plantillas web 1º
Este es el diseño de Pagina que usaremos. Como verás es mas adecuada para un portal que para pagina personal.
Provisionalmente hemos colocado el nombre a las distintas ventanas, sin embargo al final eres tú quien decide en qué usar en cada una de ellas.
Nota:
En delante, por cuestión de espacio visible, trabajaremos sin nombre sobre las ventanas. Si así lo deseas hacer también sólo bórralos.
Recomendación:
Te sugerimos que después de cada tres o cuatro pasos guardes tu trabajo, pero con un nombre diferente. Esto para evitar errores irreparables. Podrías llamarlo "pagina1" luego aplicas "Guardar Como" y llamas al segundo "pagina2", y si al final estas conforme con tu trabajo puedes borrar los archivos que ya no te sirvan.
Hay que crear selecciones para cada ventana y luego rellenarlas con color.
La primera será la más complicada.
Para elaborar las selecciones es imperante que acoplemos bien una guía por cada línea y/o punto de inclinación que veamos en el dibujo, en este caso en la primera barra, la del logotipo y banner de publicidad.
La imagen te muestra el resultado: 6 guías verticales y 6 horizontales.
Para aparecer u ocultar las reglas presiona "Ctrl + R"
Para aparecer u ocultar las guías presiona "Ctrl + ' "
Dentro del menú View activa el Snap (salto) para asegurarnos de que la selección se base en las guías. Si deseas ser mas específico dirígete a:
"Snap to > Guides"
Toma la herramienta Rectangular Marqueey traza la primera selección.
La imagen te muestra el resultado.
Ahora tenemos un largo rectángulo, sin embargo no es la figura que necesitamos.
Hay que recortar las esquinas de nuestra Selección para acoplarla a nuestro diseño.
Hay mucha mas comodidad y precisión con un Zoom () de 300%.
Toma la herramienta Polygonal Lasso y presionando la tecla Alt crea un triángulo. Cuando cierres el triángulo cerciórate de ver un pequeño círculo, el cual te indica que lo haces en el lugar adecuado, donde se unen las puntas y se cierra el triángulo.
Al soltar la tecla Alt el área que ocupaba el triangulo, dentro de la Selección, desaparece.
La imagen te muestra el antes y después de soltar la tecla Alt .
Repite la operación en las cuatro esquinas de nuestra Selección.
Si en algún momento las guías te molestan por atraer la Selección a donde no deseas, desactiva el Snap.
La siguiente área a tratar es el área de publicidad o banner. Si no lo consideras necesario para tu página salta a la siguiente etapa.
Presiona "Ctrl + ' " o en el menú "View > Snap To > Guides" para ver las líneas del bosquejo que tenemos tras las guías e identifica la posición del banner.
Haz lo contrario para volverlas a ver y continuar.
Toma la herramienta Rectangular Marquee y presionando la tecla Alt crea una selección siguiendo las guías.
La imagen te muestra el resultado.
Guarda la selección. "Selection > Save Selection" y nómbrala Banner. Luego presiona "Ctrl + D" para quitarla y continuar.
La siguiente selección es la pestaña inferior izquierda de la barra de título.
Lo haremos en tres pasos, como lo muestran las imágenes.
1 .- Crea la selección basado en las guías. Ojo: he movido una guía central que estorbaba.
2 .- Luego: "Select > Transform Selection" con esto se forma un recuadro alrededor de la selección. Sigue con "Edit > Transform > Skew" con esto puedes tomar las esquinas inferiores del recuadro y arrastrarlas hasta los puntos rojos de la imagen 1 (en la intersección).
3 .- Una vez colocadas las esquinas correctamente presiona Enter en tu teclado para aceptar la selección creada. La imagen 3 te muestra el resultado.
Guarda la selección con el nombre de Pestaña.
Continuamos con la segunda entrega
Nota: Si bien fue desarrollado en Photoshop 6, se puede ejecutar en Photoshop CS 2 sin problemas, al igual que usar Dreamweaver 8 para el maquetado. !!
Carga la selección Banner pues con esta empezamos a dar color a las capas.
Crea una Nueva Capa y nómbrala Banner. Sobre esta carga la selección llamada Banner "Select > Load Selection" Rellenarla con un color Gris Oscuro (999999)
Luego carga la selección Pestaña y presiona Supr (delete) , esto elimina esa área de la Capa Banner.
Crea una Nueva Capa y nómbrala Pestaña. Rellena el área de la selección Pestaña con un color gris más claro (CCCCCC)
Crea la selección basado en las guías. Ojo: he movido una guía central que estorbaba.
Finalmente hagámoslo con una de las ventanas, la del menú:
1. - Acopla las guías sobre las líneas de la ventana.
2. - Traza la selección Mayor siguiendo las guías.
3. - Sobre una Nueva Capa (menú) rellena la selección con gris claro (CCCCCC)
4. - Dibuja la segunda selección (superior) y en una Nueva Capa (menú 1) rellena con un gris oscuro (999999)
Presiona "Ctrl + D" para deseleccionar y listo.
Con la misma técnica puedes terminar el resto de las ventanas.
Aquí tienes las capas con color (no definitivo), y los nombres asignados a cada una
Busca la imagen en la Carpeta Almacén
El siguiente paso será crear el estilo de capa requerido para darle profundidad a la plantilla.
Continuamos con la tercer entrega
Para ese nuevo estilo de capa solo marca los mismos valores que las imágenes te mostrarán.
Aquí vamos con Drop Shadow (Sombra Paralela).
Aquí vamos con Inner Shadow (Sombra Interior).
Este es Bevel and Emboss (Bisel y Relieve).
Y finalmente Stroke (color=666666)
Guarda el estilo de capa creado presionando New Style (Nuevo Estilo).
Sigue...
Aplica el estilo creado a todas las capas de color gris oscuro en el diseño.
En el caso de la capa "Pestaña", que es de color gris claro, aplica y luego desactiva Bevel and Emboss y Drop Shadow.
La imagen te muestra el resultado.
Debido al Borde creado por la aplicación de Stroke el tamaño de las ventanas ha rebasado el de la capa "Pantalla". Te recomiendo que, con un Zoom de 300-500 y unas guías corrijas, presiona "Ctrl + T" y aumenta la altura de esta capa. Esto puede evitarte mayores contratiempos con los editores HTML.
Hay que mejorar la nitidez de los bordes finos del diseño, lo cual se logra muy fácilmente con "Levels".
En una capa de ajuste (Layer > New Layer Adjustmenet > Levels) presiona el Auto, luego corre el triángulo central hasta un valor de 2.20 (eres libre de usar tus propios valores).
La imagen te muestra los valores en el Canal RGB.
Ahora viene el color, el cual es muy sencillo de cambiar. Asegúrate de estar sobre la capa superior del PSD.
Luego: "Layer > New Adjustment Layer > Hue/Saturation"
La imagen te muestra los valores que usé.
Para encontrar el color adecuado a tus necesidades juega primeramente con Hue y luego encuentra la intensidad de este con Saturation.
Lightness no es muy recomendable a menos que desees quitar o poner más luz.
Te recomendamos usar nuestro valores hasta terminar este tutorial, luego podrás cambiarlos si así lo deseas.
Este es nuestro resultado después de la coloración.
Finalmente decoras tu Web. Nosotros, por cuestiones de tiempo, lo hicimos muy poco, pero no es tu caso, es aquí donde tu creatividad debe relucir.
El fondo lo rellenamos con un color amarillo muy claro (FBFB74).
Hasta aquí llega "Photoshop" pero toma su lugar el Hermano Menor "Image Ready"
Este es el resultado hasta ahora y es aquí donde abandonamos "Photoshop" y entramos a "Image Ready". Sólo presiona el botón "Jump To Image Ready" .
En delante lo que buscamos es hacer que nuestra imagen, la cual tiene un considerable peso en bytes, sea más ligera y así ayudar al la rápida carga de la misma en Internet.
Tal vez sea esta sea la primera imagen que tengas de Image Ready, mas aun si lo usas poco.
Rápidamente, reconfiguremos las ventanas. Necesitaremos las ventanas de Optimize, Layers, History, Slice y el Menú de Herramientas. Al resto lo puedes quitar para tener más espacio y no ser objeto de este tutorial.
Asegúrate de que el Snap, en el menú View, no esta activado, entonces empieza a cortar.
Toma el Cuchillo (Slice) . Lo primero que cortaremos es el Menú. Cuando tus cortes no sean exactos usa el Slice Select que es el editor de cortes, o simplemente presiona Supr (delete) en tu teclado y vuelve a trazarlo.
Es recomendable usar continuamente El Zoom y Hand para moverte a través de la imagen.
Vemos que al trazar el primer corte automáticamente se generan otros cortes. Por esto es importante tomar en cuenta que entre menos colores y cortes usemos menor será el peso de nuestra página, osea que tardará menos en cargarse.
Luego de esto continuemos con el resto del menú en un nuevo corte, el cual también abarca un poco de fondo claro, para evitar crear mas celdas.
Las imágenes de un sólo color pueden ser sustituidas por color de fondo de celda en el [b]Editor HTML, lo que agiliza la carga de la página.
Con los cortes lo que se intenta es separar las zonas de un solo color de las que están compuestas por un conjunto de estos, como las imágenes con profundidad.
Aquí tenemos los cortes generados para esta plantilla.
Aquí esta la imagen hasta el momento, en mayor tamaño.
Sigue..
Con Adobe Photoshop, y Macromedia Dreamweaver
Este es el diseño de Pagina que usaremos. Como verás es mas adecuada para un portal que para pagina personal.
Provisionalmente hemos colocado el nombre a las distintas ventanas, sin embargo al final eres tú quien decide en qué usar en cada una de ellas.
Nota:
En delante, por cuestión de espacio visible, trabajaremos sin nombre sobre las ventanas. Si así lo deseas hacer también sólo bórralos.
Recomendación:
Te sugerimos que después de cada tres o cuatro pasos guardes tu trabajo, pero con un nombre diferente. Esto para evitar errores irreparables. Podrías llamarlo "pagina1" luego aplicas "Guardar Como" y llamas al segundo "pagina2", y si al final estas conforme con tu trabajo puedes borrar los archivos que ya no te sirvan.
Hay que crear selecciones para cada ventana y luego rellenarlas con color.
La primera será la más complicada.
Para elaborar las selecciones es imperante que acoplemos bien una guía por cada línea y/o punto de inclinación que veamos en el dibujo, en este caso en la primera barra, la del logotipo y banner de publicidad.
La imagen te muestra el resultado: 6 guías verticales y 6 horizontales.
Para aparecer u ocultar las reglas presiona "Ctrl + R"
Para aparecer u ocultar las guías presiona "Ctrl + ' "
Dentro del menú View activa el Snap (salto) para asegurarnos de que la selección se base en las guías. Si deseas ser mas específico dirígete a:
"Snap to > Guides"
Toma la herramienta Rectangular Marqueey traza la primera selección.
La imagen te muestra el resultado.
Ahora tenemos un largo rectángulo, sin embargo no es la figura que necesitamos.
Hay que recortar las esquinas de nuestra Selección para acoplarla a nuestro diseño.
Hay mucha mas comodidad y precisión con un Zoom () de 300%.
Toma la herramienta Polygonal Lasso y presionando la tecla Alt crea un triángulo. Cuando cierres el triángulo cerciórate de ver un pequeño círculo, el cual te indica que lo haces en el lugar adecuado, donde se unen las puntas y se cierra el triángulo.
Al soltar la tecla Alt el área que ocupaba el triangulo, dentro de la Selección, desaparece.
La imagen te muestra el antes y después de soltar la tecla Alt .
Repite la operación en las cuatro esquinas de nuestra Selección.
Si en algún momento las guías te molestan por atraer la Selección a donde no deseas, desactiva el Snap.
La siguiente área a tratar es el área de publicidad o banner. Si no lo consideras necesario para tu página salta a la siguiente etapa.
Presiona "Ctrl + ' " o en el menú "View > Snap To > Guides" para ver las líneas del bosquejo que tenemos tras las guías e identifica la posición del banner.
Haz lo contrario para volverlas a ver y continuar.
Toma la herramienta Rectangular Marquee y presionando la tecla Alt crea una selección siguiendo las guías.
La imagen te muestra el resultado.
Guarda la selección. "Selection > Save Selection" y nómbrala Banner. Luego presiona "Ctrl + D" para quitarla y continuar.
La siguiente selección es la pestaña inferior izquierda de la barra de título.
Lo haremos en tres pasos, como lo muestran las imágenes.
1 .- Crea la selección basado en las guías. Ojo: he movido una guía central que estorbaba.
2 .- Luego: "Select > Transform Selection" con esto se forma un recuadro alrededor de la selección. Sigue con "Edit > Transform > Skew" con esto puedes tomar las esquinas inferiores del recuadro y arrastrarlas hasta los puntos rojos de la imagen 1 (en la intersección).
3 .- Una vez colocadas las esquinas correctamente presiona Enter en tu teclado para aceptar la selección creada. La imagen 3 te muestra el resultado.
Guarda la selección con el nombre de Pestaña.
Continuamos con la segunda entrega
Nota: Si bien fue desarrollado en Photoshop 6, se puede ejecutar en Photoshop CS 2 sin problemas, al igual que usar Dreamweaver 8 para el maquetado. !!
Carga la selección Banner pues con esta empezamos a dar color a las capas.
Crea una Nueva Capa y nómbrala Banner. Sobre esta carga la selección llamada Banner "Select > Load Selection" Rellenarla con un color Gris Oscuro (999999)
Luego carga la selección Pestaña y presiona Supr (delete) , esto elimina esa área de la Capa Banner.
Crea una Nueva Capa y nómbrala Pestaña. Rellena el área de la selección Pestaña con un color gris más claro (CCCCCC)
Crea la selección basado en las guías. Ojo: he movido una guía central que estorbaba.
Finalmente hagámoslo con una de las ventanas, la del menú:
1. - Acopla las guías sobre las líneas de la ventana.
2. - Traza la selección Mayor siguiendo las guías.
3. - Sobre una Nueva Capa (menú) rellena la selección con gris claro (CCCCCC)
4. - Dibuja la segunda selección (superior) y en una Nueva Capa (menú 1) rellena con un gris oscuro (999999)
Presiona "Ctrl + D" para deseleccionar y listo.
Con la misma técnica puedes terminar el resto de las ventanas.
Aquí tienes las capas con color (no definitivo), y los nombres asignados a cada una
Busca la imagen en la Carpeta Almacén
El siguiente paso será crear el estilo de capa requerido para darle profundidad a la plantilla.
Continuamos con la tercer entrega
Para ese nuevo estilo de capa solo marca los mismos valores que las imágenes te mostrarán.
Aquí vamos con Drop Shadow (Sombra Paralela).
Aquí vamos con Inner Shadow (Sombra Interior).
Este es Bevel and Emboss (Bisel y Relieve).
Y finalmente Stroke (color=666666)
Guarda el estilo de capa creado presionando New Style (Nuevo Estilo).
Sigue...
Aplica el estilo creado a todas las capas de color gris oscuro en el diseño.
En el caso de la capa "Pestaña", que es de color gris claro, aplica y luego desactiva Bevel and Emboss y Drop Shadow.
La imagen te muestra el resultado.
Debido al Borde creado por la aplicación de Stroke el tamaño de las ventanas ha rebasado el de la capa "Pantalla". Te recomiendo que, con un Zoom de 300-500 y unas guías corrijas, presiona "Ctrl + T" y aumenta la altura de esta capa. Esto puede evitarte mayores contratiempos con los editores HTML.
Hay que mejorar la nitidez de los bordes finos del diseño, lo cual se logra muy fácilmente con "Levels".
En una capa de ajuste (Layer > New Layer Adjustmenet > Levels) presiona el Auto, luego corre el triángulo central hasta un valor de 2.20 (eres libre de usar tus propios valores).
La imagen te muestra los valores en el Canal RGB.
Ahora viene el color, el cual es muy sencillo de cambiar. Asegúrate de estar sobre la capa superior del PSD.
Luego: "Layer > New Adjustment Layer > Hue/Saturation"
La imagen te muestra los valores que usé.
Para encontrar el color adecuado a tus necesidades juega primeramente con Hue y luego encuentra la intensidad de este con Saturation.
Lightness no es muy recomendable a menos que desees quitar o poner más luz.
Te recomendamos usar nuestro valores hasta terminar este tutorial, luego podrás cambiarlos si así lo deseas.
Este es nuestro resultado después de la coloración.
Finalmente decoras tu Web. Nosotros, por cuestiones de tiempo, lo hicimos muy poco, pero no es tu caso, es aquí donde tu creatividad debe relucir.
El fondo lo rellenamos con un color amarillo muy claro (FBFB74).
Hasta aquí llega "Photoshop" pero toma su lugar el Hermano Menor "Image Ready"
Este es el resultado hasta ahora y es aquí donde abandonamos "Photoshop" y entramos a "Image Ready". Sólo presiona el botón "Jump To Image Ready" .
En delante lo que buscamos es hacer que nuestra imagen, la cual tiene un considerable peso en bytes, sea más ligera y así ayudar al la rápida carga de la misma en Internet.
Tal vez sea esta sea la primera imagen que tengas de Image Ready, mas aun si lo usas poco.
Rápidamente, reconfiguremos las ventanas. Necesitaremos las ventanas de Optimize, Layers, History, Slice y el Menú de Herramientas. Al resto lo puedes quitar para tener más espacio y no ser objeto de este tutorial.
Asegúrate de que el Snap, en el menú View, no esta activado, entonces empieza a cortar.
Toma el Cuchillo (Slice) . Lo primero que cortaremos es el Menú. Cuando tus cortes no sean exactos usa el Slice Select que es el editor de cortes, o simplemente presiona Supr (delete) en tu teclado y vuelve a trazarlo.
Es recomendable usar continuamente El Zoom y Hand para moverte a través de la imagen.
Vemos que al trazar el primer corte automáticamente se generan otros cortes. Por esto es importante tomar en cuenta que entre menos colores y cortes usemos menor será el peso de nuestra página, osea que tardará menos en cargarse.
Luego de esto continuemos con el resto del menú en un nuevo corte, el cual también abarca un poco de fondo claro, para evitar crear mas celdas.
Las imágenes de un sólo color pueden ser sustituidas por color de fondo de celda en el [b]Editor HTML, lo que agiliza la carga de la página.
Con los cortes lo que se intenta es separar las zonas de un solo color de las que están compuestas por un conjunto de estos, como las imágenes con profundidad.
Aquí tenemos los cortes generados para esta plantilla.
Aquí esta la imagen hasta el momento, en mayor tamaño.
Esta imagen ha sido redimensionada. Haga clic en esta barra para ver la imagen completa.El tamaño de la imagen original es de 650x624 y pesa 27KB. |
Sigue..
Sin Comentarios.