Cómo hacer un boceto en Photoshop. Por qué los especialistas en UI están abandonando Photoshop y cambiando a Sketch. Símbolos y botones dinámicos.
Cuando se lanzó la versión 3 de Sketch, el entorno se generalizó mucho y fue entonces cuando empezamos a compararlo con Photoshop. cuchillo suizo en el mundo de las herramientas de diseño. Con el tiempo, Sketch se ha vuelto simple. una herramienta indispensable en la creación de diseño web y ahora casi nadie puede imaginar su carrera sin este programa.
Photoshop nunca ha sido excelente para el diseño web, pero durante mucho tiempo simplemente no tuvimos nada más. Comparar Sketch y Photoshop es como comparar lo corto y lo largo. Todo depende de para qué estés usando el programa. Pero ahora todo está cambiando y Adobe ya ha comenzado a adoptar un enfoque más consciente en el desarrollo de aplicaciones. Echemos un vistazo a cómo Adobe está luchando contra su competidor...
Exportar activos
Como ya hemos dicho, la función de exportación de activos es una de las características de Sketch. Es por eso que uno de los primeros movimientos de Adobe fue introducir una característica similar para comenzar su lucha por posicionar Photoshop como una herramienta de diseño de interfaz de usuario.
Aquí comparación rápida dos funciones:
Bosquejo
Seleccione la capa y haga clic en el botón "Hacer exportable" en la esquina inferior derecha. Opcionalmente, puedes definir parámetros como tamaño, sufijo y formato dependiendo de cómo y para qué tipo de dispositivo se utilizarán las imágenes. Sketch recuerda cada exportación. Se llama "rebanada". Puede acceder a ellos en la interfaz con " comando+mayús+e" para volver a ejecutar una, dos o todas esas piezas nuevamente.
Photoshop
Adobe lo hace de manera diferente. Primero habilite la función yendo al menú Archivo - Generar - Recursos de imagen.
Ahora creemos un cuadrado simple y guardemos el documento. Photoshop exporta automáticamente sus activos a una carpeta dependiendo del nombre que le dé a la capa. Empecemos con cuadrado.png. Usted especificó el tipo de archivo y Adobe creará archivo PNG. El resto de la configuración se puede dejar como predeterminada.
También puede especificar PNG8/PNG24 (ejemplo.png8, ejemplo.png24) o incluso "ejemplo.jpg100%". Esto significa que será creado archivo JPG con 100% de calidad, en lugar del 90% de calidad predeterminado. Ahora probemos "200% ejemplo-retina.png, ejemplo.png". Todo se actualizará automáticamente cuando guardes. En el lenguaje humano esto significa " hazme un PNG normal, pero al mismo tiempo haz una versión retina para iPhone ".
Este es un movimiento sorprendente de Adobe. La decisión de mantener esto en la interfaz principal muestra que Adobe realmente escucha a sus usuarios. Uno de los más grandes problemas, expresado Usuarios de Photoshop, es la torpeza de la experiencia del usuario al realizar las mismas tareas.
Mesas de trabajo
Las mesas de trabajo son una parte integral de Sketch, como siempre lo han sido. Ilustrador Adobe. Hace algún tiempo no existía nada parecido en Photoshop.
Comparémoslos.
Bosquejo
Presione el botón "A" y el Inspector (en lado derecho) enumerará todo tamaños disponibles lienzos. Haz clic, selecciona y disfruta.
Photoshop
Cuando abras un nuevo documento tendrás la opción de comenzar desde el lienzo. tamaños estándar. Parece que no hay forma de trabajar con varias mesas de trabajo en paralelo. Pero si haces clic clic derecho Si coloca el mouse sobre la "Herramienta Mover" en la barra de herramientas, puede seleccionar la "Herramienta Mesa de trabajo". Después de eso, seleccione "Tamaño" y luego haga clic en el botón "Agregar nueva mesa de trabajo".
Alternativamente, puede cambiar el tamaño de la mesa de trabajo usando el parámetro Tamaño. También puedes cambiar la orientación del lienzo usando "Hacer retrato" y "Hacer paisaje". En Adobe experiencia de usuario se ha vuelto más flexible y familiar para los diseñadores.
A muchos diseñadores les encanta la simplicidad de Sketch, por lo que hay mucho más que Photoshop debe adoptar y repensar. Pero claramente están en el camino correcto.
Conclusiones
Seguramente Photoshop seguirá su propio camino de desarrollo y no mirará realmente el camino que están tomando sus competidores. Sin embargo, es bueno saber que Adobe ha superado el muro de los malentendidos y está extrayendo ideas para la innovación de comentario sus usuarios. Seguramente llegará el momento en que Photoshop alcance a Sketch en popularidad y funcionalidad en lo que respecta al diseño de interfaces. Parece que Adobe se esfuerza no sólo por competir con Sketch, sino también por hacer algo "propio" y no copiar estúpidamente funciones.
En este tutorial, te mostraré cómo crear una acción de boceto a lápiz para Adobe Photoshop con una característica inusual.
Este efecto es parte de una acción de dibujo a lápiz disponible para su compra en Envato Market.
1. Agrega fotos de chicas.
Crear nuevo documento tamaño 850 por 636 píxeles. Por supuesto, puedes elegir un tamaño diferente para el documento PSD, pero tendrás que cambiar el tamaño de todo en este tutorial proporcionalmente. Coloca una imagen de las chicas en el documento.
2. Agrega papel rasgado
Paso 1
Te adjunto una imagen PNG del papel que puedes usar. Pero si quieres hacer tu propia textura de papel rasgado, es bastante sencillo. Puedes tomar un trozo de cartulina o cartón y rasgarlo toscamente para obtener un trozo de la forma que deseas. Luego colóquelo sobre una superficie plana, preferiblemente color contrastante(por ejemplo, negro si el papel es blanco).
Tome una fotografía de una hoja de papel con una cámara o un teléfono. La fotografía debe realizarse claramente encima de un papel para que acabemos con la perspectiva que necesitamos.
Paso 2
Descarga la foto a tu computadora y ábrela en Photoshop. usando una herramienta Varita magica(Varita mágica) selecciona una hoja de papel y elimina el fondo.
Paso 3
Descargue una imagen de una hoja de papel y colóquela nueva capa.
Paso 4
Presione Ctrl + T para rotar la hoja de papel. Colócalo sobre el área que deseas convertir en un boceto a lápiz.
Paso 5
Presione Ctrl + J dos veces para crear dos copias de la capa de trozo de papel. Nómbralos « papel rasgado 1" Y "papel rasgado 2"(“papel rasgado 1” y “papel rasgado 2”).
Paso 6
Agregar un estilo de capa Sombra paralela(Sombra) a la capa original con un trozo de papel. El color de la sombra es #000000.
Sombra paralela(Sombra):
- Opacidad: 43%;
- Esquina: 120 grados;
- Inclinación: 7 píxeles;
- Tamaño: 5 píxeles.
3. Crea cuatro copias de la capa de niñas.
Paso 1
Presione Ctrl + J cuatro veces para crear cuatro copias de la capa de niñas, asígneles un nombre. Chicas 1, Chicas 2, Chicas 3 Y Chicas 4(Niñas 1, 2, 3 y 4).
Paso 2
Abrazadera tecla Ctrl y selecciona todas las capas de chicas en el panel de capas. Colócalos encima de la capa con un trozo de papel.
4. Utilice los filtros Desenfoque de movimiento y Tinta
Paso 1
Desactive la visibilidad de todas las capas de copia excepto la capa Niñas 1.
Seleccione el blanco como color principal y el negro como color de fondo.
Paso 2
Ahora con la capa Girls 1 seleccionada, haga clic en Filtro > Bosquejo > Pluma gráfica(Filtro > Galería de filtros > Bosquejo >
- Longitud de carrera: 7;
- Equilibrio tonal: 21;
- Dirección del trazo: Diagonalmente a la derecha.
Paso 3
Hacer clic Filtro > Desenfocar > Desenfoque de movimiento(Filtro > Desenfocar > Desenfoque de movimiento). Inclinación: 1 píxel.
5. Utilice los filtros de tinta y ruido.
Paso 1
Active la visibilidad de la capa Girls 2, cambie el modo de fusión a Multiplicar(Multiplicar), opacidad 30%.
Paso 2
Hacer clic Filtro > Bosquejo > Pluma gráfica(Filtro > Galería de filtros > Bosquejo > Tinta). La configuración del filtro es como en la imagen a continuación, pero si usó una foto diferente, es posible que deba cambiar la configuración.
Configuración de filtro en la captura de pantalla:
- Longitud de carrera: 15;
- Equilibrio tonal: 51;
- Dirección del trazo: diagonalmente hacia la derecha.
Paso 3
Hacer clic Filtro > Ruido > Agregar ruido(Filtro > Ruido > Agregar ruido). Efecto: 43%
6. Utilice el filtro Fotocopia
Paso 1
Active la visibilidad de la capa Girls 3, cambie el modo de fusión a Multiplicar(Multiplicar), opacidad 100%.
Paso 2
Hacer clic Filtro > Bosquejo > Fotocopiar(Filtro > Galería de filtros > Bosquejo > Fotocopia).
Configuración de filtro en la captura de pantalla:
- Detalle: 1;
- Oscuridad: 50
7. Usa el filtro Acuarela
Paso 1
Active la visibilidad de la capa Girls 4, cambie el modo de fusión a Color(Color), opacidad 100%.
Paso 2
Hacer clic Filtro > Artístico > Acuarela(Filtro > Galería de filtros > Simular > Acuarela). Puedes ocultar la visibilidad de la capa Girls 4 por ahora.
Configuración de filtro en la captura de pantalla:
- Detalle: 4;
- Profundidad de la sombra: 0;
- Textura: 1
8. Crea una parte del boceto usando una máscara de recorte.
Mantenga presionada la tecla Ctrl y seleccione las capas Niñas 1, Niñas 2, Niñas 3 y Niñas 4. Haga clic derecho en las capas seleccionadas y seleccione Crear máscara de recorte(Crea una máscara de recorte).
9. Crea un borde irregular en el papel.
Paso 1
Active la visibilidad de la capa Papel rasgado 1 y cambie su modo de fusión a Multiplicar(Multiplicar), opacidad - 57%
Paso 2
Active la visibilidad de la capa Torn Paper 2. Haga clic en el botón Agregar máscara de capa en el panel Capas para agregar una máscara a la capa Torn Paper 2.
Paso 3
Crea una nueva capa debajo de la capa Papel rasgado 2 y rellénala de blanco.
Paso 4
Haga clic en la miniatura de la máscara de capa de la capa Papel rasgado 2. Haga clic. Imagen > Aplicar imagen(Imagen > Canal Externo).
Paso 5
Hacer clic Imagen > Ajustes > Niveles(Imagen > Ajustes > Niveles) y cambie la configuración a la misma que en la captura de pantalla a continuación. Valores de entrada: 56, 1.81, 67
Con un pincel, puedes pintar de blanco dentro de la capa 2 de Papel rasgado si deseas mejorar el efecto del borde rasgado.
Paso 6
Elimina la capa de fondo blanco para ver el efecto.
Paso 7
Con la tecla Ctrl presionada, haga clic en las capas Papel rasgado 1 y Papel rasgado 2. Luego, haga clic derecho en las capas seleccionadas y haga clic en Crear máscara de recorte(Crea una máscara de recorte).
10. Mueve tu efecto de boceto con facilidad
Si desea dibujar otra parte de su dibujo, simplemente mantenga presionada la tecla Ctrl y luego haga clic en las capas Papel rasgado 1, Papel rasgado 2 y Papel rasgado.
usando una herramienta Mover(Mover) Cambia la posición de la hoja de papel.
¡Felicidades! ¡Eso es todo!
En este tutorial, aprendiste cómo crear un efecto de boceto fotográfico en Photoshop usando tus propias fotos en solo unos pocos pasos.
EN últimamente La cuestión de las herramientas para los especialistas en UI/UX es muy apremiante: ¿qué software debo utilizar para desarrollar interfaces? En nuestra empresa también discutimos acaloradamente este tema. Y las discusiones suelen ser muy acaloradas. ¿Qué elegir para trabajar? ¿Qué editor es más funcional para la tarea de un diseñador en particular? La lista de nuestras tareas es bastante amplia, empezando por la creación identidad corporativa y terminando ciclo completo desarrollo de productos digitales complejos. Por ejemplo, aplicaciones moviles para la gestión de sistemas hogar inteligente, sistemas de comercio electrónico con todas las funciones.
No seré el primero en plantear estas preguntas, pero intentaré darles respuestas concisas. Quizás mi artículo sea de interés para los diseñadores principiantes que aún no han decidido finalmente la dirección de sus actividades, o para los diseñadores que quieran volver a capacitarse de una especialidad a otra.
Durante los últimos veinte años, Adobe Photoshop ha seguido siendo el editor gráfico más popular para los diseñadores. Sin embargo, recientemente el campeonato de la empresa. Adobe en el mercado de herramientas para diseñadores digitales se vio sacudido, en 2012 la empresa Codificación bohemia boceto lanzado. Bosquejo es un editor de gráficos vectoriales profesional diseñado específicamente para crear interfaces gráficas: web, aplicaciones móviles, programas de escritorio y otros. En en este momento versión actual es Sketch 3. Durante estos 3,5 años, Bohemian Coding ha trabajado mucho para mejorar su producto, solucionó muchos errores, aumentó la funcionalidad y, de hecho, se convirtió en un serio competidor de Photoshop. Quiero hacer una nota importante de inmediato: no considero a Sketch como un competidor directo. Photoshop. Es evidente que el propósito de estos programas es inicialmente diferente; por lo que lo que será una ventaja para uno puede ser una grave desventaja para otro. Por lo tanto, sería correcto no revisión comparativa, como hacen muchos, sino resaltar las principales ventajas y propiedades de cada uno de los editores para un caso concreto.
Objetivo
Por eso creo que es correcto mostrar como primer punto el propósito de cada uno de los programas.
Photoshop trabaja principalmente con imágenes rasterizadas
, sin embargo tiene algunos herramientas vectoriales. Es indispensable para el retoque fotográfico y el procesamiento de imágenes. Pero la funcionalidad diseñada para trabajar con gráficos vectoriales es bastante convencional. Muchos fans de Adobe se opondrán a mí, pero también está pregunta lógica: ¿Por qué Adobe tiene una cuenta separada? editor de vectores Illustrator, ¿si Photoshop puede hacerlo todo? Es la presencia de dos interfaces lo que complica el trabajo y requiere tiempo adicional a la hora de resolver problemas con gráficos vectoriales.
Sketch fue diseñado originalmente para trabajar con vectores., ya que el desarrollo de interfaces implica la creación de prototipos, marcos, íconos, elementos de UI y, a menudo, estos elementos deben ser vectoriales.
Por lo tanto, para elegir qué editor utilizar, es necesario comprender qué tareas deberán resolverse utilizando de este kit de herramientas.
Precio
El segundo parámetro más importante, pero no el más importante, para elegir un editor en particular es el costo y el método de pago por este. software. ¡Puedes comprar Photoshop exclusivamente mediante suscripción! El costo del uso mensual del editor es 20$ , y para diferentes regiones esta cifra está sujeta a cambios. Pero la esencia sigue siendo la misma. A diferencia de Adobe, Bohemian Coding optó por camino de regreso: El boceto se vende por 99$ , este es un pago único y el usuario recibe todas las actualizaciones de forma gratuita. Quizás en el futuro la estrategia financiera de la empresa cambie, pero por ahora están conquistando el mercado de esta forma. Es este factor el que sin duda influirá en la escala de la empresa. Aunque para los autónomos la planificación financiera de sus recursos también es importante.
Multiplataforma
Otro argumento importante a la hora de elegir herramientas para los diseñadores será la plataforma en la que se ejecuta tal o cual software. En nuestra empresa, los diseñadores trabajan exclusivamente en Dispositivos Mac y la mayoría de los desarrolladores de aplicaciones para el usuario también. Por lo tanto el hecho de que Sketch es exclusivo de OS X, no se convirtió en un problema para nosotros. Pero para los diseñadores que tienen a su disposición Dispositivos Windows, este claramente no es un problema que tenga solución. Por supuesto, puedes confundirte e instalar un emulador de OS X en Windows, pero no puede salir nada bueno de ello, como mucho cargarás tu procesador y; Sistema operativo tratamiento procesos innecesarios. A diferencia del boceto, Photoshop tiene versiones separadas para Windows y OS X. Por tanto, en materia de multiplataforma, Adobe Photoshop sigue siendo el líder constante. Pero, una vez más, lo que a primera vista parece una desventaja, es una gran ventaja en condiciones específicas. Dado que Sketch existe sólo para Mac, todo el contenido creado se representa utilizando el eje de Mac, utilizando el estándar motor grafico de Apple. Así es como los desarrolladores lograron la máxima productividad y velocidad de trabajo.
Velocidad y tamaño del archivo de descarga.
Al ser una aplicación nativa de Cocoa, Sketch utiliza al mínimo elementos de interfaz no estándar, por lo que es de tamaño pequeño. archivo de arranque pesa sólo alrededor 22 megas. Está bastante bien optimizado, a diferencia de Photoshop, el volumen archivo de instalación que se trata 1 GB.
Integración
Un punto importante para cualquier conjunto de herramientas es su capacidad de integrarse con otro software. Por ejemplo, una vez que el diseño del sitio web está completamente desarrollado y listo para ser transferido al departamento de desarrollo front-end, la cuestión es transferir el código fuente en sí para mayor desarrollo proyecto. Hoy en día, tanto Sketch como Photoshop cuentan con importantes herramientas de integración. Ambos editores pueden exportar materiales en software para la comunicación entre desarrolladores y diseñadores, como Avocode, Zeplin y otros. Si consideramos este caso para una empresa, entonces esta decisión extremadamente importante, ayuda a ahorrar dinero en copias adicionales editores gráficos para desarrolladores de aplicaciones para el usuario.
Educación
Si decides dominar Photoshop o ampliar tus conocimientos sobre este editor gráfico, entonces a tu disposición muchas fuentes educativas. Existen recursos de formación, tanto de pago como gratuitos. La calidad de los materiales también varía mucho: desde artículos primitivos de autores no autorizados hasta lecciones en vídeo secuenciales perfectamente estructuradas impartidas por formadores profesionales cualificados. Debido al hecho de que Sketch es un software relativamente joven, el número de recursos de formación es incomparablemente menor que Photoshop. Y, por regla general, se trata de materiales de pago. Por ejemplo, en el famoso recurso educativo Udemi tiene menos de 40 cursos de Sketch. Sin embargo, ya existen reseñas de profesionales de Sketch. Espero que con el tiempo la cantidad de materiales educativos en la red aumente en proporción a la creciente popularidad de los gráficos. editor de bocetos.
La competencia es el motor del progreso.
Hay muchos otros parámetros y características de Photoshop y Sketch, es bastante difícil cubrirlos todos, pero la conclusión es clara: cada uno de los editores gráficos que revisé es bueno para resolver tarea especifica. Si consideramos el desarrollo de interfaces, en nuestra empresa hemos optado claramente por Sketch. Esto fue facilitado por un conjunto de factores enumerados en este artículo. Photoshop sigue siendo el líder en trabajo con gráficos rasterizados, pero no podemos ignorar el hecho de que la aparición de Sketch dio un fuerte impulso al desarrollo de Photoshop. La prueba más sorprendente de esto es la aparición de muchos tableros de arte y la capacidad de mostrar vistas previas en dispositivo móvil. De hecho: la competencia es el motor del progreso.
Sketch (del inglés Sketch - sketch, esquema, sketch) es una especie de diagrama, diseño varios elementos. En los álbumes de recortes, los bocetos se pueden utilizar tanto para páginas como para postales.
Un boceto puede consistir simplemente en elementos graficos, o se puede complementar con estampados o elementos decorativos.
Y sería bueno tener una base de datos de varios elementos en formato PNG(en fondo transparente), imágenes de fondo y juegos de varios pinceles.
Los kits de chatarra digital se pueden encontrar y descargar en Internet. Por ejemplo, hay algunas buenas colecciones gratuitas.
También puedes buscar pinceles interesantes, por ejemplo, en Internet.
Lea en detalle sobre cómo trabajar con pinceles y su configuración.
Para crear bocetos, también necesitas poder trabajar con capas. Al menos de verdad nivel de entrada. Desafortunadamente, sin esto no hay manera.
También escribí sobre capas, entendamos el tema y.
Y ahora intentaremos hacer ese boceto.
1. Decidir de qué tamaño haremos el boceto. Recordamos que será inconveniente trabajar con demasiado pequeño y será imposible aumentarlo sin perder calidad. Y no parece necesario que sea demasiado grande. Nos decantaremos por la media dorada: 1000x1000 píxeles.
Crear un nuevo documento tamaño dado. Archivo/Nuevo.
Establezca el ancho y el alto. (Prestar atención a las unidades de medida. Para evitar crear un archivo de 1000x1000 cm)
Resolución 300 píxeles por pulgada.
2. Averigüemos en qué elementos constará nuestro boceto. Claramente tenemos círculos aquí. Entonces los haremos.
En la paleta de capas, cree una nueva capa en blanco haciendo clic en el botón Crear una nueva capa
Para hacer un círculo y no un óvalo, mantenga presionada la tecla Mayús mientras crea.
Después de eso, elimine la selección - Ctrl+D
Para agregar un contorno a un nuevo círculo, haga lo siguiente.
La capa con el círculo blanco debería estar activa. Haga clic en el botón Efectos de capa en la parte inferior de la paleta Capas.
En la ventana que se abre, ajuste el grosor y el color del contorno.
Flores/ramitas/botones: arrástrelos al documento desde el visor o el comandante. Simplemente tome el archivo con el mouse y arrástrelo al documento. Cuando arrastres, las imágenes se convertirán en objetos inteligentes. Puede leer sobre las características de trabajar con ellos.
Arrastra el elemento y presiona Enter.
4. Para crear un elemento con un pincel (para nosotros es encaje y borra), haga lo siguiente.
Si no tiene el pincel requerido en su conjunto, descárguelo de Internet (archivo con extensión .abr)
Seleccione la herramienta Pincel, haga clic en los parámetros del pincel en el panel de propiedades, luego haga clic en el botón de engranaje y seleccione Cargar pinceles en la lista desplegable.
Haga clic en Aceptar y los pinceles aparecerán en su conjunto en la parte inferior.
Siguiente IMPORTANTE: Nuevamente, cree una nueva capa, seleccione el pincel que desee, ajuste su tamaño y solo entonces haga clic en el documento UNA vez. Luego puedes seleccionar la herramienta Mover y trabajar con el elemento resultante de la misma manera que lo hicimos con círculos e imágenes.
Por supuesto, si desea crear una textura con un pincel, debe hacer clic en la misma capa varias veces.
Las capas se apilan una encima de otra en el orden en que las crea. Pero en la paleta Capas se pueden intercambiar.
5. Cada elemento de tu boceto tiene un color diferente. Puedes trabajar con cada capa por separado y llevar el trabajo al nivel deseado. combinación de colores. O puedes hacer el documento en blanco y negro.
La forma más sencilla, adecuada para un documento con varias capas, es crear una capa de ajuste.
Haga clic en la capa superior en la paleta Capas.
Luego, desde la parte inferior de la paleta, haga clic en el botón para crear una capa de ajuste y seleccione Tono/Saturación (Color/Saturación)
Y se abrirá una paleta con configuraciones de capas. En él, establezca el valor de Saturación en "-100".
Si planeamos continuar realizando cambios en este documento, guardamos el archivo en formato PSD. Se conservarán todas las capas. Para Internet ahorramos en formato JPG. Todas las capas se fusionarán automáticamente en una.
Espero que MK te haya sido útil.
Si algo no está claro, haga preguntas.
