Menu

Curso De Sketch

Lecciones del Curso Gratuito

Introducción Diseño Web

Bienvenidos a álex tips mi nombre es eugenia y en este primer vídeo vamos a empezar con una serie de vídeos para aprender a usar sketch bueno sketch es una de las herramientas de diseño web más populares en la actualidad los diseñadores hemos estado usando esta herramienta para todos’ de interfaces para aplicaciones móviles hasta logos identidad de marca gráficos para llevar a cabo el proceso de uex y bueno mucho más sketch es relativamente nueva solo tiene versión para mac y es una aplicación basada en vectores es muy poderosa fácil de aprender y sobre todo muy liviana y bueno esto fue lo que hizo que me decidiera a usarla por completo y les puedo asegurar que ya poco uso photoshop e illustrator que por cierto bueno son mucho más caros que sketch que podemos ver aquí que estar en 99 dólares no tengo ninguna afiliación con el sketch bohemian como ven simplemente me encanta esta herramienta y creo que tendría que haber más recursos especialmente en español para aprender a usarla y también mi objetivo es aprender con ustedes de sus comentarios ideas y bueno lo que vaya surgiendo entonces para empezar puedes descargar la aplicación desde aquí o puedes comprarla directamente y luego vamos a ver las características más importantes bueno algo muy importante es que sketch se basa en vectores y por lo tanto los vectores tienen una gran escalabilidad entonces podemos tener un diseño muy preciso también tiene la opción de poder agrupar los objetos en diferentes capas y también tiene la opción de poder buscar esos objetos y que eso es muy práctico el inspector es bueno muy parecido a lo que ya conocemos de photoshop e illustrator y algo para destacar aquí es la opción de exportación que tiene varias opciones que son muy prácticas a la hora de diseñar interfaces web y tiene otras herramientas como por ejemplo los elementos reutilizables que podemos crear por ejemplo símbolos que se pueden que tienen dentro de los símbolos elementos y podemos luego reutilizarlos en otras notas en otras áreas modificarlos y que se modifiquen todos al mismo tiempo son es muy práctico nos puede ahorrar horas de trabajo y bueno acá también podemos tener capas con estilos es decir una capa que podemos modificar los bordes en las sombras etcétera también podemos tener texto que sea reutilizable árboles y grises que son muy importantes a la hora de diseñar interfaces y editar bit maps bueno como les comenté la parte de exportación también podemos tener otras funcionalidades que quizás bueno para algunos sean prácticas para otros no como por ejemplo exportar el css pero bueno lo ideal sería hacer nuestro css personalizado pero tiene algunas funcionalidades que son prácticas para algunos diseñadores que no tienen conocimientos de maquetación por ejemplo y bueno es nativa de imac por lo tanto va a usar las propiedades del framework de atún de manera muy productiva y una de ellas es que puedo por ejemplo podemos visualizar nuestro proyecto en diferentes dispositivos al mismo tiempo que esto no lo he probado así que bueno vamos a probarlo en alguno de estos vídeos que se van a ir publicando todos los miércoles así que bueno los espero y si les gustó este vídeo de like y suscriban para los nuevos vídeos de sketch hasta luego.

Explorando Sketch

Bienvenidos al ibex tips mi nombre es eugenia y en el vídeo de hoy vamos a explorar un poco la interfaz de sketch bueno este vídeo va a servir para todos aquellos que todavía no hayan explorado la herramienta y quieran conocer un poco cuáles son las propiedades que ofrecen bien lo primero que vemos es el canvas el canvas es nuestra área de trabajo y no tiene medidas definidas y como vemos si arrastramos la regla de esta forma vemos que nunca se termina entonces es importante que nosotros definamos nuestra área de trabajo es decir si vamos a diseñar para texto o para dispositivos móviles etcétera bueno si queremos volver a cero hacemos doble clic aquí bueno la parte de arriba nos muestra las herramientas básicas y podemos personalizarlo si hacemos clic derecho podemos ir a costa mais toolbar y podemos desde acá arrastrar algunas de las opciones que más utilicemos o también podemos quitar algunas que no utilicemos si las arrastramos aquí bien también tenemos la parte de insert que son todas las herramientas que podemos utilizar como crear elementos vectoriales y utilizar el pincel formas texto imagen el árbol que los albos son los que nos van a definir nuestras áreas de trabajo slides si queremos en definir áreas para exportar símbolos que son elementos agrupados para que sean luego reutilizados y textos también para reutilizar que eso lo vamos a ver en otros vídeos ahora nos vamos a ver de hacer una forma y fíjense que ahora son una forma se crea automáticamente una capa.

Artboards

