Hogar › Servicios › Diseñador web para mejorar en Photoshop. Por qué Photoshop se considera el mejor producto de Adobe para diseño web. Configuraciones de fusión en Photoshop

Diseñador web para mejorar en Photoshop. Por qué Photoshop se considera el mejor producto de Adobe para diseño web. Configuraciones de fusión en Photoshop

Adobe Photoshop- este es el mejor programa del mundo procesamiento digital imágenes. Durante muchos años hasta ahora es software es lo mas mejor amigo diseñadores web de todo el mundo para experimentar y explorar nuevos horizontes de visualización digital.

Sin embargo, a veces requiere mucho tiempo y esfuerzo, especialmente cuando se trata de sintonia FINA efectos en Photoshop para que el diseño final se vea realmente genial. Complementos de Photoshop a menudo ayudan a los desarrolladores a hacer su trabajo de manera más eficiente.

Pero elige buenos complementos No es tan fácil y puede llevar algún tiempo. Mantén la calma: lo hicimos especialmente para ti excelente selección Complementos gratuitos que facilitarán enormemente el proceso de creación de un diseño.

¿Qué es a veces lo más difícil de hacer a la hora de crear un diseño? Elige el correcto combinación de colores para que tu diseño luzca armonioso. El complemento Kuler de Adobe le ayudará en este asunto de la mejor manera posible, seleccionando todos los tonos adecuados para usted y paleta de colores según el color base.

2. Complemento de fuentes web

Este complemento gratuito, que le permite utilizar fuentes WebINK y Google Fuentes web en la creación de diseños de sitios web. Este gran herramienta da fácil acceso para utilizar más de 1000 fuentes web WebINK directamente en Adobe Photoshop. Para obtener el complemento tendrás que descargarlo e instalarlo. versión de prueba Suitcase Fusion 5 es un administrador de fuentes profesional de Extensis. Actualmente complemento web La fuente se puede utilizar en Adobe Photoshop CS5, Adobe Photoshop CS5.1, Adobe Photoshop CS6, Adobe Photoshop CC (versión 14), Adobe Creative Suite 5.5.

3.GuíaGuía

Dado que crear una cuadrícula en Photoshop a veces puede suponer mucho trabajo, la mayoría de los diseñadores simplemente la miran y arrastran las guías al azar. Este es un gran complemento que proporciona una herramienta para crear columnas, filas, medianas y niveles basicos. si tienes elección activa En su documento de Photoshop, GuideGuide creará una cuadrícula que usted especifique dentro de los límites de la selección.

4. Flaticon.com

Flaticon.com es una plataforma popular con más de 35 mil íconos que cumplen con las últimas tendencias de diseño. Y hace algún tiempo la plataforma desarrolló complemento especial para Photoshop para que los diseñadores puedan encontrar rápidamente los iconos que necesitan sin salir de su entorno de trabajo. Creado específicamente para diseñadores y desarrolladores, Flaticon es genial proyecto libre, que definitivamente deberías ver. Puede encontrar los iconos necesarios, seleccionarlos y utilizarlos en formato vectorial. También puedes personalizarlos como desees.

5.CSS3PS

6. Córtame y rebana

Córtame y rebaname - complemento de adobe Photoshop CS6 desarrollado por Daniel Peruho. La herramienta aumenta a proceso moderno cortando con un gran número características poderosas. Las características de este complemento incluyen tomar un grupo de capas y tratarlo como un solo objeto. Después de eso, recorta los píxeles adicionales y exporta el grupo a un archivo de imagen.

7. Patrones sutiles

Su sitio web o diseño necesita detalles imagen de fondo? En este caso, puede utilizar el complemento SubtlePatterns según sus necesidades. Viene con una gran variedad de plantillas y es bastante fácil de usar. Por cierto, casi todas las plantillas fueron creadas por los propios usuarios, por lo que ni siquiera puedes dudar de su calidad. Incluso si elige componentes sofisticados para la plantilla, puede estar seguro de que no distraerán a los visitantes del sitio del contenido principal.

8. Eskeuomorfismo

¿Le resulta difícil convertir sus sitios PSD esqueuomórficos en diseño plano? Entonces prueba a utilizar esta herramienta para olvidarte de este problema de una vez por todas. Este es un excelente complemento que puedes descargar y usar fácilmente para eliminar efectos innecesarios en las capas de su diseño.

9. SiteGrinder

¿Cómo crear páginas web desde PSD? Utilice SiteGrinder. La herramienta te ayudará a convertir tus archivos PSD en páginas web. Con SiteGrinder, no es necesario cortar ni escribir código. Si alguna vez ha tenido el placer de trabajar con Divine Elemente, notará casi de inmediato que este complemento tiene una facilidad de uso casi similar.

10. MaletaFusion

Si estás buscando un complemento que te ayude con la administración de fuentes, entonces esta herramienta es lo que necesitas. Puedes ver las fuentes que planeas usar en tu proyecto y también te ayuda a organizarlas y abrirlas con facilidad. El complemento viene con un conjunto de fuentes entre las que puedes elegir la que más te convenga. de la mejor manera posible en su diseño.

¡¡¡Todo lo mejor para ti!!!

