Cambiar de Photoshop a Sketch (Editor para Mac). Por qué los especialistas en UI están abandonando Photoshop y cambiando a Sketch

Recientemente, la cuestión de las herramientas para los especialistas en UI/UX se ha vuelto muy aguda: ¿qué software debería usarse 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, desde la creación de una identidad corporativa hasta el ciclo completo de desarrollo de productos digitales complejos. Por ejemplo, aplicaciones móviles para gestionar sistemas domésticos inteligentes y 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. Por el momento, la versión actual es Sketch 3. Durante estos 3,5 años, Bohemian Coding ha trabajado mucho para mejorar su producto, corrigió muchos errores, aumentó la funcionalidad y, de hecho, se ha convertido 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 tanto, lo correcto sería no hacer una reseña comparativa, como muchos hacen, sino destacar las principales ventajas y propiedades de cada uno de los editores para un caso concreto.

Objetivo

Por eso creo que es correcto mostrar el propósito de cada programa como primer punto.
Photoshop funciona principalmente con imágenes rasterizadas., sin embargo, tiene algunas herramientas vectoriales. Es indispensable para el retoque fotográfico y el procesamiento de imágenes. Pero la funcionalidad destinada a trabajar con gráficos vectoriales es bastante condicional. Muchos fanáticos de Adobe se opondrán a mí, pero entonces surge una pregunta lógica: ¿por qué Adobe tiene un editor de vectores independiente, Illustrator, en su arsenal, 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 este conjunto 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 de este software. ¡Puedes comprar Photoshop exclusivamente mediante suscripción! El costo del uso mensual del editor es 20$ , y esta cifra puede variar según las diferentes regiones. Pero la esencia sigue siendo la misma. A diferencia de Adobe, Bohemian Coding tomó el camino opuesto: Sketch 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 front-end hacen lo mismo. 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 dispositivos Windows a su disposición, 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 procesando 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 Mac, utilizando el motor gráfico estándar 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. El archivo descargado pesa sólo aprox. 22 megas. Está bastante bien optimizado, a diferencia de Photoshop, el tamaño del archivo de instalación es de aproximadamente 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, surge la cuestión de transferir directamente el código fuente para un mayor desarrollo del 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 solución es extremadamente importante, ya que ayuda a ahorrar dinero en copias adicionales de editores gráficos para los 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, el conocido 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 del editor gráfico Sketch.

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 una tarea específica. 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 líder en el 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 llamativa de ello es la aparición de muchos tableros de arte y la posibilidad de mostrar vistas previas en un dispositivo móvil. De hecho: la competencia es el motor del progreso.

Google SketchUp es una aplicación fácil de usar que te ayudará a aprender a crear modelos 3D de edificios residenciales, hangares, garajes, tejados, diversas ampliaciones de viviendas e incluso naves espaciales.

Con SketchUp, puedes agregar fácilmente detalles, cambiar texturas, cambiar el tamaño de tus modelos, objetos industriales con gran precisión y también colocar modelos terminados en Google Earth, compartirlos con otras personas publicándolos en el sitio web de la Galería 3D o imprimiendo copias. . Google SketchUp es una excelente manera de saber si te gusta el modelado 3D.

SketchUp incluye las siguientes herramientas:

• dibujo y modelado geométrico: Polígono (Polígono), FollowMe (una herramienta para crear formas simples y complejas: círculos, óvalos, cuadrados), Offset (una herramienta para crear copias reducidas proporcionales de un objeto) e Intersect with Model;
• diseño: dimensión, cinta métrica, transportador, corte de sección, capas, cálculo de área y longitud.

SketchUp te permite:

• dibujar, editar, medir, rotar y escalar formas geométricas;
• divida el modelo 3D en secciones para ver y terminar las piezas internas;
• aplicar texturas ya preparadas al modelo o crear otras nuevas;
• agregue componentes ya preparados a su modelo, como árboles, automóviles, ventanas, puertas, personas, o cree otros nuevos;
• retocar, suavizar rasgos faciales;
• simular sombras de objetos en tiempo real para cualquier punto del mundo;
• simular la colocación de cámaras de video;
• realizar recorridos web;
• crear excursiones - presentaciones;
• exportar archivos gráficos bidimensionales (. JPG, . PNG, . TIF. TGA. BMP) a modelos 3D (0,3 DS. Dem. DDF. DWG. DXF. UPC);
• exportar imágenes bidimensionales de sus modelos (. JPG, . BMP, . PNG, . TIF);
• imprimir imágenes de modelos;
• Desarrollar aplicaciones adicionales para el programa utilizando el lenguaje Ruby.

SketchUp es una herramienta de modelado 3D para diseñadores profesionales: la versión profesional de SketchUp brinda a los diseñadores profesionales la capacidad de desarrollar y analizar objetos de diseño altamente complejos.

Los usuarios de SketchUp pueden:

• exportar modelos en formatos 3DS, DWG, DXF, OBJ, XSI, VRML y FBX;
• exportar animaciones y recorridos en archivos MOV y AVI;
• utilizar herramientas de modelado de objetos orgánicos (Sandbox) y Film & Stage;
• importar y exportar datos SIG;
• imprimir y exportar imágenes rasterizadas con una resolución superior a la de la pantalla;
• recibir soporte técnico gratuito durante dos años después de comprar el programa;
• utilizar el software con fines comerciales (versión gratuita, solo para uso personal).

Modela todo lo que puedas imaginar: renovar tu salón, inventar nuevos muebles, crear modelos de ciudades tridimensionales para Google Earth. Las posibilidades de SketchUp son infinitas.

SketchUp hace que el modelado 3D sea divertido: el software potente y de alta calidad también puede ser divertido de usar; el secreto es que las herramientas y funciones de SketchUp son intuitivas y funcionan como es de esperar. Millones de nuestros usuarios estarán de acuerdo con esto.

Obtenga modelos en línea de forma totalmente gratuita: puede crear modelos desde cero o descargar lo que necesite ya preparado. Personas de todo el mundo comparten sus modelos en el sitio de la Galería 3D de Google.

Comience ahora: docenas de lecciones en video, extenso material de referencia, usuarios de todo el mundo. Si quieres crear modelos 3D con SketchUp, ¡hazlo!

NOTA: Google SketchUp es un software gratuito para uso personal únicamente.

Características y funciones clave

• Aristas y caras: cada modelo de SketchUp consta de sólo dos cosas: aristas y caras. Los bordes son líneas rectas, las caras son formas bidimensionales simples que se forman a partir de la intersección de líneas. Por ejemplo, una cara rectangular tiene cuatro aristas que están conectadas entre sí en ángulo recto. Para construir modelos en SketchUp existen varias herramientas sencillas con las que te familiarizarás en poco tiempo;
• Empujar/tirar: pase rápidamente de 2D a 3D: con la herramienta Empujar/tirar, puede transformar rápidamente cualquier superficie plana en una imagen 3D. Esta es una opción para crear formas tridimensionales y ajustar el grosor de un objeto. Simplemente haga clic en el botón, coloque el mouse y haga clic en el botón para detener. Por lo tanto, puede, dibujando solo el contorno de la escalera, transferirla a 3D. De la misma forma aparecerá una ventana en la pared. Push/Pull es la razón por la que SketchUp se considera fácil de usar;
• Medidas precisas: debido a que trabaja en una computadora, todo lo que crea en SketchUp se puede medir con precisión. Existen herramientas de diseño para esto. Además, los modelos a escala se pueden imprimir en papel o exportar a otros programas, como AutoCAD y 3ds MAX;
• Sígueme: con la herramienta Sígueme, se crean formas 3D extruyendo una superficie 2D a lo largo de una ruta específica. Puede crear una imagen 3D de una botella a partir de la mitad de su diseño, puede redondear los bordes en diseños como pasamanos, muebles y aparatos electrónicos;
• Bote de pintura: al crear sus modelos, puede usar los colores necesarios para rellenar partes individuales o todo el diseño, dibujar modelos usando los colores y texturas necesarios;
• Grupos y componentes: para refinar la apariencia de partes individuales de objetos volumétricos, puede utilizar la herramienta Grupos para crear subobjetos que sean más fáciles de mover, copiar y ocultar. Los componentes son similares a los grupos en muchos aspectos, pero con una diferencia: los elementos copiados están vinculados entre sí, por lo que los cambios que realice en un componente se reflejan en todos los demás. Las ventanas, puertas, sillas y millones de otros componentes de tu modelo se pueden modificar cambiando solo uno;
• Sombra: Dibujar sombras en SketchUp se ha vuelto simple y preciso: ahora tus objetos proyectarán las sombras correctas en tiempo real en cualquier parte del mundo usando Shadow Engine;
• Secciones: La herramienta Secciones le permite "cortar" temporalmente partes de su proyecto y mirar dentro. Puede utilizar esta función para crear dibujos, exportar formas a programas CAD que utilizan SketchUp Pro o para comprender mejor su modelo mientras trabaja en él. La función Planos de sección le permite mover, rotar e incluso animar proyectos creados;
• Escenas: Creamos escenas para que le resulte más fácil guardar el aspecto exacto de su modelo para que pueda volver a él más tarde. ¿Necesitas crear animación? Simplemente cree algunos de estos episodios y haga clic en el botón;
• Mira a tu alrededor y camina: SketchUp tiene un conjunto de herramientas de navegación sencillas diseñadas para brindarte una vista en primera persona. Haga clic en la posición de la cámara para "colocarse" en cualquier parte de su modelo. El uso de la herramienta Mirar alrededor le permite "mover la cabeza". La función Walk te permite explorar tu creación mientras “caminas”, incluso subiendo y bajando escaleras, rampas y otros elementos arquitectónicos como en los videojuegos;
• Dimensiones y etiquetas: puede utilizar herramientas intuitivas para agregar dimensiones, anotaciones y diversas marcas a su modelo;
• Instructor: El Instructor es un cuadro de diálogo donde puede obtener ayuda en el contexto de su trabajo;
• Capas y contorno: al construir un modelo grande y complejo, puede resultar fácil confundirse. SketchUp proporciona dos formas sencillas de mantener el control sobre su trabajo: Capas e Inserciones;
• Google Earth: SketchUp y Google Earth son parte de la misma familia de productos, lo que permite compartir información entre ellos. ¿Necesita un sitio de construcción para su proyecto? Importe fotografías aéreas con zoom, incluida la topografía, directamente desde Google Earth a SketchUp con un solo clic. ¿Quieres ver tus modelos de SketchUp en contexto en Google Earth? Simplemente presione otro botón. Cualquiera puede utilizar SketchUp para crear modelos que luego todos podrán ver en Google Earth;
• Herramientas Sandbox: las herramientas Sandbox le permiten crear, optimizar y modificar terreno 3D. Puede crear paisajes suaves a partir de muchas curvas de nivel, agregar terraplenes, valles, crear plataformas para edificios y carreteras;
• Sitio web de 3D Warehouse: El sitio web de 3D Warehouse es un enorme depósito en línea de modelos 3D. ¿Por qué crear algo cuando puedes descargarlo gratis?
• Importación 3DS: puede importar archivos 3DS directamente a los modelos de SketchUp. Si hay una muestra en formato 3DS que le gustaría usar, entonces sólo necesita importarla y luego guardarla;
• Importación de imágenes: con SketchUp, puedes importar archivos de imágenes en formatos JPG, TIFF, PNG y PDF. Puede usarlos solos o superponerlos sobre una superficie para crear modelos de construcción fotorrealistas, diseños de empaques y más;
• Exportación TIFF, JPEG y PNG: SketchUp le permite exportar imágenes rasterizadas de hasta 10.000 píxeles cuadrados, generar imágenes para enviar por correo electrónico y publicar en documentos y otros proyectos.

Hace 25 años, el 19 de febrero de 1990, los hermanos John y Thomas Knoll lanzaron un pequeño programa que conectaba una computadora a un escáner. El proyecto se llamó Photoshop. Durante dos décadas, tuvo el monopolio del mercado de software gráfico y la palabra “Photoshop” se convirtió en un vocablo familiar.

Sin embargo, la primacía de Photoshop puede estar erosionándose. Hoy en día, muchos diseñadores web están cambiando a Sketch, un producto creado específicamente para especialistas en UI. El editor jefe del sitio habló con los desarrolladores de interfaces y averiguó si la industria está preparada para cambiar de proveedor de software.

"Para mí, la transición de Photoshop a Sketch fue extremadamente dolorosa", dice Artur Kasimov, diseñador de productos de Yandex. - Soy, como dicen, un hombre de la vieja escuela. Todavía recuerdo las primeras versiones de Photoshop”. Durante 25 años, Photoshop se ha convertido en el estándar para la industria del diseño web, a pesar del "peso" (el programa ocupa más de 1 GB de espacio en disco), funciones no reclamadas en la interfaz y un procedimiento de compra extremadamente confuso, que incluso el creador de la red social “VKontakte”, se quejó Pavel Durov.

Adobe también fabrica Illustrator basado en vectores, lo que a menudo significaba que los desarrolladores de aplicaciones para el usuario tenían que mantener abiertos dos editores en todo momento. "Algunas personas salen de esta situación eligiendo Illustrator, pero debido a los hábitos establecidos, pierden el tiempo en esto", dice el especialista en UI Anton Frolov.

“Photoshop fue creado y desarrollado como software para fotógrafos. Luego lo atiborraron de todo lo que se les ocurrió. Esto hacía que el editor pareciera un hipopótamo torpe”, dice el diseñador de productos de Yandex, Artur Kasimov. Surgieron dificultades tanto con la velocidad como con la productividad. Por ejemplo, los diseños que contienen una gran cantidad de capas ralentizaron significativamente los procesos en Photoshop. Los “frenos” se notaban especialmente cuando se trabajaba en varios diseños simultáneamente.

Además, para crear elementos de interfaz estándar, como un botón de Mac OS, una lista desplegable en un navegador o un rectángulo con bordes redondeados, a veces era necesario realizar una docena de pasos. Todo esto se reflejó en la rapidez del trabajo del diseñador. “Photoshop e Illustrator no están diseñados para diseño web. Por lo tanto, el diseño de la interfaz y cualquier intento de hacer algo inteligible no pueden llamarse más que muletas”, dice Dmitry Novikov, especialista en UI de MacPaw.

Sin embargo, aparecieron en el mercado alternativas a Photoshop: GIMP, Krita, Paint.NET y otras. Sin embargo, no pudieron proporcionar ni siquiera el conjunto de herramientas necesario para diseñar interfaces, dicen los especialistas en UI.

La aparición de Sketch

Hace unos años, los desarrolladores de Bohemian Coding lanzaron un programa para Mac OS llamado Sketch. La primera diferencia que llamó la atención de inmediato fue que la aplicación era una alternativa a Photoshop, pero su interfaz se parecía más a un programa del paquete iWork: íconos nativos de Cocoa, un número mínimo de herramientas en el panel, un solo bloque de configuración que se adapta a las acciones del usuario.

A diferencia de Photoshop, Sketch no utiliza sus propias herramientas para renderizar el contenido creado; estas funciones están asignadas a las herramientas integradas de Mac OS X: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL y ColorSync. Gracias a esto, incluso la última versión del programa ocupa sólo 42 MB de espacio en disco.

Sin embargo, no todo salió tan bien con las primeras versiones. Muchos diseñadores notaron la novedad, pero tenían miedo de abandonar Photoshop. En aquel entonces, los desarrolladores de Sketch no podían decidir para quién lanzarían el producto, por lo que algunas de las funciones parecían un editor gráfico y otras, una aplicación para crear sitios web. El boceto 2 puso el énfasis necesario: el programa estaba dirigido a especialistas en UI. Pero su problema era una gran cantidad de errores.

“Intentamos cambiar a Sketch a finales de 2013. Pero esta era la segunda versión y tenía muchos errores. Matamos mucho tiempo y luego tuvimos que volver a Photoshop”, dijo Yuri Vetrov, jefe del departamento de diseño y diseño de interfaz de Mail.Ru Group.

La aparición de la tercera versión de Sketch, bien depurada, propició el inicio de la popularización del programa entre los especialistas.

Bosquejo

"Sketch está muy optimizado: se pueden dibujar docenas de pantallas de aplicaciones en un solo documento, disponibles para editar sin acciones innecesarias y sin reducción del rendimiento", dice Anton Frolov, "Además, una interfaz muy bien pensada, la sensación que este es software de aquellos que Esto es lo que necesitamos: visualización rápida de sangrías, trabajo conveniente con símbolos y estilos, parámetros de elementos, atajos intuitivos, etc.

Por ejemplo, en Photoshop, los diseñadores tuvieron que ajustar constantemente la cuadrícula de píxeles para eliminar los bordes borrosos de los objetos. Los desarrolladores de Sketch agregaron ajuste automático de contenido a la cuadrícula, lo que ayuda a evitar bordes borrosos y otras irregularidades.

Otro ejemplo son los bordes redondeados de objetos rectangulares. En Photoshop, era posible establecer un redondeo solo antes de dibujar un objeto; si era necesario, los diseñadores tenían que cambiar la posición de las curvas manualmente píxel a píxel. Sketch brinda la posibilidad de personalizar los filetes de capa en cualquier momento a través del panel de configuración.

La última versión de Sketch tiene una integración aún más profunda con las herramientas nativas de Mac OS X: soporte para iCloud, Time Machine, guardado automático, representación de fuentes nativas y transmisión de diseños a un dispositivo móvil.

“Lo más importante, en mi opinión, es una interfaz de corte de gráficos bien pensada, que con un par de clics permite especificar qué carpetas, con qué nombres y tamaños cortar los gráficos. De forma predeterminada, se admite el corte para iOS y Android, pero puedes agregar tus propios formatos”, comparte Anton Frolov su experiencia.

Además, parte del trabajo en Sketch se puede automatizar mediante complementos. Por ejemplo, Measure e InVision, que le permiten preparar especificaciones para desarrolladores de forma rápida y cómoda. “Con Sketch, comencé a preocuparme más por la automatización del trabajo. Ahora hago muchas cosas a las que antes dedicaba mucho tiempo y atención usando complementos, tratando de encontrar una manera más sencilla y rápida de resolver el problema”, dice Artur Kasimov.

Cambiar a boceto

"La ventaja de Sketch es su baja barrera de entrada; literalmente, cualquiera puede aprender a trabajar en él en un par de días", dice Dmitry Novikov, especialista en UI de MacPaw. "Es importante que aquí estés directamente involucrado en el diseño y no trabajes en el editor; es decir, el programa en sí se vuelve invisible y puedes concentrarte en el producto que estás creando".

Sin embargo, cambiar de Photoshop a Sketch puede ser una experiencia extraña. "Estaba tan acostumbrado a Photoshop que el simple hecho de pensar en otros editores gráficos me hacía sentir incómodo", dice Kasimov. - La situación se complicó por el hecho de que mis compañeros diseñadores con los que trabajé entonces ya se habían pasado a Sketch y lo elogiaron de todas las formas posibles. Se burlaron de mí y se rieron. Pero seguí inventando excusas (principalmente para mí). Al principio dije que cambiaría cuando hicieran “zoom” con la rueda del mouse, luego me aseguré que al final del proyecto terminaría con Photoshop. Yo mismo he visto que la velocidad de trabajo de mis compañeros en Sketch ha aumentado”.

Novikov dice que pudo cambiar rápidamente a una nueva herramienta gracias a una decisión radical: borró todo de su Mac y dejó solo Sketch: "Solo una semana y es como si hubiera estado trabajando en él toda mi vida".

Una de las dificultades, según el diseñador de productos Yandex, Artur Kasimov, fueron los "atajos" inusuales de Photoshop: en Sketch eran diferentes por defecto: "No pensé de inmediato en ajustar todo manualmente por mí mismo. Pero cuando hice esto, la velocidad del trabajo aumentó notablemente”.

Además, los usuarios de Photoshop no estarán familiarizados con el principio de trabajar con objetos vectoriales; en Sketch es más parecido a Illustrator: “Me llevó bastante tiempo acostumbrarme a esto. Pero ahora entiendo que este principio es mejor. Mucho mejor”, afirma Kasimov.

Abandonando Photoshop

Sketch no es un producto perfecto, según muchos especialistas en UI entrevistados por CPU. Todavía hay muchos errores en el programa. Incluso existen recursos separados en Internet que recopilan errores y controlan su corrección.

“No hay suficientes herramientas para trabajar en equipo, lo cual es muy importante para estudios y empresas con equipos de diseñadores separados”, se queja Frolov. Además, Sketch prácticamente no funciona con rásteres, lo que en algunas tareas no nos permite abandonar por completo los productos de Adobe.

"Creo que no es necesario renunciar a una buena herramienta", responde Dmitry Novikov cuando se le pregunta acerca de renunciar a Photoshop. "Sketch no reemplaza completamente a Photoshop, es excelente para crear sitios web e interfaces, pero eso no significa que no pueda usar un producto de Adobe para preparar fotografías o un editor 3D para modelar y renderizar".

Sin embargo, dado el bajo costo de adquirir Sketch ($99,99) en comparación con Photoshop, Adobe puede perder una gran parte de sus clientes habituales en forma de especialistas en UI, dicen los diseñadores.

Hola a todos, soy Anton Oleynik, diseñador de interfaces, fanático de Sketch y uno de los autores del proyecto temático sketchapp.me. En el post invitado de hoy os contaré en detalle sobre este editor gráfico para Mac OS.

A pesar de que Sketch ya está firmemente establecido en muchos equipos conocidos, a menudo veo diseñadores (especialmente con experiencia) que están tan estrechamente ligados a muchos años de hábitos con sus viejas herramientas que incluso discuten negativamente sobre opciones alternativas (y sobre el uso). ellos en el flujo de trabajo y no hay duda). Si eres uno de esos escépticos, bienvenido.

Entonces, estas son algunas de las razones más importantes para probar incluso una aplicación Sketch no tan nueva.

Sketch: editor de gráficos para Mac OS

Sí, esto suele considerarse un gran inconveniente. De hecho, esta es una gran ventaja de la aplicación, porque aprovecha al máximo las herramientas del sistema OS X (guardado automático, dibujo, representación de texto). En Windows, tendrías que sufrir con Sketch de la misma manera que lo harías con cualquier programa de gráficos de gran tamaño.

No funciona con ráster

Todo también está anotado como negativo. Por supuesto, es todo lo contrario. Boceto - vector y para diseño de interfaz. Este no es un programa de retoque fotográfico. Bueno, creo que nadie ha estado dibujando interfaces en trama desde hace cien años.

Archivos pequeños

Los documentos en el editor Sketch pesan significativamente menos que los archivos ai o psd (nuevamente, gracias al uso de recursos de software del sistema en Mac).

Por ejemplo, el archivo btn.sketch con un botón pesa 33 KB, el mismo btn.ai pesa 194 KB, el mismo btn.psd pesa 91 KB. Estos documentos son pequeños, pero ya se puede estimar aproximadamente la proporción.

Interfaz de boceto simple

A primera vista, pensarás que has abierto algo como Keynote. Sí, una apariencia tan limpia de un programa profesional (!) es un poco confusa para los chicos que están acostumbrados a apuntar con el mouse durante mucho tiempo a las casillas de verificación en innumerables paneles de software de Adobe. Sin embargo, este es exactamente el caso cuando menos = más. Esta sencilla interfaz le da tiempo para pensar en su trabajo y no en la herramienta.

Un poco sobre la interfaz.

A la izquierda está el panel de capas. Es un poco inusual después de Photoshop, pero te acostumbras rápidamente. En la parte superior de este panel hay una lista de páginas. Se puede cambiar al estado "abierto", lo cual es conveniente si no hay muchas páginas en el archivo.

[Panel de capas de la aplicación Sketch]

En la parte superior hay una barra de herramientas (“barra de herramientas”). Este, al igual que otros programas en Mac, se puede personalizar a tu gusto. No hay muchos instrumentos y la mayoría los recordarás en el teclado.

A la derecha está el panel contextual (llamémoslo así). Uno muy similar, sólo que horizontal, estaba en el último Fireworks. El panel cambia dependiendo de lo que estés haciendo en el lienzo. Hay tres modos: propiedades de grupo, propiedades de forma y propiedades de texto.

Paginas y lienzos

Un documento de Sketch se divide en páginas. Las páginas están a su vez divididas en lienzos. Esto hace que organizar las pantallas de sus aplicaciones sea extremadamente conveniente. Por ejemplo, crea una página de "Iniciar sesión" y dentro hay varios lienzos con diferentes estados de la pantalla "Iniciar sesión".

En principio, Photoshop e Illustrator ya pueden guardar varios lienzos en un documento, pero todavía les falta un nivel adicional (páginas, es decir).

Vinculación total a píxeles de todo y de todos.

Sketch tiene mucho cuidado al asegurarse de que todo encaje en píxeles perfectos. Si algo está borroso en alguna parte, existe una manera fácil de solucionarlo.

Estilos

La aplicación Sketch, por supuesto, tiene estilos gráficos y estilos de texto. Funcionan, nuevamente, al principio de manera un poco habitual: cuando actualizas el estilo de un objeto en algún lugar (cambias el trazo, el color, la fuente), el estilo se actualiza automáticamente en todas partes. No hay botones de "Actualizar estilo".

Los símbolos del editor de bocetos son muy similares a los símbolos de Photoshop y un poco a los símbolos de Illustrator. El símbolo aquí es una carpeta (solo que de otro color), dentro de la cual puede haber cualquier cosa, pero ningún otro símbolo. Funciona de la misma manera que los estilos: actualizado en un lugar, se actualiza automáticamente en todas partes.

Existe una técnica un poco confusa y no documentada formalmente para anidar algunos caracteres dentro de otros, pero hablaremos de eso en otro momento..

Exportación conveniente

Exportar gráficos es muy simple y conveniente. Cada elemento tiene una acción "Hacer exportable", donde puede seleccionar los formatos y tamaños deseados de los archivos finales. También hay sectores familiares para seleccionar manualmente un área para exportar.

Un punto muy conveniente a la hora de exportar es la elección de varios formatos y tamaños a la vez.

Neto

El editor de gráficos Sketch tiene una cuadrícula integrada y flexible. No es necesario marcar el diseño manualmente ni utilizar complementos de terceros. Todo es compatible desde el primer momento y se puede personalizar para satisfacer cualquier necesidad en cualquier momento.

Representación de texto del sistema

Debido a que Sketch utiliza recursos del sistema para representar gráficos, el texto que contiene se ve exactamente igual que en el navegador de un producto en vivo.

Complementos de bocetos para todas las ocasiones

Como todas las buenas aplicaciones, Sketch también tiene extensiones. Las acciones van desde simples (organizar los objetos seleccionados en incrementos de 10 píxeles) hasta complejas (buscar todas las capas de texto en un documento con la palabra "Adobe" y reemplazarlas con "Adobe", sin distinguir entre mayúsculas y minúsculas). Si un programa no puede hacer algo muy necesario, lo más probable es que exista un complemento para ello.

Para instalar un complemento en Sketch, descárguelo (generalmente desde el GitHub del desarrollador) y simplemente haga doble clic en él o muévalo a la carpeta Complementos. Abra la carpeta: menú Complementos->Revelar carpeta de complementos…

[Mostrar carpeta de complementos en Sketch]

Luego, en el menú Complementos, tendrá un elemento correspondiente al último complemento.

Lista de extensiones para empezar:

• Sketch Commands: un gran paquete de extensiones, útil en muchas situaciones;
• Cambiarle el nombre: para nombrar y cambiar el nombre de las capas de forma cómoda y rápida;
• Generador de contenido: generador de fotografías, textos, nombres, nombres geográficos.

Puede resultarle útil tener una pequeña aplicación llamada Toolbox que facilitará la instalación/desinstalación de complementos para Sketch.

Corto período de formación

Por supuesto, existen cursos online sobre este editor gráfico para Mac OS (parece que incluso los hay de pago), pero en principio, sólo un par de horas te bastarán para descubrir por tu cuenta todos los detalles más importantes. Al principio te resultará inusual, pero sólo porque lo compararás con Photoshop.

Epílogo

¿Qué podemos decir al final de la reseña de Sketch? - Por supuesto, no es ideal. A veces hay frenos, faltan algunas funciones (sin trama), pero incluso en este estado puede facilitar y acelerar enormemente el desarrollo de su diseño.

Puedes descargar el programa Sketch y también aprender todo sobre el editor Sketch en el sitio web.