Bienvenidos a álex tips mi nombre es eugenia y en el vídeo de hoy vamos a ver sobre árboles en vídeos anteriores les comentaba que los árboles son muy importantes para poder definir nuestra área de trabajo nosotros cuando comenzamos con es que tenemos el canvas y el canvas es un área infinita si nosotros y por ejemplo creamos una forma y luego hacemos zoom out podemos ver que continúa y desaparece entonces aquí tenemos que es un área infinita entonces nosotros para poder definir nuestra área por ejemplo si queremos diseñar para texto o para dispositivos móviles y queremos definir realmente cuál va a ser la medida entonces vamos a utilizar para ello los árboles para poder agregar uno vamos a ir a insert árbol podemos arrastrar el cursor y ya definir con una medida cuál va a ser nuestra área de trabajo o también lo que podemos hacer es simplemente presionar la tecla y también arrastramos bien y por otro lado tenemos los árboles ya predefinidos por sketches y presionamos la tecla a fíjense qué aquí nos van a aparecer todos los árboles predefinidos tenemos para ello vez para responsive web design para material design para android para mac bueno también medidas de papel tenemos esos es un montón de árboles predefinidos que los podemos simplemente fíjense que si yo borro aquí presiono la tecla me parecen los predefinidos y puedo seleccionar uno de ellos y listo.

Páginas y Plantillas

Bienvenidos a álex tips mi nombre es eugenia y en el vídeo de hoy vamos a hablar sobre páginas y plantillas bueno en el último vídeo estuvimos hablando de árboles que nos ayudan a delimitar nuestro espacio en el canvas pero ahora digamos que queremos separar o diferenciar estos árboles en grupos pero manteniéndonos en el mismo proyecto bueno es que nos da otra opción para organizarnos que son las páginas aquí del lado izquierdo podemos ver haciendo clic en este icono de la derecha el listado de páginas por ahora tenemos solamente una que es donde creamos nuestros árboles y podemos haciendo doble clic renombrar la podemos también crear otra página haciendo clic en el más y también podemos organizarlas si lo arrastró la página sobre otra y puedo organizar dónde van a estar posicionadas por ejemplo yo puedo copiar también un árbol lo voy al árbol copio y pego el árbol en otro en otra página y fíjense si ahora yo determino que este árbol sea exportable y luego voy a los otros y también hago lo mismo luego cuando vaya a file export para exportarlos fíjense que me muestra un símbolo de advertencia esto me indica que están exportando dos árboles con el mismo nombre y el nombre del árbol va a ser el nombre del archivo entonces me está indicando aquí que tengo que renombrar los entonces yo voy a ir a una de las páginas y voy a renombrar mi árbol bueno y cuáles son los beneficios de usar páginas por lo que podemos usar las páginas para diferenciar nuestro proyecto en etapas por ejemplo las etapas de diseño yo acá estoy determinando que para ver una página para los white frames y otra para el diseño final también podemos tener en una de las páginas en la guía de estilo de diseño o podemos usar diferentes páginas para diferenciar los dispositivos por ejemplo una página donde diseñamos todos los árboles para android o todos para web o app uruguay y bueno de esta forma entonces podemos usar las páginas para organizar nuestro proyecto y el archivo va a ser muy liviano esto es lo bueno de sketch que a diferencia de otros programas como photoshop por ejemplo van a ver que el archivo va a ser muy liviano y van a poder trabajar ágilmente yendo de una página a la otra también algo importante de las páginas es que podemos tener una página que sea para los símbolos que eso lo vamos a ver en otros vídeos los símbolos son elementos reutilizados entonces podemos tener todos los símbolos que utilizables en una sola página bien y con respecto a las plantillas bueno las plantillas nos van a ayudar para poder comenzar a diseñar nuestro proyecto más rápido podemos por ejemplo usarlas para la strata de wire frames hacemos clic en find you from template podemos seleccionar una de las opciones que tenemos aquí por ejemplo material design y vamos a ver que tenemos un montón de elementos que podemos utilizar copiar y pegar a nuestro proyecto y fíjense que se nos abre un nuevo archivo un nuevo proyecto donde tiene dos páginas una donde están todos los diseños que estamos viendo aquí y otra están los símbolos reutilizables que es de lo que yo les comenté anteriormente entonces podemos por ejemplo tomar uno de los elementos de aquí y copiarlo en nuestro proyecto vamos a ajustar el árbol a la medida de 360 bien entonces bueno de esta forma podemos diseñar todo mucho más rápido sin recrear todos los elementos ya conocidos de interfaz de dispositivos o de web bien eso fue todo por hoy suscriban para ver los próximos vídeos y dejen sus comentarios si tienen alguna pregunta o sugerencias para próximos vídeos hasta luego.

Formas