En este tutorial usaremos Adobe Photoshop para diseñar una interfaz web que pueda usarse para cualquier sitio web móvil. usaremos varios metodos, incluidas formas, máscaras, íconos, fuentes y mucho más que se pueden aplicar fácilmente a su desarrollos propios en diseño web.
Imagen final.

Materiales de lección:

Paso 1. Comencemos creando un nuevo documento. en el menú Archivo - Nuevo(Archivo - Nuevo) establezca el ancho y el alto en 1100 px, resolución 72, fondo blanco.

A continuación, necesitamos crear dos guías que actuarán como bordes de nuestra página.
Seleccionar menú (Ver - Nueva Guía). Para la primera guía, establezca Orientación: vertical y posición 70 píxeles. (Orientación a Vertical y Posición 70 px).
Para la segunda guía, seleccione el menú nuevamente. Ver - Nueva guía(Ver - Nueva Guía) y poner Orientación - Vertical y posición 1030 píxeles.

Y así, hemos preparado un espacio para nuestra página web con un ancho de 960 px.

Paso 2. El siguiente paso es preparar el fondo. Seleccione una herramienta Llenar(Herramienta Bote de pintura (G)), establece el color primer plano en 1e1e1e. Luego haga clic en cualquier parte del lienzo para aplicar el color a la capa de fondo.

Agreguemos textura a nuestro fondo. Hagámoslo en el menú. Filtro - Ruido - Agregar ruido(Ruido > Agregar ruido). Poner radio(Cantidad) 2,5 y haga clic en Aceptar.

Paso 3. A continuación vamos a resaltar parte superior nuestra pagina. Este movimiento atraerá la atención principal hacia esta área, en otras palabras, habrá atención.
Seleccione una herramienta Cepillar(Herramienta Pincel), cambie el tamaño a 400 píxeles, Dureza 0%

Crear nueva capa y asígnele el nombre "Spotlight".

Cambie el color de primer plano a "FFFFFF" (blanco) y cree un círculo en la parte superior del documento usando la herramienta Cepillar(Cepillar).

Para encajar esta capa en el fondo, también le agregaremos un poco de ruido seleccionando Filtro - Ruido - Agregar ruido(Filtro>Agregar ruido). Establezca estas configuraciones. Efecto(Cantidad) 20 y seleccione la opción Monocromo(Monocromático) y haga clic en Aceptar.

Para suavizar este destello, seleccione Filtro - Desenfoque Desenfoque Gaussiano(Filtro-Desenfoque-Desenfoque gaussiano).
Establezca el radio en 50,0 y haga clic en Aceptar.

Finalmente establezca la opacidad de la capa. Destacar alrededor del 25%.

Paso 4. Es hora de agregar elementos gráficos. Descargar imagen del iPhone. Tenga en cuenta que puede utilizar cualquier teléfono que coincida con su tareas específicas(Android, Blackberry, etc...).
Después de la descarga, abra Archivo PSD en Photoshop. Expanda la carpeta "iPhones", haga clic en clic derecho Coloque el mouse en la carpeta “iPhones” y seleccione Grupo duplicado(Grupo Duplicado). En la ventana que aparece, asigne un nombre al grupo (yo usé "iPhone") e indique el documento en el que está trabajando actualmente y haga clic en Aceptar. Una vez que hayas terminado, cierra el PSD del iPhone.

Nuestra posición primer iPhone toca la guía izquierda y aproximadamente a 100 px de la parte superior del lienzo del documento.

Ahora es el momento de configurar una captura de pantalla en tu iPhone. La forma más sencilla de hacer esto es colocar una captura de pantalla del menú del teléfono tomada de Internet y colocarla en la parte superior del grupo "iPhone", ajustar el tamaño al tamaño de la pantalla.

Duplicar un grupo de iPhone seleccionando el menú Capas - Grupo Duplicado(Capa - Grupo duplicado), asígnele el nombre "iPhone 2" y haga clic en Aceptar en el cuadro de diálogo.
en el menú Edición - Transformación - Escalado(Editar-Transformar-Escalar) cambia el tamaño del segundo teléfono. En la configuración, ingrese 107.0% para ancho y alto. La posición de este iPhone será de aproximadamente 50 px desde el borde superior y 200 px desde la guía izquierda.

Repita el paso de reemplazo de pantalla en el "iPhone 2" como se mencionó anteriormente.

Paso 5. El toque final para nuestros iPhones es crear su reflejo. Seleccione dos grupos: "iPhone" y "iPhone 2", luego en el menú Capas - Capas duplicadas(Capa - Duplicar capas) y haga clic en Aceptar. Luego el menú de nuevo. capas - Fusionar capas(Capa - Fusionar capas).
A continuación, debemos voltear nuestros teléfonos para crear un reflejo. Ir al menú Edición - Transformar - Voltear verticalmente(Editar-Transformar-Voltear verticalmente). Ajusta el reflejo a los teléfonos originales.

Agregue una máscara de capa haciendo clic en el icono de máscara de capa en el panel Capas.

Seleccione una herramienta Gradiente (Herramienta Degradado(G)) de negro a blanco y dibuja una línea de arriba a abajo a lo largo de la capa de reflexión.

Finalmente baja la opacidad de esta capa al 30%.

