ProxMoises
Usuario (Venezuela)
Aqui se enseña como crear una plantilla web basica desde 0 con photoshop. 1.-lo primero que vamos a hacer es crear un documento nuevo con dimenciones de 800*600 pixeles con fondo blanco o transparente. **si no tienes la opcion de reglas ve a ver/Reglas o preciona ctrl+R Creacion de Banner 2.-marcamos la guias dende ira cada una de las secciones como se puestra en la imagen Seleccionamos la opcion de lazo poligonal y marcamos la seleccion del banner 3.-creamos una capa nueva rellenamos la seleccion de cualquier color y le ponemos las propiedades de la capa como se muestra en la imagen presionamos OK despues nos vamos a seleccionar/modificar/contraer y lo contraemos 5 pixelesy precionamos en ok ahora presionamos suprimir en nuestro teclado sin perder la selecciona creamos una capa nueva la colocamos en medio de capa 1 y capa 2 en esta capa crearemos una fondo para el baner son libres de hacer el fondo que ustedes deseen no creare un fondo muy vistoso recuerden solo les enseño ustedes deciden los efectos que le pondran ahora quitemos la guia para eso vamos a ver/clear guides o limpiar guias 4.-creamos unas nuevas guias para marcar las posisiones de el cuadro de menu el de contenido y el de afiliacciones en una capa nueva crearemos con la herramienta de seleccion la cabesera del recuadro y la rellenamos de este color "c9c9c9" sin los parentesis ahora vamos a editar/transformar/distorcion precionando shif arrastramos el cuadrado de la esquina inferioir derecha y izquierda uno a la ves asta tener algo como esto hacemos lo mismo con los demas recuadros pero sin crear capa nueva hasta tener ago asi nos vamos a capa/estilo de capa y colocamos los siguiente nos vamos a seleccion despues modificar y contraer lo contraemos 2 pixeles y precionamos suprimir en nuestro teclado nos quedara algo asi sin perder la seleccion creamos una capa nueva y lo rellenamos con el mismo estilo del fondo del baner o con el efecto del borde del baner como en mi caso ahora terminemos con lo cuadros... para esto crearemos una capa nueva presten atencion a la imagen ya que en esta se mira donde deven de estar las selecciones como son varias guias aveces te confundes puedes seleccionar de uno por uno o los 2 a la vez solo recuerda que los 2 deven de estar en una misma capa ahora rellenamos de cualquier color y colocamos las siguientes propiedades de la capa presionamos ctrl+D y marcamos el cuadro del centro... creamos una nueva capa y colocamos las mismas propiedades Bueno ya solo falta colocarle los ultimos retoques (Botones, imagenes y detalles) recomiendo no colocar texto ya que eso retardaria la carga de la paguina es recomendable colocarlo en el codigo html vallamos a ver/limpiar guias o clear guides para crear los botones creamos las siguientes guias ***nota solo crearemos 3 botones la manera mas rapida de crear los botones es la siguiente... creamos una nueva capa y seleccionamos los 3 botones como se muestra en la imagen utilizamos es el gradien y rellenamos la seleccion creamos una nueva capa y utilisando el lapiz en color blanco y con un ancho de 1 px lo pasamos por encima de las lineas de adentro creamos una mascara y con el gradian la pasamos de derecha a izquierda vamos a ver/limpiar guias y nos quedara algo así ahora colocamos el texto deseado guardamos el documento con el nombre de (index) sin parentesis ahora vamos a capa/flatten imagen no recuardo tradiccion les dejo la imagen nos debio de haber quedado una sola capa llamada fondo Eso es todo Espero que les seal util.
Crearemos unos Elegantes botones con colores y estilo Pastel utilizando Adobe Photoshop. Primero creamos un nuevo documento “Archivo > Nuevo” en mi caso lo hice de 600 x 200px como se ve en la imagen. Una vez listo el archivo, presiona “Ctrl + R” para activar las reglas y crear las guías necesarias para lograr el tamaño del botón exacto a lo que deseas, en mi caso es de 125px de ancho por 45px de alto. Ahora que tenemos la selección del tamaño adecuado vamos a redondear las puntas de la misma, esto lo logramos desde el comando “Selección > Modificar > Redondear” y ahí seleccionamos dos pixeles de Radio. Creamos una nueva capa, a la cual yo he nombrado “Botón Superior”. Sobre esta rellenamos con color blanco nuestra selección, puedes hacerlo con la herramienta bote de pintura o como lo desees. Presiona “Ctrl + D” para deseleccionar. A continuación vamos a trabajar en la parte superior de nuestro botón y lo haremos con “Estilos de Capa”. Haz dos clic sobre la capa “Botón Superior” para que aparezcan los “estilos de capa” o entra desde “Capa > Estilos de Capa”. En las imágenes te presento los cambios necesarios y el resultado. Resplandor Interior Superposición de Degradado Trazo Posicionados sobre la capa del botón vamos a centrarlo con respecto al documento, para ello es necesario crear una selección que abarque todo el documento, esto lo logramos presionando “Ctrl + A”. Luego seleccionamos la herramienta mover y en las opciones de esta herramienta presionamos “Alinear centros verticales” y “Alinear centros horizontales” y listo. Presiona “Ctrl + D” para quitar la selección. http://www.artecreativo.net/sp/727/07-boton-pastel-mover-alinear.gif Ahora duplicamos la capa “botón superior” y colocamos la copia por debajo de esta, le cambiamos el nombre, en mi caso le he puesto “botón inferior” tal cual lo vemos en la siguiente imagen. Posiciónate sobre esta nueva capa y aplícale los estilos de capa que vemos en las siguientes imágenes: Sombra Paralela Superposición de colores Trazo Cuando sea necesario, de acuerdo al uso que le des al botón, toma la “herramienta de texto” y escribe sobre estelo que deseas, podrías aplicar una pequeña sombra al texto con estilos de capa y listo. Este es el resultado final, también podemos ver que se puede aplicar a un sinfín de formas diversas. Final y otras opciones Otras opciones: También podrías mover uno o dos pixeles a la derecha o abajo la capa inferior, de manera que le des una apariencia de inclinación. Puedes jugar con el ángulo de la sombra en la capa inferior o el ángulo del degradado en la capa superior y obtendrás resultados diversos sin mayor complicación. Esperamos que te sea de utilidad este sencillo tutorial photoshop.
En este tutorial veremos como diseñar un Reproductor de Audio con Photoshop explicado paso a paso. Seguimos adelante con esta pequeña serie de tutoriales: “Elementos de diseño para Interfaces Web”. En esta ocasión vamos a crear un “Reproductor de Audio Simple” y aunque es simple (sencillo) tiene algunos detalles que debemos cuidar mucho para lograr un aspecto elegante y moderno. Es importante realizar los tres primeros tutoriales de esta serie para avanzar paulatinamente en el conocimiento y manejo de las técnicas anteriores, algunas de las cuales ya no se detallan en este tutorial. Base del Reproductor Iniciaremos creando un nuevo archivo de 500px X 250 px para nuestro diseño. En la siguiente imagen podemos ver los parámetros usados: Al igual que en tutoriales anteriores usaremos las “Formas Personalizadas” del photoshop para crear la base de nuestro Reproductor de Audio, en este caso usaremos la “Herramienta Rectángulo Redondeado” con un radio de 5px. Nuestro reproductor tendrás unas dimensiones de 260px de ancho por 40px de alto, utiliza las reglas y guías para apoyarte. En la captura vemos que la forma tiene un color gris, sin embargo no es importante pues eso cambiará. El siguiente paso es aplicarle un estilo de capa que nos simule el volumen y sombra del reproductor de Audio. En este caso vamos a aplicar las opciones de “Sombra paralela, Superposición de Degradado y Trazo”. Usa los mismos parámetros de las siguientes capturas. Sombra Paralela Superposición de Degradado Trazo Tenemos lista nuestra base del Reproductor de Audio Iconos del reproductor El siguiente paso será agregarle los varios iconos que llevará nuestro reproductor de audio. El primero de ellos será el de Play. Para ello lo primero que debemos hacer es ajustar crear una nueva guía para crear el espacio cuadrado donde irá nuestro triángulo del Play. En la captura podemos ver claramente esto. Utiliza nuevamente las “Formas Personalizadas” del programa para crear el pequeño triángulo, el cual será de color gris oscuro (666666). El siguiente paso es crea una línea divisoria con el mismo estilo de nuestro reproductor de audio. Esto se logra fácilmente con la herramienta de “selección rectangular” con la cual formaremos una línea de 1px de ancho que cruza nuestra barra completa, pero sin tocar los bordes. Sobre una nueva capa rellenamos de color blanco (ffffff). Luego con esa misma selección pero movida apenas 1px a la derecha la rellenamos de un color gris oscuro (666666). Se entiende muy bien si vemos la siguiente imagen. Bajamos la opacidad de esta capa a un 75% para que luzca mucho más adecuada. Obtendremos el siguiente resultado: Agreguemos ahora el botón de audio y esto lo haremos con una “Forma Personalizada” que trae el mismo photoshop. Es preciso aplicar un “Estilo de capa” de “Sombra Interior” para aumentar la intensidad de este icono. Sombra Interior Y así es como luce hasta ahora el “Reproductor de Audio” el cual ya empieza a tomar forma. El siguiente paso es agregar las barras del audio, las cuales las hacemos de la misma manera que hicimos la separación del botón Play, es decir usando la herramienta de “Selección rectangular”. Para que se note hemos rellenado en esta captura con un gris oscuro, sin embargo lo correcto es rellenar con un color blanco (ffffff). Una vez que tenemos las barras del audio listas voy a aplicar un par de estilos de capa. El primero es el de “Superposición de colores” usando como color el blanco (ffffff) esto solo para cambiar el tono que, como habíamos dicho, era mejor de color blanco. También se aplica un trazo de 1px como lo vemos en la otra captura. Superposición de colores Trazo Así es como luce nuestra imagen con sus tres iconos: Barra de Avance y Detalles Finales Primero he movido un poco el icono de las barras del audio, para que me dejen más espacio para el fondo de la barra de avance. Luego he agregado nuevas guías para basarme en ellas y así crear este elemento de manera exacta. Esta barra la haremos con la “Herramienta Rectángulo Redondeado” con un color gris oscuro (666666). Esta barra mide 140px de ancho por 4px de alto. Haremos ahora una segunda barra con un color naranja (ff6600) y los mismos parámetros de la anterior, esta es para simular el avance que llevaría nuestro audio. Para generar la ilusión de que la línea naranja va incrustada en la gris le aplicamos un “Estilo de capa de trazo” con los parámetros que muestra la siguiente captura: Por decoración, y como un elemento opcional, hemos agregado un pequeño globo que nos indica el tiempo transcurrido y hemos coloreado de naranja (ff6600) el interior de tres de las 5 barras de audio. Y listo, hemos terminado nuestro Reproductor de Audio Simple.
Para que la animación trabaje como un segundo esta del botón será necesario agregar unas cuantas líneas de código action script. Tutorial Flash 8 Animación de Menú para Sitio Web. En el siguiente tutorial encontraras como realizar una animación en clip de película, esta animación simulará que es un botón. Sin embargo, el botón estará escondido como un botón invisible (zona activa de un símbolo botón). Para que la animación trabaje como un segundo esta del botón será necesario agregar unas cuantas líneas de código action script. Que te párese si ¿comenzamos? con el tutorial y así tengas una nueva opción de menú web. 1-. Comenzar por hacer un documento con propiedades (ctrl. + J). a)-. Las dimensiones son 300 * 60 píxeles de ancho y alto. b)-. Utilizar como color de fondo para el documento #666666. c)-. Colocar una velocidad de fotograma de 60 fps. 2-. Crear el primer símbolo (ctrl. + F8) a)-. Nombrarlo botón inicio. b)-. Seleccionar Clip de película en la opción Tipo. 3-. Ubicado en el símbolo botón inicio, cambiar el nombre de la capa por el de botón bg. a)-. Hacer visible la barra de Información (ctrl. + I) Alinear & Información & Transformar. b)-. Dibujar un cuadro (R) con dimensiones 140.0 * 40.0 de ancho y alto. c)-. Colocar del rectángulo en coordenadas X = 0.0 y Y = 0.0. Nota seleccionar la casilla del centro en la parte macada con el asterisco. 4-. Insertar un fotograma clave (F6) en el frame # 10. a)-. Cambiar el color del rectángulo, tal y como se muestra en la imagen. 5-. Seleccionar un fotograma entere el # 1 y el # 9. a)-. En la barra de propiedades seleccionar la opción Animar Forma. 6-. Insertar una segunda capa y cambiar el nombre por el de texto. a)-. Luego introducir un campo de Texto estático con la palabra INICIO. b)-. Colocar el campo de texto en coordenadas X = 0.0 y Y = 0.0. 7-. Insertar un fotograma clave (F6) en el frame # 10. a)-. Abrir la barra de Transformar (ctrl. + T) Alinear & Información & Transformar. b)-. Seleccionar la casilla de Restringir después colocar 150 %, con esta acción crecerá un poco el texto. 8-. Seleccionar el fotograma # 1 de la capa texto. a)-. En la barra de Propiedades seleccionar en la opción Animar Forma. 9-. Hacer visible la ventana Biblioteca (F11). a)-. Hacer clic con el botón derecho del ratón sobre el símbolo botón inicio. b)-. En el menú desplegado seleccionar la opción Duplicar. 10-. Al duplicar el símbolo aparecerá esta opción, esto es para cambiar el nombre del símbolo solamente. a)-. Luego cambiar el nombre por el de botón galería. 11-. Abrir el símbolo botón galería desde la biblioteca haciendo doble clic sobre este símbolo. a)-. Seleccionar el fotograma # 1 de la capa texto y cambiar el texto por el de GALERÍA. b)-. Colocar el texto en coordenadas X = 0.0 y Y = 0.0. 12-. Cambiar el texto del fotograma # 10 por el de GALERÍA. b)-. Colocar el texto en coordenadas X = 0.0 y Y = 0.0. Nota repetir los pasos 9, 10, 11 y 12 para duplicar el número de símbolos y así obtener un menú más completo inicio, galería, contacto, servicios, clientes etc. 13-. Regresar a la Escena y cambiar el nombre de la capa por el de botones. a)-. Arrastrar desde la biblioteca el símbolo botón inicio. b)-. Colocar como Nombre de instancia menu_mc1 c)-. Colocar el símbolo en coordenadas X = 5.0 y Y = 10.0. 14-. Arrastrar desde la biblioteca el símbolo botón galería. a)-. Colocar como Nombre de instancia menu_mc2. b)-. Colocar el símbolo en coordenadas X = 155.0 y Y = 10.0. Nota si decides crear más botones colocar como nombre de instancia menu_mc3, menu_mc4, menu_mc5, menu_mc6 etc. Este código solamente soporta 5 botones. 15-. Crear un nuevo símbolo (ctrl. + F8), nombrarlo zona activa. a)-. El la opción Tipo seccionar Botón. 16-. Insertar un fotograma clave (F6) en el frame Zona activa. a)-. Dibujar un rectángulo (R), sin borde y no importa cual sea el color de relleno. b)-. Las dimensiones del rectángulo son 140.0 * 40.0 de ancho y alto. c)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0. 17-. Regresar nuevamente a la Escena e insertar una capa más y cambiar el nombre de la capa por el de botón invisible. a)-. Arrastrar desde la biblioteca el símbolo zona activa y colocarlo en coordenadas X = 5.0 y Y = 10.0. 18-. Seleccionar el símbolo botón no el fotograma de la capa botón invisible. a)-. Abrir la barra de Acciones – botón e insertar el siguiente código action script. on (rollOver) { _root.boton_mc1 = true; } on (rollOut) { _root.boton_mc1 = false; } 19-. Arrastrar desde la biblioteca el símbolo zona activa en la capa botón invisible. a)-. Colocar el símbolo en coordenadas X = 155.0 y Y = 10.0. Nota arrastrar el símbolo zona activa sobre cada uno de los botones que tengas en la Escena. 20-. Seleccionar el símbolo botón de la capa botón invisible no el fotograma. a)-. Abrir la barra de Acciones – botón e insertar el siguiente código action script. on (rollOver) { _root.boton_mc2 = true; } on (rollOut) { _root.boton_mc2 = false; } 21-. Insertar una tercera capa y cambiar el nombre por el de código. a)-. Seleccionar el fotograma, abrir la barra de Acciones – fotograma e insertar el siguiente código action script. _root.menu_mc1.onEnterFrame = function() { if (boton_mc1) { _root.menu_mc1.nextFrame(); } else { _root.menu_mc1.prevFrame(); } }; _root.menu_mc2.onEnterFrame = function() { if (boton_mc2) { _root.menu_mc2.nextFrame(); } else { _root.menu_mc2.prevFrame(); } }; _root.menu_mc3.onEnterFrame = function() { if (boton_mc3) { _root.menu_mc3.nextFrame(); } else { _root.menu_mc3.prevFrame(); } }; _root.menu_mc3.onEnterFrame = function() { if (boton_mc3) { _root.menu_mc3.nextFrame(); } else { _root.menu_mc3.prevFrame(); } }; _root.menu_mc4.onEnterFrame = function() { if (boton_mc4) { _root.menu_mc4.nextFrame(); } else { _root.menu_mc4.prevFrame(); } }; _root.menu_mc5.onEnterFrame = function() { if (boton_mc5) { _root.menu_mc5.nextFrame(); } else { _root.menu_mc5.prevFrame(); } }; Con esta acción se da por concluido el tutorial, el ejemplo de SWF que aquí presento se le realizaron unos cuantos cambios para representar un menú con secciones. P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado. Si agregas más botones cambiar en los pasos 18 y 20 el número del _root.boton_mc por el número consecutivo o sea _root.boton_mc3, _root.boton_mc4, _root.boton_mc5. Recordar que el código aquí expuesto solamente soporta 5 botones pero si deseas agregar más botones.