Bienvenidos al ex tips mi nombre es eugenia y en el vídeo de hoy vamos a hablar sobre formas y les voy a mostrar que vamos a estar diseñando este pequeño proyecto de prueba que va a ser la página de para texto y para mobile vamos a dibujar algunas formas aquí en nuestra área de trabajo tenemos que ir a insert shape y ahí vamos a ver las opciones que tenemos en cuanto a formas también vemos que cada una de ellas algunas de ellas tienen atajos de teclado por ejemplo si se presiona la tecla r voy a poder dibujar un rectángulo o un círculo la tecla u que es para un rectángulo con las puntas redondeadas bien en la parte de aquí arriba tenemos opciones para cuando trabajamos con las formas por ejemplo si queremos editar una forma hacemos clic luego editar y entramos al modo de edición donde yo puedo modificar con los nodos esta forma también lo puedo hacer de otra forma por ejemplo salgo del modo de edición bueno seleccionó la forma y luego presionó enter y ya ingresó a el modo de edición si presionó entrar de nuevo voy a salir del modo también puedo transformar un objeto y también puedo rotarlo haciendo clic en el objeto y luego en rotación pero también si queremos rotar lo podemos hacer de otra forma no solamente tocando aquí en la opción de rotación podemos seleccionar el objeto.

Operaciones Booleanas

En este tutorial de Sketch aprende todo sobre creación de iconos y formas con Operaciones Booleanas. Descarga el archivo del proyecto de Operaciones Booleadas: http://bit.ly/2eRJejN​ Todos los tutoriales de Sketch aquí: https://goo.gl/622aEW​ ¿Quieres aprender Sketch de forma Avanzada? Apúntate al curso profesional aquí: https://goo.gl/PBvuCQ

Instalando Plugins

Bienvenidos a mayores tips mi nombre es eugenia y en el vídeo de hoy vamos a hablar sobre plugins bueno qué son los plugins son extensiones de código creadas por otros desarrolladores para mejorar las propiedades de la herramienta son como pequeñas aplicaciones que instalamos que nos van a ayudar a optimizar mucho más nuestro trabajo en sketch por ejemplo si tengo acá un plugin que me posibilita crear texto automáticamente un texto lorem ipsum por si no lo conocen es el texto que solemos ir a la página de lunes epson hacemos clic en generar párrafo copiamos y luego vamos a sketch y lo pegamos y tenemos acá tenemos aquí un párrafo con un texto ya creado para poder crear nuestro prototipo mucho más rápido bueno pero yo quiero hacer esto de manera automática sin tener que ir al sitio web entonces voy a generar un texto voy a hacer clic en la cajita de texto hago clic en plug-in blandón plugin y acá me va a generar entonces ya el blog en epson si yo por ejemplo quiero crear otro texto y voy a agregar que tenga que tener 50 palabras fíjense yo selecciono plugin random y me va a generar el párrafo con esa cantidad de texto bueno vamos a entonces aprender cómo instalar este este plugin tenemos varias opciones para encontrar plugins para sketch podemos ir directamente a puntocom sketch plugins y vamos a ver acá un directorio de los plugins creados por otros desarrolladores y bueno acá podemos buscarlo pero para que sea más fácil podemos directamente desde sketch vamos a hacer clic en plugins y luego manage y luego vamos a ir a get plugins y nos va a llevar a la página de sketch up a la sección de plugins donde podemos buscar el que necesitemos bueno otra opción también que tenemos es que podemos instalar esta aplicación que se llama sketch tool box que me va a permitir instalar automáticamente también en plugins bueno esta es la herramientas yo puedo buscar acá también loren y hacer clic en instalar y se va a instalar automáticamente bueno pero antes de mostrarles cómo instalar el plugin les voy a mostrar cómo desinstalarlo porque yo ya lo tengo aquí instalado entonces voy a ir a managers plugins voy a seleccionar mi plugin luego hacer clic aquí abajo y hacer clic en an instale entonces voy a desinstalarlo listo y ahora nos muestra entonces que no tengo ningún plugin instalado bueno entonces ahora voy a ir nuevamente a la página de sketch voy a buscar el plugin que quiero instalar este de aquí voy a entonces descargarlos y voy a hacer clic en el zip voy a abrir entonces el archivo y simplemente lo que tengo que hacer es doble clic sobre el archivo de sketch algo doble clic y fíjense que acá ya me muestra un aviso de que el plugin fue instalado bueno luego voy a ver aquí que se ha instalado mi plug-in y ya puedo comenzar a usar entonces recuerden que si quieren instalar este plugin lo que tienen que hacer es crear una caja de texto seleccionan y luego hacen clic en shift control l y ya se va a generar el texto bueno luego sí quiero especificar una cantidad de palabras voy a crear una caja de texto luego 2 puntos y pongo aquí en la cantidad de palabras que quiero selecciono la caja de texto y luego hago shift control l y listo se va a generar entonces el párrafo con esa cantidad de palabras bueno los próximos vídeos vamos a estar utilizando estos plugins y les voy a ir recomendando el plugins muy interesantes para ir aplicando a nuestros proyectos bueno espero sus comentarios no se olviden suscribirse así pueden ver los próximos vídeos de sketch y nos vemos en el próximo tutorial.

Texto y Estilos