Paso 6. A continuación debemos agregar los detalles principales a la derecha de nuestros teléfonos. Antes de comenzar, agreguemos otra guía para que podamos alinear elementos de diseño futuros con ella. Seleccionar menú Ver - Nueva guía(Ver - Nueva Guía). Para esta guía, configure Orientación - Vertical y posición 550 píxeles. (Orientación a Vertical y Posición 550 px).
Aproximadamente 100 píxeles. desde el borde del documento agregaremos un logo. El autor utilizó su propio logo. Puede simplemente utilizar texto o insertar su logotipo.

Debajo del logotipo agregaremos texto que describa nuestra aplicación. Seleccione una herramienta Texto(Herramienta Texto horizontal) y dibuja un rectángulo entre las guías central y derecha. Establezca las siguientes configuraciones para el texto:
Fuente(Fuente): Helvetica Neue
Tamaño(Tamaño): 16 píxeles
Estilo(Estilo): Regular
Principal(Principal): 26 px
Seguimiento(Seguimiento): -25
Suavizado(Suavizado): Nítido Claro
Color(Color): #FFFFFF

Paso 7 A continuación, crearemos un botón para los visitantes que quieran comprar nuestro producto. Para esto usamos la herramienta (Herramienta Rectángulo redondeado (U)) Dibuja un rectángulo con la siguiente configuración 240x75px 4px, donde 4 es el radio de la esquina. Alinee el botón del lado izquierdo con la guía central y bájelo debajo del texto unos 45 px.

Ahora apliquemos algunos estilos de capa. Haga doble clic en la capa en el panel Capas y use las capturas de pantalla a continuación para la configuración.

Inserta el ícono de Apple y cambia su opacidad al 30%.

A la derecha del ícono, agregue más texto, configuraciones a continuación:
Fuente(Fuente): Helvetica Neue
Tamaño(Tamaño): 11 px y 24 px
Estilo(Estilo): Negrita
Principal(Principal): 26 px
Seguimiento(Seguimiento): -25
Suavizado(Suavizado): Nítido Claro
Color(Color): #FFFFFF

Agreguemos estilos de capa al texto. Utilice la configuración de la captura de pantalla.

Cambie la opacidad de la capa de línea al 15%, duplíquela seleccionando el menú Capas - Duplicar capa(Capa>Duplicar capa) y haga clic en Aceptar. Cambia el color de esta línea a #000000 (negro) y cambia la opacidad de la segunda capa de línea al 10%. Entonces muévete linea negra 1px a la izquierda de la línea blanca.

El último elemento de este botón es un icono que apunta a Descargar. usemos la herramienta Elipse (Herramienta Elipse) y dibuja un círculo de 25px de diámetro.

Agregue los siguientes estilos de capa para la elipse:

Finalmente toma la herramienta. figura libre(Herramienta de forma personalizada) y seleccione una flecha (yo uso la forma "Flecha 9"), dibuje una flecha de color blanco de 10 píxeles de ancho y colóquela dentro del círculo.

Paso 8 Creemos una figura que muestre el precio del producto. toma la herramienta Rectángulo con esquinas redondeadas(Herramienta Rectángulo redondeado (U)), radio de esquina 4 px. El rectángulo debe superponerse al botón de descarga y tener 52 píxeles de alto y cualquier ancho superior a 100 píxeles.

Cambia el color de este rectángulo a " 2B2B2B" y muévalo debajo del botón cargar en el panel de capas.

Ataque

Ahora podemos agregar información de precios. Para hacer esto, crearemos dos campos de texto separados. Cada uno tendrá su propio estilo.
Para el primer campo de texto, aplique la siguiente configuración:
Fuente(Fuente): Helvetica Neue
Tamaño(Tamaño): 19 píxeles
Estilo(Estilo): Negrita
Suavizado(Suavizado): Nítido Claro
Color(Color): #FFFFFF

Para el segundo campo de texto utilizamos la siguiente configuración:

Paso 9 Pasemos al final de nuestra página, donde necesitamos crear un separador. Para ello utilizaremos la misma técnica que utilizamos para crear el separador en el botón de descarga.
Para hacer esto, seleccione una herramienta. Línea(Herramienta Línea) y manteniendo presionado Tecla Mayús, dibuje una línea desde la guía izquierda hacia la derecha, luego cambie el color de la línea a “000000” (negro).

Cambie la opacidad de esta línea al 80%, duplique esta capa seleccionando el menú Capas - Duplicar capa(Capa>Duplicar capa) y haga clic en Aceptar. Cambie el color de esta línea a #FFFFFF" (blanco) y cambie la opacidad de la segunda capa de línea al 10%. Luego mueva la línea blanca 1 px hacia abajo desde la línea negra.

Paso 10 En la sección debajo del separador de filas que acabamos de crear, agregaremos dos columnas para capturas de pantalla y funciones. Comencemos con capturas de pantalla. Selecciona una captura de pantalla de tu iPhone y pégala, ajusta el tamaño y colócala cerca de la guía izquierda.

Seleccione esta capa en el panel Capas y haga clic en el botón "Agregar máscara" dos veces para agregar una máscara vectorial. Ahora seleccione una herramienta Rectángulo con esquinas redondeadas(Herramienta Rectángulo redondeado (U)), cambie el radio de la esquina a 6px y cree un rectángulo con un tamaño de 175x120px.

