Diseño de Interfaz Web 2.0 en Photoshop.
Comprender el tutorial a continuación es comprender su técnica, con él puede dibujar una interfaz gráfica de usuario para un sitio web. Navegación lateral, botones, encabezados, por ejemplo. Todo el estilo web 2.0.
Lanzar un nuevo lienzo; cualquier tamaño. Algo más grande que 450x300px sería bueno. Selecciona el Herramienta Rectangular Redondeada y dibuja un rectangular tan grande como se muestra en la imagen de arriba.
Haga doble clic en la capa del Rectángulo Redondeado para iniciar el Opciones de mezcla. Modificar los ajustes para los siguientes estilos..
Sombra paralela
Opacidad: 31% Distancia: 1px Extensión: 0% Tamaño: 5px
Bisel y relieve
Profundidad: 100% Tamaño: 0px Suavizado: 0px
Superposición Gradiant
Haga doble clic en Gradiant y establezca los siguientes puntos de parada. Ubicación: 0%, # 1378cd Ubicación: 100% # 4da5f0
Carrera
Tamaño: 5px Posición: Color interior: # 54abf6
Vamos a insertar algún texto, un lema, URL o algo. Téngalo en el centro y alinee a la derecha para que el logotipo pueda residir en el lado izquierdo más adelante. Vamos a estilizar el texto. Estoy usando Lucida Sans Unicode; 55 puntos; suave; -120 para el seguimiento de caracteres (espacio entre letras). Haga doble clic en la capa de texto y configure lo siguiente en Opciones de mezcla.
Gradiente de superposición
Haga doble clic en Gradiant y establezca los siguientes puntos de parada. Ubicación: 0%, # 9ec7eb Ubicación: 100% ecf6ff
A continuación, deberá insertar el logotipo en el lado izquierdo del texto. Usaré un rectángulo redondeado con un radio de 5px para representar el logotipo. Aquí esta la Opción de fusión Ajustes para el rectangular redondeado..
Sombra interior
Opacidad: 45% Distancia: 0px Tamaño: 43px;
Bisel y relieve
Profundidad: 100% Tamaño: 0px Suavizado: 0px Opacidad de modo de resaltado: 50% Opacidad de modo de sombra: 100%
Superposición Gradiant
Haga doble clic en Gradiant y establezca los siguientes puntos de parada. Ubicación: 0% # 0e2f4a Ubicación: 47% # 001a31 Ubicación: 48% # 002545 Ubicación: 100% # 0f4b7f
Carrera
Tamaño: 5px Haga doble clic en Gradiant y establezca los siguientes puntos de detención. Ubicación: 0% # 1468af Ubicación: 100% # 50abf8
Vamos a darle un poco de efecto brillante. Sostener CTRL y haga clic izquierdo en redondeado rectangular Miniatura de la capa. Cuando se selecciona todo el rectángulo redondeado, se cambia a Herramienta Marco Rectangular, sostener ALT y dibuja la segunda mitad del área seleccionada; como la imagen de arriba.
Crear una nueva capa; Arrástrelo hacia arriba para que quede encima de todas las capas; rellene la parte seleccionada con blanco [#ffffff]; cambiar la opacidad al 15%.
El tutorial terminará aquí. Cómo vas a hacer uso de este diseño depende totalmente de ti. Al cambiar ligeramente el tamaño y los colores, se puede utilizar como encabezado web o botones. Aquí hay un ejemplo.
Encabezado de página web
Botones de sitio web