En este tutorial de Sketch aprende todo sobre Textos y Estilos para trabajar más rápido a la hora de crear nuestro contenido. Todos los tutoriales de Sketch aquí: https://goo.gl/622aEW​ ¿Quieres aprender Sketch de forma Avanzada? Apúntate al curso profesional aquí: https://goo.gl/PBvuCQ

Actualización y Capas

Bienvenidos nuevamente al ibex tips mi nombre es eugenia en el vídeo de hoy vamos a hablar sobre la última actualización de sketch y vamos a ver algunos tips que nos van a ayudar a la hora de trabajar con muchas capas bueno recientemente sketch ha anunciado una nueva actualización que es la 41 y donde nos muestran que han cambiado su logo y también su ventana de bienvenida acá les voy a mostrar esta es la nueva ventana de bienvenida que si ustedes no la pueden ver van a a health y hacen clic en welcome to sketch y van a poder ver la nueva ventana bueno en la nueva ventana de bienvenida lo que vemos es que tenemos acceso directo a los templates y eso es muy práctico podemos por ejemplo acceder al template de iconos para android entonces ya tenemos todos los árboles agregados para poder trabajar en iconos para android también por ejemplo podemos acceder a iconos para ios uruguay para ios design y bueno esto nos va a facilitar mucho el trabajo así que muy buena esta actuación de la ventana de bienvenida de sketch bueno también han actualizado una propiedad de los símbolos que es algo que vamos a ver en el próximo tutorial y también que ahora sketch cloud que es la funcionalidad que tenemos para poder compartir nuestros documentos en la nube se puede proteger con contraseña si quieren crear su propiedad cuenta de sketch cloud van a ir a sketch preferencias y cloud y ahí bueno pueden crear su propia cuenta.

Símbolos

Bienvenidos al ibex tips mi nombre es eugenia y en el vídeo de hoy vamos a aprender a crear y utilizar símbolos en sketch bueno continuando con nuestro proyecto lo que vamos a hacer ahora es completar la parte de aquí abajo para ver un ejemplo de los símbolos vamos a poner aquí aplicación vamos a poner descargar la app tipografía o pensadas como es grande y regular bueno lo que vamos a hacer ahora es crear dos botones para poder descargar la aplicación desde la appstore y desde google plate entonces vamos a crear con bueno tocando la tecla r un rectángulo hacemos un rectángulo que tengan 377 de alto y este rectángulo le vamos a dar un color aquí ya tengo el color guardado entonces vamos a copiarlo y le voy a sacar el borde y le voy a dar un radio de 100 un mayor radio posible entonces así ya me queda el botón si bueno lo que voy a hacer ahora es agregarle un icono entonces voy a ir a perdón antes voy a agregar la sombra voy a ir aquí seleccionando mi forma a shadows y voy a darle aquí 16 y 24 listo entonces ya tengo mi botón diseñado y ahora voy a agregar un icono entonces voy a ir a insert image y voy a agregar el icono de apple y le voy a agregar aquí un texto que diga a postor voy a hacer más pequeño el texto 24 del niño con el icono y listo ya tengo entonces mi primer botón que lo que voy a hacer ahora como el botón porque quiero en crear un igual entonces lo que voy a hacer es convertirlo en un símbolo para poderlo utilizarlo entonces voy a seleccionar todos los elementos voy a agruparlos con comas de g voy a seleccionar hacer clic derecho y hacer clic en crear símbolo o también puedo hacerlo de aquí arriba que es un acceso directo para poder crear el símbolo entonces voy a hacer clic aquí y fíjense lo que sucede bueno me muestra una pantalla para que yo pueda crear el nombre de mi símbolo entonces vamos a poner e y le voy a dar ok fíjense ahora se crea una nueva página que es mi página de símbolos y aquí donde se van a guardar todos los símbolos que yo vaya creando bueno ahora eso lo que quiero es tener otro botón exactamente igual pero modificando le el icono y el texto.

Layout Grids

Bienvenidos al existir grandes eugenia y en el vídeo de hoy vamos a ver todo sobre leyes ruiz en scripts continuando con el diseño que hemos estado realizando a lo largo de estos tutoriales vemos que nuestro diseño no ha quedado perfectamente alineado esto se debe a que no hemos utilizado una grilla para nuestros diseños grilla o retícula y lo que comúnmente se conoce en el diseño editorial a esas guías que usamos para alinear y ordenar nuestros elementos y contenidos en sketch éstas se llaman grids y layout cruyff y a partir de ahora vamos a llamarlas de esta forma para no confundirnos las podemos ver aquí arriba a la derecha donde dice view y vamos a ver qué dice show it y soul layout y luego podemos configurar sus opciones desde aquí with settings layout settings entonces si queremos ver nuestro nuestra grilla hacemos click aquí y vemos la grilla que podemos utilizar para alinear nuestros elementos pero para diseño web lo que más nos interesa es la parte de soul layout vamos a desactivar esta y vamos a mostrar show layout show layout se la conoce como layout grid sí porque en diseño web siempre se le ha llamado como grid pero es que la ha puesto aquí como layout pero básicamente siempre se le dice cruyff así que cuando vean algún artículo o algo que hable del wef de sketch es porque están hablando de esta y no tanto de ésta bueno las leyes grid son importantes a la hora de diseñar sitios web responsive o cuando utilizamos frameworks como por ejemplo booster o foundation o algún alguna grilla que estemos utilizando y cargamos implementarla de nuestro diseño comunmente vamos a ver grillas de 12 o 6 columnas por ejemplo booster up trabaja con 12 columnas y bueno ahora lo estamos visualizando pero vamos a evitarla entonces vamos a ir a view layout settings y desde aquí vamos a evitar nuestro layout.

Máscaras + Diseño de Interfaz para iPhone!

Bienvenidos al ibex tips mi nombre es eugenia y en el vídeo de hoy vamos a aprender a usar máscara ciones sketch para ello vamos a diseñar esta interfaz para iphone y les voy a dejar el archivo en la descripción del vídeo [Música] muy bien vamos a empezar voy a crear un nuevo archivo y voy a seleccionar un árbol para el iphone 7 y lo mejor que voy a hacer va a ser insertar una imagen vamos a seleccionar la imagen de parís bien sé que la imagen de paris es muy grande entonces yo quiero escalarla un poco pero no quiero que se vea todo esto de aquí abajo entonces para eso voy a utilizar una máscara porque la máscara me va a ayudar a poder delimitar la visualización de mis figuras entonces voy a crear un rectángulo voy a seleccionar la tecla r el rectángulo va a quedar por ahí bien entonces ahora voy a seleccionar el rectángulo y la imagen de parís fíjense quitando dos seleccionados voy a hacer clic derecho y seleccionó mask esta es la opción que yo más uso es la más rápida vamos a hacer un poquito que se vea un poquito más porque quedó muy cortado entonces voy a volver voy a hacer así selecciona otra de los elementos más bien entonces aquí ya me quedo mi figura de parís enmascarada fíjense que se creó un grupo donde me aparece la figura arriba de la máscara porque porque todo lo que vaya arriba de la máscara va a estar enmascarados y yo por ejemplo ahora creo un círculo y lo agrego dentro del grupo sobre la máscara fíjense que también aparece la flechita entonces eso me está indicando que ese está enmascarando si yo ahora muevo el círculo fíjense que aparece enmascarado si lo quiero desenmascarar lo es decir que no forme parte de esto voy a hacer clic derecho y voy a seleccionar ignorar la máscara entonces selección aquí y fíjense que desaparece la flechita y ahora ya esto lo puedo manejar sobre esta imagen bueno esto lo vamos a quitar muy bien lo que voy a hacer ahora va a ser agregar el usuario entonces voy a insertar la imagen de avatar vamos a escalar esta imagen entramos ahí y voy a crear el círculo para enmascarar la pero fíjense qué bueno también si tenemos separadas la imagen y la máscara podemos seleccionar ambos elementos hacemos clic luego en enmascarar también está la opción aquí y fíjense que la imagen no se visualiza pero podemos seleccionar el grupo vamos a hacer clic a la imagen y la movemos hasta que veamos que aparece en la máscara.

Dibujo vectorial 

Bienvenidos al ex tips mi nombre es eugenia y en el vídeo de hoy vamos a ver las opciones de dibujo vectorial en sketch [Música] bueno en vídeos anteriores habíamos visto cómo crear formas en sketch en el vídeo número 5 si quieren revisarlo pero también podemos crear estas figuras con las opciones de dibujo vectorial tenemos por ejemplo la de lápiz que es para dibujar libremente vamos a estar aquí un ejemplo nos ha creado otro árbol y seleccionó la opción de pensar que la pueda activar con la tecla t podemos dibujar también formas de manera libre estos buenos tenemos muy buena experiencia con el dibujo que no es mi caso así que bueno les voy a mostrar la otra opción que es la opción de vector que es la que ella comúnmente muchos deben de conocer que es de crear formas con los nodos no va haciendo clic y va creando la figura uniendo los nodos y también podemos hacer que un nodo haciendo clic y luego arrastrando tenga una curva y fíjense que cuando creamos de esta forma me muestra cómo voy a crear la próxima la próxima línea si eso es muy bueno entonces yo así puedo tener como un preview de lo que voy a realizar y si por ejemplo yo realizo algo mal puedo luego hacer clic en skate seleccionar un nodo eliminarlo y luego seleccionar otro y eliminarlo luego puedo unir los nodos fíjense que si yo no uno de los nodos y dejo mi figura de esta forma ahí se crea la figura yo puedo cerrarla creando un film y un rellenado la puedo sacar de esta forma o también puedo seleccionar la doble clic donde ya entró de nuevo al modo de edición de vector y fíjense que si voy aquí a donde dice close pub puedo cerrar las figuras y poder cerrar los nodos que han quedado abiertos eso es que lo calcula automáticamente y fíjense dado clic en close pad y ya se hará la figura y puedo rellenarlas también un tipo interesante para saber cuando trabajamos con nudos es que podemos ejemplo para esta figura algo doble clic y puedo como ya les mostrará otros vídeos también seleccionar aquí la clase de curvatura que le voy a dar aquí tenemos las opciones y también si hago un clic en un lugar donde no haya un nodo puedo crear otro nodo y también así crear una figura más compleja.

Content Generator

Bienvenidos al ibex tips mi nombre es eugenia y en el vídeo de hoy quiero mostrarles un plugin que es muy útil a la hora de generar contenido de forma rápida [Música] este plugin nos va a ayudar a agregar contenido de por ejemplo imágenes de personas datos de una persona texto aleatorio y bueno con esto podemos entonces generar nuestro prototipo mucho más rápido para poder instalar este plugin que se llama contienen generator pueden ir al link que voy a dejar en la descripción del vídeo y para instalarlo aquí recomiendan hacerlo de forma manual fíjense aquí abajo en la parte de instalación están las instrucciones y efectivamente eso quise instalarlo con la herramienta de pull back y no me ha funcionado entonces bueno lo mejor siempre es tratar de instalarlo manualmente aunque no es la forma más rápida pero bueno vamos a descargar el archivo bueno aquí tengo una carpeta entonces voy a abrir y voy a hacer doble clic en el archivo de sketch del plugin de scratch y ya se instaló también recuerden que lo que podemos hacer es hacer click en play in manage plugins y luego get playing y vamos a ir a la página de sketch plugins y ahí podemos buscar content y encontramos directamente la página de hip hop bueno entonces si nos fijamos ahora en plugins podemos ver que tenemos el plugin instalado y tenemos varias opciones bueno vamos a crear primero un árbol para tener nuestra área de trabajo y voy a generar un círculo que va a ser como el place holder de la imagen que va a contener la imagen y luego también tenemos que generarlos page holders para el texto los contenedores si sería contenedores los contenedores para el texto se puede agregar aquí.

Recursos para Iconos

Bienvenidos a los ex tips mi nombre es eugenia y en el vídeo de hoy quiero mostrarles algunos recursos a la hora de trabajar con iconos en sketch [Música] bueno primero quiero mostrarles algunos sitios para poder descargar unos iconos que están muy buenos por ejemplo acá tenemos el sitio ego icons y bueno aquí pueden descargar y otros iconos que están muy bien diseñados una vez que descargaron los iconos van a ver que van a recibir un email donde van a descargar el pack y van a poder utilizar estos iconos directamente en sketch en abrir el archivo de sketch y simplemente copiar y pegar el icono que prefieran en su proyecto a también todo comentarios esto que es muy práctico si tienen la última versión actualizada de mac van a poder activar la opción de poder trabajar en una vista de sketch con varios con varios proyectos entonces tienen que ir a la preferencia del sistema luego hacer clic en doc y luego seleccionar en preferencia de pestaña la opción siempre o always si no tienen inglés y de esta forma entonces para poder trabajar como ven aquí con diferentes proyectos en una sola vista por otro sitio que también me pareció muy interesante para compartir con ustedes es icons 8 punto como pueden descargar también iconos buscar y lo bueno es que pueden buscar iconos según el sistema para el cual lo ustedes van a diseñar entonces si voy a diseñar para ello vez puedo buscar iconos específicos para el sistema [Música] también puedo hacer clic en generar html entonces puedo directamente acceder al código html del icono otro sitio muy interesante esta realidad vende los paquetes de iconos están muy buenos es icons mind puntocom y aquí pueden ver la variedad de iconos que tienen y el precio del paquete y fíjense que el precio va a depender también del formato con el cual pueden descargar los archivos y otro sitio que también vende packs de iconos es núcleo up y tiene una aplicación que ustedes pueden descargar que tiene ofrece iconos gratuitos y otros de pago se pueden descargar la aplicación y fíjense que yo arrastro un icono simplemente a mi proyecto de sketch puedo modificar estos iconos fácilmente cambiarles el color bueno todo [Música] y luego si quieren más iconos pueden activar la opción que está arriba de la aplicación y también quiero mostrarles una aplicación que nos ayuda a organizar los iconos que hayamos descargado si descargamos iconos gratuitos o de los packs que les acabo de mostrar podemos usar alcóntar para administrar todos estos iconos entonces podemos crear como les estemos dando aquí un set de iconos podemos buscar iconos gratuitos desde la página de alcóntar fíjense que ofrece bastantes iconos.

Diseño Web Responsive con Auto Layout