En estilos de capa agregue un rectángulo Ataque(Trazo), configuración en la captura de pantalla.

Repita estos pasos para todas sus capturas de pantalla y déles un espacio de 35 píxeles entre sí.

Paso 11 Dibujemos un separador para las capturas de pantalla creadas. Dibujemos una línea de 1 px. desde la captura de pantalla superior a la inferior y coloque este separador a la derecha de ellos por aproximadamente 55 píxeles. Cambie el color de la línea a "FFFFFF" (blanco) y establezca la opacidad al 5%.

Paso 12 Ahora agreguemos algo de texto con información. La posición del texto está a 55 píxeles de la línea separadora izquierda. Para texto utilizamos la siguiente configuración:
Fuente(Fuente): Helvetica Neue
Tamaño(Tamaño): 24 píxeles
Estilo(Estilo): Regular
Seguimiento(Seguimiento): -10
Suavizado(Suavizado): Nítido Claro
Color(Color): #FFFFFF

Ahora creemos una lista de nuestras funciones y colóquela debajo del título. Cree un campo de texto, agregue cinco o seis líneas y asígneles la siguiente configuración:
Fuente(Fuente): Helvetica Neue
Tamaño(Tamaño): 15 píxeles
Estilo(Estilo): Regular
Principal(Principal): 28 px
Seguimiento(Seguimiento): -10
Suavizado(Suavizado): Nítido Afilado
Color(Color): #8d8c90

Repita los pasos anteriores para agregar otro bloque de texto con los requisitos para la aplicación.

Paso 13 Para resaltar de alguna manera la lista de funciones de la aplicación, puedes utilizar algunos trucos. Movamos este bloque de texto 25 píxeles hacia la derecha.

Usa la herramienta Elipse(Herramienta Elipse) con un diámetro de 9 píxeles. y dibuja un círculo con el color "bce086".

Agregue los siguientes estilos de capa para este círculo:

Paso 14 Duplica estas tazas en el menú. Capa - Duplicar capa(Capa> Duplicar capa) y colóquelo como en la captura de pantalla a continuación.

Paso 15 Crea otro separador usando la técnica que usamos anteriormente.

Paso 16 Ahora necesitamos agregar algunos enlaces útiles en la parte inferior. Primero crearemos cuatro cuadros de texto, uno al lado del otro, que contendrán estos enlaces.
Comience creando un cuadro de texto de aproximadamente 160x40 px de tamaño. Agregue texto y repita 3 veces.

A continuación se muestra un ejemplo de texto que puede utilizar:
Caja 1: Siga a @MyCompany en Twitter para obtener noticias y actualizaciones.
Cuadro 2: Para ayuda y apoyo.
Cuadro 3: Información del producto.
Cuadro 4: Copyright 2011 "Mi Empresa", LLC.

Utilice estas configuraciones para texto:
Fuente(Fuente): Helvetica Neue
Tamaño(Tamaño): 12 píxeles
Estilo(Estilo): Regular
Principal(Principal): 20 px
Suavizado(Suavizado): Nítido Afilado
Color(Color): #5555552

Debes haber notado que bloques de texto no están alineados, no te preocupes, nos ocuparemos de eso en el siguiente paso.

Paso 17
Para solucionar nuestro problema de alineación, colocaremos los bloques de texto en un grupo llamado "Pie de página".
Primero, la posición del primer campo de texto está a 55 píxeles de la guía izquierda y el último campo toca la guía derecha.

Ahora seleccione las cuatro capas de texto en la carpeta. "Pie de página", activa la herramienta Emocionante(Herramienta Mover) y haga clic en el botón Alinear centros verticalmente (Alinear verticalmente centros) y luego haga clic en Alinear centros horizontalmente(Distribuir centros horizontales).