Bienvenidos al ibex tips mi nombre es eugenia y en este vídeo vamos a ver cómo usar este fabuloso plugin para sketch llamado auto layout antes de comenzar con el tutorial quiero comentarles que este vídeo es parte del curso avanzado de sketch que estaré lanzando en breve si quieren ser notificados el día del lanzamiento solo tienen que suscribirse a la lista en new ex tips online.com bueno vamos a empezar auto layout es un plugin que considero que realmente va a cambiar al 100% la forma en la que trabajamos yo no estuve probando estos días y bueno realmente todavía no puedo creer lo genial que es así que por eso quería compartirlo con ustedes como bien en el ejemplo lo que podemos hacer con auto layout es adaptar nuestro diseño a diferentes tamaños de pantalla esto es buenísimo porque hasta ahora tenemos que hacerlo todo a mano pantalla por pantalla pero ahora listo con un par de clicks adaptamos nuestro diseño y podemos presentarlo al cliente para que vea cómo se adapta el diseño a diferentes pantallas o compartirlo con el equipo de desarrollo y optimizamos un montón nuestro tiempo de trabajo bueno para comenzar entonces tenemos que ir a el sitio de el plugin que les voy a dejar el enlace en la descripción del vídeo simplemente hacemos clic aquí para descargar el archivo y luego hacemos doble clic sobre el archivo como les mostré en otro tutorial sobre plugins que simplemente le hacemos doble clic y se instala y lo vamos a poder ver aquí en la sección de plugins acá tenemos que dice auto layout y bueno también vamos a ver que se instaló aquí abajo tenemos entonces las herramientas básicas y también podemos hacer clic aquí donde dice pin y vamos a ver las opciones avanzadas bueno antes que nada quiero mostrarles cómo funciona auto layout y qué es lo que vamos a realizar aquí tengo un prototipo y voy a seleccionarlo y fíjense que cuando lo amplio fíjense que los elementos se adaptan y también puedo presentarlo de esta forma.

Librerías y Proyecto iPhone X!

Bienvenidos a álex tips mi nombre es eugenia y en el vídeo de hoy vamos a ver librerías en es que si es tu primera vez en el canal te cuento que aquí hablamos de diseño experiencia de usuario y diseño de interacción antes de comenzar te comento que ya está disponible el proyecto de iphone x con sketch quédate hasta el final de este vídeo para saber más bueno hace ya dos meses es que ella actualizó a la versión 47 así que les debía este update y este update realmente es muy importante aquí ya vemos cuando ingresamos a export updates fíjense ya estamos en la versión 47.1 y bueno realmente aquí vemos una funcionalidad muy destacada que son las librerías que ahora les voy a mostrar cómo funcionan y son realmente muy útiles a la hora de trabajar en equipo o si trabajamos solos también nos puede ayudar a trabajar mucho más rápido bien si recuerda en los anteriores vídeos primos los símbolos los símbolos recuerden que son estos elementos que nosotros podemos crear para reutilizar elementos rápidamente entonces yo por ejemplo creo aquí un círculo hago clic derecho crear símbolo y aquí se muestra el icono indicando que esto es un símbolo y yo a esto entonces le puedo luego cambiar las propiedades y si lo utilizo en otros árboles por ejemplo vamos a copiar este árbol vamos a modificar este círculo aquí ya estoy entrando dentro de lo que es la página de símbolos y voy a editar el color de este círculo voy a volver y fíjense que los dos se han modificado porque entonces un símbolo es un elemento que puede ser reutilizado bien entonces aquí tenemos algo que en realidad estamos trabajando en un solo documento no tenemos todos los símbolos en un solo documento y a veces esto es un lío porque tenemos todo en un solo lugar y ahí entra lo que es librerías librerías en sketch es la opción que tenemos de poder crear una librería de símbolos que va a ser compartida para todo el equipo no solamente en un solo documento sino que podemos agregar lo es sketch automáticamente y podemos como llamar a esos símbolos de esas librerías y utilizarlos en diferentes documentos que esos documentos no van a contener esos símbolos vamos a ver un ejemplo ahora entonces para que quede un poco más claro bueno es que ya nos trae una librería por defecto ahora en esta nueva versión.

Prototipado en Sketch

Bienvenidos al ex tips vino mes eugenia y en el vídeo de hoy vamos a ver la herramienta de prototipado en sketch bueno no sé estuve ausente un tiempo pero mientras tanto estuve interactuando con muchos de ustedes por mis otras redes sociales por facebook instagram twitter y muchos de ustedes me estuvieron preguntando sobre esta nueva actualización de sketch esta nueva funcionalidad de poder prototipar en sketch que es fantástica así que bueno esto va en respuesta a todas sus solicitudes vamos a darlo por escrito ya está en su versión 49.1 y en esta versión nos trae lo que es la herramienta de prototipado y esto es genial porque podemos dentro de sketch sin utilizar ningún plugin extra poder prototipar poder hacer que nuestro prototipo sea interactivo y poder mostrarlo entonces al equipo de una forma mucho más real por antes de comenzar siempre recordemos que cuando vayamos a actualizar sketch tenemos que controlar que nuestros plugins.

Cómo exportar nuestro diseño 

Ultimamente he recibido muchas consultas sobre cómo exportar en sketch especialmente cómo enviar nuestro diseño a nuestros assets a los desarrolladores para que ellos puedan crear la aplicación o el sitio web así que bueno quería en este vídeo compartirles uno de los vídeos del curso completo de sketch que pueden ver en you de mí o desde you steve online.com y vamos a ver la herramienta sep link que nos ayuda a poder trabajar mejor con el equipo de desarrollo tengan en cuenta que este vídeo fue grabado con la versión 3 de sketch pero no vamos a ver grandes cambios quiero comentarles de algo muy interesante que vi el otro día ya que hablamos de diseño de aplicaciones les quiero contar de este evento que se va a dar en julio en barcelona así que para todos que tienen españa o quizás para los que estén vacacionando por europa no se lo pueden perder se llama ads com como pueden ver aquí está enfocado especialmente en diseño y desarrollo ios y android y van a ver es speakers de reconocidas empresas como facebook o fifa uber mono realmente parece muy interesante también como vemos aquí van a ver un workshops especialmente para desarrolladores y otros para diseñadores y algo que me encanta es que como vemos es un evento que une a diseñadores y desarrolladores que ya sabemos que es muy importante que un diseñador sepa lo que implica el trabajo de un desarrollador como también un desarrollador tiene que saber lo que implica el trabajo de diseño.

Pixel Perfect

Es muy importante que prestemos atención a los detalles crear un diseño que se ajusta 100% al pixel en pantalla va a hacer que nuestro diseño tenga mayor calidad especialmente en pantallas de alta resolución de esto se trata el pixel perfect veamos un ejemplo aquí tengo un icono que no se ajusta a la grilla de píxeles y aquí uno que si ven la diferencia en el icono que no fue diseñado pensando en esto los bordes están como difuminados estos quizás aquí no lo notamos mucho pero en una pantalla de alta resolución como la pantalla retina de iphone les aseguro que si como comprobamos esto bueno lo vamos a notar si activamos la vista de pixel aquí y vamos a ver entonces que cuando hacemos zoom al 800 por ciento aproximadamente vemos que nos muestra la grilla de píxel vamos a ver entonces que ciertos elementos están como en la mitad de un píxel la mitad un píxel en realidad no existe pero en sketch esto se crea como una simulación reduciendo la opacidad de un píxel entero esto se utiliza para calcular por ejemplo el blur o hacer que una esquina esté más suave bueno cómo solucionamos esto lo podemos solucionar modificando los valores de posición y tamaño para que sean números enteros si no son números enteros como vemos aquí entonces no se va a aplicar nuestro diseño correctamente a la grilla de píxeles tengamos en cuenta que estos detalles los tenemos que realizar en la etapa final del proyecto no necesario dedicar tiempo a esto en el comienzo vamos entonces a ir seleccionando cada uno de los elementos de nuestro icono o del elemento que hayamos diseñado y vamos a cambiar la posición y el tamaño por números enteros como vemos aquí fíjense cómo va cambiando cómo se va ajustando a la grilla de píxeles y ahora mis dos iconos quedaron perfectamente posicionados en la grilla bueno pero podemos realizar otras acciones previas para poder evitar estos y para poder evitar de generar números enteros a cada elemento podemos tener en cuenta estos tips que les voy a mostrar ahora primero activemos la opción de pixel feeling que podemos acceder a ella en sketch preferencias y luego aquí tenemos la opción tenemos que tener las tres opciones marcadas esto nos va a asegurar que las esquinas de nuestras capas siempre van a terminar en píxeles enteros lo mismo para cuando movamos las capas también agreguemos la opción south pixels en la barra de herramientas así no nos olvidamos de usar este siempre y alinear nuestros elementos a cada pixel bueno siempre activemos entonces el show pixel with como les mostré anteriormente así cuando hacemos zoom al 800 por ciento vamos a ver la grilla tratar de no ajustar el tamaño usando el mouse esto todavía yo lo sigo haciendo hombre que uno tiene pero hay que tratar de usar el inspector para ajustar el tamaño también usa el inspector para mover las capas y si movemos las capas o los elementos con el mouse tratar de finalizarlo utilizando el teclado para alinear el elemento al píxel si vamos a usar la herramienta de escalar que yo la uso mucho lo mejor es escalar al 100 es decir 200 300 400 etcétera también tengamos cuidado cuando utilizamos esta herramienta de aquí que nos sirve para alinear los elementos que a veces no los alinea de forma correcta no lo posiciona en el pixel que tiene que ir entonces también tengamos en cuenta de utilizar el inspector cuando necesitemos posicionar el elemento y cuando queramos crear una línea en vez de usar la herramienta de línea es mejor utilizar el rectángulo si vamos a crear dos en un rectángulo y le damos el tamaño que necesitemos para nuestra línea bueno esos fueron unos tips para que tengamos en cuenta así evitamos crear elementos que estén fuera de la grilla de píxeles.