Paso 18 Ahora podemos agregar algunos íconos personalizados para representar nuestros enlaces. Seleccione una herramienta Elipse(Herramienta Elipse (U) y crea un círculo, de 36px de diámetro, colócalo al lado del primero. campo de texto. Cambia el color de este círculo a "FFFFFF" (blanco). Ahora seleccione Capa - Rasterizar capa(Capa - Rasterizar capa).

Agrega un ícono de Twitter al círculo creado que puedes tomar

Si recién estás comenzando a aprender Photoshop para diseño web, comienza bien. Te contaré sobre la configuración de Photoshop que debes aplicar para que nada en la web se desvanezca o se desvanezca.

Abra Photoshop, después de la instalación se verá así:

Vaya a la pestaña "ventana" -> "espacio de trabajo" ( ambiente de trabajo) y seleccione la tipografía (“tipografía”)

Verás un panel como este.

Normalmente cierro el panel "estilo de párrafo"; para hacer esto, debes hacer doble clic y aparecerá el panel de caracteres y párrafos (trabajando con fuentes). Por supuesto, a la izquierda, la barra de herramientas.

Presione Ctrl + K para abrir la configuración principal.

En la sección "unidades y reglas", seleccione píxeles. Píxeles, porque trabajamos para la web, y en la web las medidas se hacen en píxeles, y no en puntos, centímetros, etc.

cuando creas nuevo archivo, asegúrese de que con cada nuevo proyecto los píxeles estén configurados en la configuración, la resolución sea 72 píxeles por pulgada y modo de color RGB de 8 bits. Estas configuraciones son suficientes.

Próximo entorno importante flechas. Asegúrese de marcar la casilla "selección automática", establezca la casilla de verificación "capa" y "mostrar elemento controlado".

Eso es todo por la configuración básica. Ahora sobre los objetos que se utilizan en FS para el diseño web.
El más utilizado es un rectángulo. Sólo lo estamos aguantando el tamaño correcto, establezca el color de relleno, el color del trazo y el ancho. También hay un rectángulo con esquinas redondeadas. Se puede encontrar haciendo clic en la pequeña flecha en la esquina inferior derecha del rectángulo de la barra de herramientas.

Trabajar con él es lo mismo que con un rectángulo normal, pero hay parámetro adicional(en nuevas versiones) - radio de curvatura.

Características interesantes de Photoshop: si selecciona un objeto y mantiene presionada la tecla Mayús, cambia proporcionalmente y no se deforma. Esto es muy útil cuando se trabaja con íconos o fotografías. si sostienes tecla alternativa cuando arrastras, simplemente copias el elemento. No es necesario hacer clic adicionalmente en "copiar" y "pegar".

Configuraciones de fusión en Photoshop

Muy a menudo en FS se utilizan configuraciones de fusión. Seleccione el objeto, haga doble clic en la capa y se abre la ventana de configuración de la capa.

puedes agregar varios efectos por capa: sombra paralela, brillo interior, textura, degradado o superposición de color, sombra interior, brillo interior, trazo y extrusión. No te excedas, los principiantes suelen dejarse llevar y resulta complicado.

Cómo hacer un botón en Photoshop

Creo un nuevo archivo con un tamaño de 400x300 píxeles. Selecciono un rectángulo con bordes redondeados con un radio de redondeo de 5 píxeles. Le doy un color a mi rectángulo. Tomo la herramienta de texto, hago clic en el lugar que necesito y escribo “descargar”. Selecciono el texto, selecciono la fuente (puedes seleccionarla antes de escribir el texto). Utilizo una flecha para alinear la inscripción de modo que quede centrada. Por cierto, para alinear, puede mantener presionado el botón Mayús y seleccionar elementos necesarios(en nuestro caso, un rectángulo y texto) y en el panel de control en la parte superior, haga clic en el icono “alinear centros horizontalmente”. Todo se alineará automáticamente. O puedes usar las flechas del teclado; cada vez que presionas la flecha, el elemento seleccionado se moverá 1 píxel, y con la tecla Mayús presionada, 10. A menudo uso las flechas para alinear, es muy conveniente. Ahora agreguemos volumen al botón. Haga doble clic en la capa, agregue configuraciones de fusión: una pequeña sombra interior. Configuré el ángulo de la sombra en -90 grados. Tamaño 4 píxeles y transparencia 57.

Puede utilizar los mismos parámetros o crear algunos propios. El botón está listo.

A continuación, seleccione nuestras 2 capas en el campo de capas a la derecha usando el botón presionado. botones de control, presione ctrl + G y obtenga un grupo de capas. Lo llamaré botón. A continuación, tomamos una captura de pantalla de nuestra imagen usando gyazo y la enviamos en los comentarios debajo de la publicación.

El diseño web es multifacético e incluye no solo trabajar en el diseño según el principio de "qué se ubicará y dónde", sino también crear las imágenes necesarias, procesar fotografías, varios elementos interfaz de usuario, iconos, imágenes prediseñadas, pensar en tipografía y combinaciones de fuentes y mucho, mucho más. Dado que los diseñadores web crean el diseño visual, usando photoshop más que conveniente y comprensible. Pero mientras tanto, varios artesanos de todo el mundo intentan utilizar una amplia gama de aplicaciones de Adobe y, al crear un solo diseño, utilizan Illustrator, Fireworks, InDesign, incluso Experiencia más reciente Diseño (XD).

« ¿Pero por qué tantos?- preguntas. " ¿De qué sirven? ¿Tienen alguna utilidad?" La respuesta es a la vez simple y compleja. El caso es que, por un lado, todos los productos de Adobe están diseñados para diferentes propósitos, por otro lado, quién está acostumbrado a qué, y por el tercero, tienen integración entre sí. Sin embargo, cada aplicación tiene matices distintivos y especiales, que trataremos de considerar a continuación. Si utiliza sabiamente las capacidades de cada producto individual, la creación de diseños de sitios web será más fácil y tal vez incluso más rápida en algunos aspectos.

Nuestro objetivo no es hablar del trabajo específico de cada aplicación, sino llamar la atención sobre sus características, objetivos y tareas que resuelven. Si ya ha elegido en qué trabajar y esto es 99,9% Photoshop, continúe mejorando en esta área en particular y deje el resto para oportunidades adicionales y expansión de habilidades.

Photoshop en diseño web

Inicialmente, la aplicación fue creada para editar y retocar imágenes rasterizadas y trabajar con fotografías. Después de 25 años, la aplicación te permite crear y editar objetos 3D, trabajar con iluminación en imágenes, color, capas, crear animaciones y más.

Durante muchos años en todo el mundo, Photoshop ha sido adecuado para crear sitios web y diseños en formato PSD, gracias precisamente a la posibilidad de trabajar con capas. Te permiten cambiar de posición. elementos personalizados, edítelos por separado. Además, los diseños de Photoshop garantizan que los sitios siempre tendrán el aspecto original en un navegador web, independientemente de la resolución de la pantalla. Cabe destacar el conjunto de filtros, herramientas y complementos para la aplicación.

Ilustrador en diseño web.

Aplicación de gráficos vectoriales. Al mismo tiempo, puede crear excelentes imágenes prediseñadas e íconos, pequeños favicons sin pérdida de calidad y apariencia de píxeles, como es el caso de gráficos rasterizados. Por supuesto, si necesita procesar un logotipo, esta aplicación también es adecuada.

Pero si miras Illustrator desde el punto de vista del diseño web y la maquetación de sitios web, entonces no es adecuado como tal. Como mínimo, tampoco podrás editar la foto y “jugar” con las fuentes. ¿Qué podemos decir sobre el marcado y el diseño, la animación? Sin embargo, última actualización Illustrator CC (2017.1) a partir del 5 de abril de 2017 permite recortar imagen rasterizada sin programas de terceros. Como resultado, las piezas recortadas no se guardan y el tamaño archivo compartido disminuye. Sin embargo, todavía es imposible trabajar completamente con imágenes en Illustrator, pero algunos webmasters logran crear diseños de sitios web en formato AI y enviarlos a los clientes.

InDesign en diseño web

Una aplicación que todavía es compatible con Adobe y está diseñada para diseños. productos impresos(folletos, carteles, revistas, folletos). Pero mientras tanto, también puedes trabajar con el sitio, aunque es más difícil y no podrás guardarlo en PSD, y importar este formato suele ser complicado. Pero puedes procesar grandes volúmenes de texto. Personaliza columnas, campos, estilo. Asigne números de página, mueva diseños, organice y más.

La aplicación está lista para usar. rejillas modulares, hay un panel para ver paginas listas para usar Incluso, por ejemplo, puedes crear una plantilla de pie de página y adjuntarla una vez a todas las páginas. Incluso puedes editar AI y PSD. pero por trabajo Página de destino, con páginas promocionales aún necesitarás Photoshop. Si su sitio está destinado a gran cantidad texto o el cliente solicitó un diseño de muchas páginas (más de 3-4) y está listo para verlos incluso en formato PDF, entonces crearlo en InDesign es realista y conveniente.

Análisis profundo

La idea de que los logotipos e íconos son más fáciles de crear en Photoshop - no es el mejor, porque gráficos vectoriales en la aplicación se convierte en un ráster. Para que las distorsiones y los píxeles sean invisibles, dicho ráster debe tener una resolución alta, que serán, de hecho, gráficos de billetes. Si inserta una imagen vectorial ya preparada de Illustrator, se pixelará. Por eso es más conveniente tener en su computadora conjuntos de imágenes listas para usar en formato vectorial o Illustrator, para poder trabajar con vectores.

En diseño A pesar de que está destinado al diseño de materiales impresos, puede ofrecer conjunto mínimo para crear elementos de diseño web. Tan mínimo que aún tienes que usarlo. programas de terceros. Ni siquiera existe la funcionalidad adecuada para trabajar con fotografías y logotipos, ni filtros.

Pero aquí está el problema. InDesign crea diseños de página basados en plantillas prediseñadas y existentes. Incluso puede diseñarlos y generar CSS y HTML. ¡PERO! Este código no será optimizado para diferentes navegadores. Como dicen: "el código estará sucio". Limpiarlo se convertirá en una rutina compleja, que requerirá una enorme cantidad de tiempo por parte del desarrollador web, y opción automática No se las arreglará en absoluto. Por eso Photoshop tiene una mayor ventaja, aunque proceso creativo lleva más tiempo. InDesign es adecuado sólo cuando el cliente necesita un diseño para un sitio web grande con varias páginas, de diferente contenido y con mucho texto.

¿Por qué no funciona?¿Photoshop? Porque tendrá que crear PSD separados para cada página y dibujarlos por separado (InDesign tiene plantillas), pero no podrá configurar conexiones ni enlaces activos entre ellos (páginas). Además, crear todas las páginas en un PSD tampoco es una opción: el tamaño del archivo será grande y entonces será inconveniente para los diseñadores descubrir qué va y dónde. Por eso, cuando se trabaja en páginas grandes, en la página de destino: Photoshop mejor, lo que podría ser.

si hablamos deIlustrador e InDesign , entonces son similares, con la diferencia de que Illustrator no tiene la capacidad de crear números de página ni plantillas de libros. Pero la IA admite mesas de trabajo para crear folletos o traducir diseños a formato PDF. En el futuro, será conveniente presentar dicho diseño a los clientes/clientes/socios. Es decir, Illustrator se distingue un poco de otras aplicaciones y juega un papel especial en el diseño web.

También existe una aplicación de este tipo.Adobe como fuegos artificiales . Más precisamente, existió, pero hablaremos de eso más adelante. La tarea de la aplicación es procesar ráster y imágenes vectoriales para sitios web. La peculiaridad es que es conveniente crear elementos de interfaz de usuario en él. Incluso existe la posibilidad de comprobar su rendimiento, añadir animación, etc. Es más laborioso hacer esto en Photoshop. Por lo tanto, muchos webmasters conocidos también tienen esta aplicación en su computadora y combinan PS y Fw para crear diseños de sitios web. La ventaja es que los objetos creados en Fw se pueden traducir a CSS y HTML y luego insertarlos directamente en las páginas del sitio. Y el código se crea limpio.

Diseño de experiencia de Adobe

Pero ahora el programa ya no cuenta con soporte y está siendo reemplazado por Diseño de experiencia de Adobe oXDD . Está disponible en versión beta para Windows y Mac de forma gratuita en el sitio web oficial. ¿Qué clase de animal es este? Adobe XD se crea para maquetas de interfaz aplicaciones moviles, sitios. Es decir, si InDesign se creó para imprimir y productos impresos, y la capacidad de crear documentos para la Web es una ventaja, entonces Adobe XD se creó, por el contrario, para el desarrollo de "productos digitales". interfaces móviles, escritorio. Hay compatibilidad con Illustrator, Photoshop, puedes crear botones, diseños, elementos, trabajar con enlaces, transiciones, animaciones, videos. Y mucho más. Puedes crear una maqueta y verla en acción.

Mientras tanto, algunos diseñadores web no están ansiosos por cambiarlo. La aplicación se ve muy “en bruto” y muchas de las funciones a las que la gente ya está acostumbrada tanto en Fireworks como en Photoshop simplemente no existen. Sí, Adobe desarrolló plantillas y principios para la creación de diseños con el apoyo de muchos especialistas eminentes, pero todo esto aún no se ha implementado con mucho éxito. Al recibir un pedido para crear un diseño de sitio web, es mucho más rápido abrir PS y dibujarlo, crear algo y transferirlo desde Fw o AI. Se dedica mucho menos tiempo.

Entonces que elegir

Por lo tanto, Adobe ofrece una amplia gama de aplicaciones para diseñadores web, cada una de las cuales es conveniente a su manera y realiza diferentes tareas. Pero al mismo tiempo es necesario comprender que lo principal a la hora de crear un diseño de sitio web es hacerlo de forma rápida y eficaz. En consecuencia, la elección recae en los conocidos y cómodos Photoshop e Illustrator para trabajar con vectores. Pero no te olvides de Fireworks, aunque ya no es compatible, sigue utilizándose en todo el mundo. Cumple con sus funciones y tareas inmediatas. Y tratar de reemplazarlo con Adobe Experience Design también es un tema controvertido, porque la versión para Mac todavía tiene más funciones que la versión para Windows.

El propósito de nuestro material no era decirles: “ Oh, mira, esto es algo único, ¡úsalo sólo!" ¡No! Solo queríamos recordarle qué productos de Adobe existen para simplificar y acelerar el trabajo de un diseñador web y maquetador. Consideremos los conceptos erróneos y los matices de estos programas, que normalmente sólo se hacen evidentes después de varias horas de arduo trabajo en ellos.

Photoshop realmente lo mas programa conveniente para diseño de sitios web, En diseño adecuado para diseño, ilustrador- Para imágenes vectoriales, Fuegos artificiales/Diseño de experiencia Adobe- una aplicación integral para diseño web, imágenes rasterizadas y vectoriales. Tengamos en cuenta aquí que algunos webmasters generalmente intentan no utilizar Photoshop en absoluto en su trabajo y hacer todo sólo en Fireworks, incluso en la actualidad. O no utilizan productos de Adobe, pero son funciones corporativas internas. De una forma u otra, este es un tema aparte, especialmente porque Photoshop continúa mejorando cada año y Fireworks pasa al formato XD.

En este tutorial usaremos Adobe Photoshop para diseñar una interfaz web que pueda usarse para cualquier sitio web móvil. Usaremos una variedad de técnicas que incluyen formas, máscaras, íconos, fuentes y más que pueden aplicarse fácilmente a sus propios esfuerzos de diseño web.
Imagen final.

Materiales de lección:

Paso 1. Comencemos creando un nuevo documento. en el menú Archivo - Nuevo(Archivo - Nuevo) establezca el ancho y el alto en 1100 px, resolución 72, fondo blanco.

Y así, hemos preparado un espacio para nuestra página web con un ancho de 960 px.

Paso 2. El siguiente paso es preparar el fondo. Seleccione una herramienta Llenar(Herramienta Bote de pintura (G)), establezca el color de primer plano en 1e1e1e. Luego haga clic en cualquier parte del lienzo para aplicar el color a la capa de fondo.

Agreguemos textura a nuestro fondo. Hagámoslo en el menú. Filtro - Ruido - Agregar ruido(Ruido > Agregar ruido). Poner radio(Cantidad) 2,5 y haga clic en Aceptar.

Paso 3. A continuación vamos a resaltar la parte superior de nuestra página. Este movimiento atraerá la atención principal hacia esta área, en otras palabras, habrá atención.
Seleccione una herramienta Cepillar(Herramienta Pincel), cambie el tamaño a 400 píxeles, Dureza 0%

Crea una nueva capa y llámala "Spotlight".

Cambie el color de primer plano a "FFFFFF" (blanco) y cree un círculo en la parte superior del documento usando la herramienta Cepillar(Cepillar).

Para suavizar este destello, seleccione Filtro - Desenfoque Desenfoque Gaussiano(Filtro-Desenfoque-Desenfoque gaussiano).
Establezca el radio en 50,0 y haga clic en Aceptar.

Finalmente establezca la opacidad de la capa. Destacar alrededor del 25%.

Paso 4. Es hora de agregar elementos gráficos. Descarga la imagen del iPhone. Ten en cuenta que puedes utilizar cualquier teléfono que se adapte a tus necesidades específicas (Android, Blackberry, etc...).
Una vez descargado, abra el archivo PSD en Photoshop. Expanda la carpeta “iPhones”, haga clic derecho en la carpeta “iPhones” y seleccione Grupo duplicado(Grupo Duplicado). En la ventana que aparece, asigne un nombre al grupo (yo usé "iPhone") e indique el documento en el que está trabajando actualmente y haga clic en Aceptar. Una vez que hayas terminado, cierra el PSD del iPhone.

La posición de nuestro primer iPhone es tocar la guía izquierda y aproximadamente a 100 píxeles de la parte superior del lienzo del documento.

Repita el paso de reemplazo de pantalla en el "iPhone 2" como se mencionó anteriormente.

Agregue una máscara de capa haciendo clic en el icono de máscara de capa en el panel Capas.

Seleccione una herramienta Gradiente(Herramienta Degradado (G)) de negro a blanco y dibuja una línea de arriba a abajo a lo largo de la capa de reflexión.

Finalmente baja la opacidad de esta capa al 30%.

Ahora apliquemos algunos estilos de capa. Haga doble clic en la capa en el panel Capas y use las capturas de pantalla a continuación para la configuración.

Inserta el ícono de Apple y cambia su opacidad al 30%.

Agreguemos estilos de capa al texto. Utilice la configuración de la captura de pantalla.

Cambie la opacidad de la capa de línea al 15%, duplíquela seleccionando el menú Capas - Duplicar capa(Capa>Duplicar capa) y haga clic en Aceptar. Cambia el color de esta línea a #000000 (negro) y cambia la opacidad de la segunda capa de línea al 10%. Luego mueva la línea negra 1px a la izquierda de la línea blanca.

El último elemento de este botón es un icono que apunta a Descargar. usemos la herramienta Elipse(Herramienta Elipse) y dibuja un círculo de 25 píxeles de diámetro.

Agregue los siguientes estilos de capa para la elipse:

Cambia el color de este rectángulo a " 2B2B2B" y muévalo debajo del botón cargar en el panel de capas.

Ataque

Para el segundo campo de texto utilizamos la siguiente configuración:

Paso 9 Pasemos al final de nuestra página, donde necesitamos crear un separador. Para ello utilizaremos la misma técnica que utilizamos para crear el separador en el botón de descarga.
Para hacer esto, seleccione una herramienta. Línea(Herramienta Línea) y manteniendo presionada la tecla Mayús, dibuje una línea desde la guía izquierda hacia la derecha, luego cambie el color de la línea a “000000” (negro).

En estilos de capa agregue un rectángulo Ataque(Trazo), configuración en la captura de pantalla.

Repita estos pasos para todas sus capturas de pantalla y déles un espacio de 35 píxeles entre sí.

Repita los pasos anteriores para agregar otro bloque de texto con los requisitos para la aplicación.

Paso 13 Para resaltar de alguna manera la lista de funciones de la aplicación, puedes utilizar algunos trucos. Movamos este bloque de texto 25 píxeles hacia la derecha.

Usa la herramienta Elipse(Herramienta Elipse) con un diámetro de 9 píxeles. y dibuja un círculo con el color "bce086".

Agregue los siguientes estilos de capa para este círculo:

Paso 14 Duplica estas tazas en el menú. Capa - Duplicar capa(Capa> Duplicar capa) y colóquelo como en la captura de pantalla a continuación.

Paso 15 Crea otro separador usando la técnica que usamos anteriormente.

Paso 16 Ahora necesitamos agregar algunos enlaces útiles al final. Primero crearemos cuatro cuadros de texto, uno al lado del otro, que contendrán estos enlaces.
Comience creando un cuadro de texto de aproximadamente 160x40 px de tamaño. Agregue texto y repita 3 veces.

Es posible que hayas notado que los bloques de texto no están alineados, no te preocupes, nos ocuparemos de eso en el siguiente paso.

Ahora seleccione las cuatro capas de texto en la carpeta. "Pie de página", activa la herramienta Emocionante(Herramienta Mover) y haga clic en el botón Alinear centros verticalmente(Alinear centros verticales) y luego haga clic en el botón Alinear centros horizontalmente(Distribuir centros horizontales).

Paso 18 Ahora podemos agregar algunos íconos personalizados para representar nuestros enlaces. Seleccione una herramienta Elipse(Herramienta Elipse (U) y crea un círculo, de 36 píxeles de diámetro, colócalo al lado del primer cuadro de texto. Cambia el color de este círculo a "FFFFFF" (blanco). Ahora selecciona Capa - Rasterizar capa(Capa - Rasterizar capa).

Agrega un ícono de Twitter al círculo creado que puedes tomar

Popular en la categoría: