Emplea un efecto graffiti en Illustrator

Cuando necesitemos obtener graffitis estilizados de forma sencilla, Illustrator nos ofrece herramientas avanzadas y la posibilidad de generar el efecto sin el uso de fuentes externas específicas.

Usaremos herramientas como los filtros de desenfoque y deformacion, la edición de vértices y los degradados lineales, aparte de sus múltiples posibilidades respecto a filtros y creación de duplicados y edición de color.

Además de otras muchas cosas, veremos cómo expandir y modificar los vértices del texto, duplicar de elementos para usos específicos, desenfocar los bordes para obtener apariencia de aerógrafo y fusionar las capas y los elementos para obtener el mejor resultado con el minimo esfuerzo.

Fuente:enlace

Retoque e iluminación en Photoshop

En el siguiente tutorial les traigo este videotutorial donde veremos cómo retocar nuestras fotografías en Photoshop dándoles un efecto profesional usando el suavizado e iluminación como principales efectos. Espero que les guste el videotutorial. Aquí una muestra de lo que podemos lograr mediante ésta técnica:

Fuente:enlace

Logra un efecto cromado con Photoshop

Indicaciones generales: Este tutorial esta hecho para personas con un nivel muy básico en photoshop, aunque el resultado sea de nivel intermedio. Si ya tienes experiencia en el photoshop puedes ir a las ultimas paginas para que revises su contenido.

Paso 1 (Creando nuestro objeto)

Abriremos un nuevo documento, el tamaño puede ir como tu prefieras

Esta vez, haremos el efecto de cromo a unas letras pero quiero aclarar que se puede aplicar a cualquier objeto, antes de seguir fíjate que el color frontal y el background estén en la opción de colores por defecto u oprime la tecla D

Escribe el texto que desees, es preferible utilizar un "Font" grueso (como arial black) para que el efecto se note aun más

Para trabajar con mayor claridad en el proyecto al layer que contendrá el efecto de cromo se llamará "reyner" o bien como tu elijas, solo que después no te quejes de que te perdiste (es broma)

Paso 2 (Rasterizando el layer)

Seguido de tener el texto listo, a continuación precederemos a "rasterizar la capa" (el menú se abre dándole click derecho al layer "reyner" en la ventana de layers. Ahora el objeto dejó de ser texto y se convierte en un objeto normal (lo que quiere decir que ya no lo puedes editar textualmente).

Paso 3 (Creando nuestro degradado)

Ahora nos vamos para La herramienta de degradado (gradient tool)

Explicación para principiantes: Si te has vuelto loco buscando La herramienta de degradado (Gradient tool) debe ser porque la

opción está en Bote de pintura (Paint bucket tool) así que si te fijas en la imagen verás que esta herramienta tiene un triangulito

negro en la esquina inferior derecha, esto quiere decir que la herramienta tiene mas opciones, si dejas presionado por un instante el botón de la herramienta se abrirá un submenú con las demás opciones.

Cuando activas La herramienta de degradado (gradient tool) en la parte superior debe de aparecer un submenú con varias opciones (ver imagen 4). Clikea la opción que se llama Paleta de degradado (gradient pallete) (la que esta marcada con un gran circulo rojo

en la imagen) inmediatamente se abrirá una ventana con degradados ya predeterminados, sin embargo nosotros haremos el nuestro a partir de uno de los que están ahí.

Cuando se habrá la ventana Editor de degradado podremos editar el gradiente necesario para lograr nuestro efecto, así que podemos elegir la primera muestra de degradado (Marcado con un 1)

Luego iremos a la barra que tiene el degradado (punto 2) si mueven los cuadritos se darán cuenta que el degradado ha cambiado (Si! acá es donde modificamos el degradado que vamos a usar)

Nota: los cuadritos arriba de la barra se utilizan para modificar la transparencia y los de abajo para modificar el color

Muy bien después de haber marcado el cuadrito que esta debajo de la barra, la opción color (punto 3) estará disponible, entonces clikeamos ahí para que se abra el selector de colores.

En el selector de colores escogeremos un color oscuro para un lado del gradiente (no negro) pero tampoco muy claro (puede ser #434343) y blanco para el otro lado del gradiente.

Paso 4 (Aplicando el degradado)

Ahora si vamos con la parte divertida. Le vamos a poner nuestro nuevo degradado a las letras que hicimos anteriormente, para eso vamos a la ventana "Layer" (capas) y ahí elegimos el layer “reyner”

Ahora si vamos con la parte divertida. Le vamos a poner nuestro nuevo degradado a las letras que hicimos anteriormente, para eso vamos a la ventana "Layer" (capas) y ahí elegimos el layer “reyner”

Seguido de eso lo vamos a seleccionar, esto se hace presionando el icono del layer junto con la tecla Ctrl (control), ahora nuestro texto deberá aparecer seleccionado (con una línea que parpadea)

Sin dejar que el objeto se deseleccione, elegimos la herramienta de gradiente (gradient tool) y arrastramos sobre el objeto de arriba a abajo o viceversa como usted prefiera, debe de quedar mas o menos como se ve en la imagen. Ahora si, el proyecto va tomando forma

Paso 5 (Añadiendo un layer Style)

Después de agregarle el gradiente al objeto (las letras) vamos con los siguientes pasos para lograr el efecto de cromo. primero le añadiremos un estilo de capa(layer style) esta opción se abre dándole doble click en el layer “reyner” (en la ventana layer o capas)

Se abrirá una ventana con varias opciones

Acá puedes explorar todas las opciones. puedes conseguir acabados increíbles para tus trabajos pero por ahora solo nos interesan las 2 opciones seleccionadas arriba; estas opciones las puedes modificar a tu gusto:

(No me gusta dar una valor exacto, se aprende mas cuando exploras por ti mismo) El secreto de los objetos cromados esta en darle un acabado con un borde bastante grueso, por lo tanto lo lógico seria ponerle los valores de estas opciones un poco altos (recuerda que solo marcamos dos opciones Bisel y Relieve junto con Contorno)

Si aun no te ubicas con los valores, guíate por medio de la imagen 13 asi te debe de quedar el objeto luego de aplicar estas opciones, si te fijas tiene un borde bastante grueso.

Paso 6 (Eliminando el Layer Style)

Para aplicar el siguiente filtro, necesitamos crear un layer nuevo, luego lo ponemos por debajo del layer "reyner" y las unimos (marcando donde está el circulo rojo, deberá aparecer una cadena)

Después de tenerlas marcadas aplicaremos Ctrl+E (esto hace que las dos layers se hagan una sola “fusionen”)

Ahora bien te estarás preguntando para que hicimos esto? bueno la razón es simple, con el siguiente filtro que aplicaremos, si el layer tiene un estilo de capa añadido,. el efecto del filtro no hará ningún cambio sobre el layer

Paso 7 (Aplicando el filtro)

Seguido de esto aplicaremos el filtro: filtro / artístico / plastificado (Filter /artistic /plastic)

N uevamente acá puedes modificar los valores a tu gusto, sin embargo para obtener un efecto de cromo mas real, deberás de poner los valores un poco altos (explora con diferentes valores)

Paso 8 (Obteniendo el efecto de cromado)

Después de aplicar el filtro "plastificado" nos iremos para Imagen / Ajustes / Curvas (Image / Adjustment / Curves) o mas rápido Ctrl + M y nuevamente jugaremos con la curva hasta conseguir el efecto deseado (toma de referencia la siguiente imagen)

Hasta aquí ya hemos logrado conseguir nuestro efecto de cromado, sin embargo porque hoy ando de buenas, les daré un secreto de "Ultra-Designer" (es broma lo de "Ultra- Designer")

Paso 9 (El secreto Ultra-Designer)

Pues bien luego para que nuestro cromado se vea mas real, vamos a darle una tonalidad azulada (o bien prueba a tu gusto, aunque por experiencia se ve mas real el color azulado)

Para esto nos vamos a Imagen / Ajustes / Tono Saturación (Image / adjustement / tone saturation) o tecleamos Ctrl + U y nuevamente exploramos por nuestra propia cuenta, ah! no se les olvide marcar la opción "colorear"

Tip: Siempre acostúmbrense a usar los atajos del teclado, un profesional se diferencia de un"luser" porque sabe usar los atajos de teclado

Y bien luego ustedes pueden agregarle más objetos para obtener un mejor resultado.

Mas o menos como se ve en el ejemplo les debería de quedar el efecto.

El efecto de cromado se puede utilizar para otros proyectos así que les será muy útil poder dominar los pasos anteriores, espero que no hallan tenido mucho problema y que hayan podido llegar al final sin perderse

Mi consejo es que exploren todas las opciones, recuerden el Photoshop no muerde y la mejor manera de aprender es explorando por si solo

Fuente:enlace

Cómo hacer un calco y pintura interactiva en Adobe Illustrator

El calco y la pintura interactiva trabajan en conjunto para ayudarnos a generar arte fácil y rápidamente al conocer sus capacidades.

Illustrator es sin dudas la aplicación más potente hoy en día en cuanto a creación vectorial profesional se refiere. Provee a diseñadores, ilustradores, artistas, profesionales y entusiastas de herramientas muy poderosas para poder generar gráficos precisos, funcionales y hermosos. Para impresos, sitios web, animaciones, interactivos, vídeos; sin importar el soporte o el dispositivo de consumo, Illustrator se convierte en la aplicación base que no puede faltar en tu repertorio de conocimientos.

Fuente:enlace

Cómo blanquear dientes en Photoshop

En este videotutorial vererás cómo podrás conseguir blanquear los dientes en Photoshop, así como mejorar el brillo general, mientras eliminamos manchas y detalles incómodos.

Eliminaremos las manchas e imperfecciones más notables usando el tampón de clonar, para duplicar áreas mucho más ajustadas y retocaremos el brillo y color, con una capa del efecto de tono y saturación, que unificará el tono general a uno más blanco y adecuado.

Fuente:enlace

Cómo hacer un retoque con Raw en Photoshop

Damos comienzo a una nueva serie que tratará sobre retoque fotográfico, mientras hacemos una pausa en la de diseño Web, para ir aprendiendo las técnicas más efectivas, cuando de mejorar el cuando de los modelos de las fotografías e imágenes se trata, gracias a los ajuste de su apariencia general, el color y suavidad de su piel, ojos y pelo.

Para ello empezaremos mostrando las dos posibilidades más comunes, Raw y compresión, hablando de los formatos generales de imagen que encontraremos en nuestros proyectos y que gracias a módulos como el magníficoCamera Raw de Photoshop, nos permitirán aplicar y realizar los ajustes iniciales más importantes, para importar la imagen al programa con las mejores características para su retoque.

Fuente:enlace

Especialízate con nosostros

Cursos y Especializaciones abiertos el Lunes 02 Junio, amplía el currículum y desarrolla proyectos en tecnología

Especialización de PHP          9am a 12m 

Especialización de Android   9am a 12m 

WODPRESS NIVEL 1   2pm a 5pm 

HTML 5   6pm a 9pm  

Cursos abiertos 

Diplomado Diseño Digital     2pm a 5:30pm

Uneweb Instituto | Todos los derechos Reservados. Telf. 0212-9533294 – 9538412 celular 04141150705

   "Desarrolla tus ideas con los Cursos, Diplomados y Maestría en Uneweb www.uneweb.edu.ve"

Cómo trabajar con la cuadrícula de perspectiva en Illustrator

Aprenderemos sobre los usos y las posibilidades de la clásica herramienta Cuadrícula de Perspectiva en Illustrator, la cual nos ayudará a introducir conjuntos de grupos y formas de elementos, los cuales se ajustarán automáticamente a la perspectiva resultante de la modificación de aquellos puntos de fuga que genera, consiguiendo adaptar nuestro trabajo a diferentes vistas y lograr ilustraciones de aspecto tridimensional.

Fuente: enlace

Aprende cómo crear y exportar SVG en Illustrator e Inkscape

SVG es un formato de gráficos vectoriales escalables que pueden ser utilizados para visualizarse desde un navegador web. También es el formato nativo de los archivos de Inkscape. Estos gráficos pueden ser creados directamente desde código en el HTML así como también pueden crearse en cualquier programa de diseño vectorial, como Illustrator o Inkscape. 

Su uso es muy popular para íconos web, fuentes, mapas y otras opciones de visualización de datos en la web. 

Mediante SVG podemos aplicar filtros y animaciones a objetos vectoriales en el navegador. La facilidad de manipular este formato nos permite trabajar con carga de datos externos desde archivos JSON y manipularlos también con CSS y Javascript. En la era de la visualización de datos estadísticos esto es muy conveniente.

Debemos contar con mucho criterio al utilizar este formato ya que no tiene 100% de compatibilidad en los navegadores y su uso excesivo puede resultar en una sobrecarga del navegador. 

Exportar un vector a SVG desde Illustrator

Para poder obtener un archivo en formato SVG desde illustrator, sólo tenemos que dibujar cualquier elemento vectorial y darle a guardar como > .SVG ( en vez de .ai).

Veamos aquí las opciones que salen por defecto:

Exportar múltiples SVG usando arboards en Illustrator

Si por ejemplo estamos realizando un set de íconos y necesitamos exportarlos cada uno como un SVG por separado, cuando le damos a guardar como (save as) svg, tildamos la casilla “use artboards”, y nos creará un archivo SVG por cada artboard presente en el archivo de Illustrator.

Optimizar un SVG en Illustrator

Como el archivo SVG luego deberíamos poder leerlo desde un HTML por ejemplo, es importante que seamos muy organizados con el archivo desde Illustrator para que al exportar no haya código innecesario. 

• Agrupa elementos en Illustrator sólo si esto implicaría algún uso práctico en el HTML, el código SVG agrega una etiqueta <g> a los elementos agrupados.
• Nombra las capas y los elementos de ésta en el archivo de illustrator para poder identificar cada elemento luego desde el HTML.
• Evita usar efectos que necesiten de un proceso de rasterización, ya que se perdería el sentido de utilizar este formato. Luego podés agregarle efectos SVG a los gráficos directamente en el HTML (o en el mismo Illustrator en Effect > SVG Filters) evitando así que los elementos se rastericen. 
• Evita usar pinceles artísticos o vectores muy complejos.

El formato SVG

Si abrimos directamente el SVG en cualquier editor de código podemos ver cómo se constituye un archivo SVG.

Código :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg 
version="1.1" 
id="icono-avion" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px"
y="0px" 
width="255px" 
height="255px" 
viewBox="0 0 255 255" 
enable-background="new 0 0 255 255" 
xml:space="preserve"
>

<
circle id="fondo-circulo_1_" 
fill="#FF0086" 
cx="127.5" 
cy="127.5"
 r="93.6"
/>
<
path id="avion" 
fill="#FFFFFF" d="C7,8.2-32.7c9.1,0,8.6,33.2,8.6,33.2l40.9,34.6l1.7,10.8l-43.2-25.8
l-3.3,37l12.1,13.6l0.3,4.1l-16.8-4.1l-17.5,4.1l0.4-4.1l13.2-13.6l-4.4-37l-43.4,23.2l1.9-8.2L119.4,106.3z"
/>
</svg>

Circle y path son los elementos vectoriales de mi archivo. En path los datos del trazado están indicados mediante d="M.....z'".

Optimizar la exportación de SVG en Illustrator

Podemos optimizar este código para poder trabajar más cómodos en el HTML.

En Illustrator al exportar tenemos las siguientes opciones:

• CSS Properties - style elements: esta opción separará las propiedades CSS de los elementos en sus respectivas etiquetas dentro de style.
  
  
• Textpath: si utilizamos texto en el SVG, en el código resultante el texto estará dentro de las etiquetas <textPath> y mediante estas podemos manipularlas con CSS así como también lograr identificar de manera más sencilla los tipos de elementos en el código.
  
  
• Responsive: con esta opción lograremos que el SVG se comporte de manera líquida en el navegador. 

Para el ejemplo utilizaré la opción de CSS properties - style elements.

Código :

<style type="text/css">
   .st0{fill:#FF0086;}
   .st1{fill:#FFFFFF;}
</style>
<circle 
id="fondo-circulo_1_" 
class="st0" 
cx="127.5" 
cy="127.5" 
r="93.6"
/>
<path 
id="avion" 
class="st1" d="M119.4,106.3c0,0-0.9-32.7,8.2-32.7c9.1,0,8.6,33.2,8.6,33.2l40.9,34.6l1.7,10.8l-43.2-25.8l-3.3,37   l12.1,13.6l0.3,4.1l-16.8-4.1l-17.5,4.1l0.4-4.1l13.2-13.6l-4.4-37l-43.4,23.2l1.9-8.2L119.4,106.3z"
/>

Si nos fijamos bien, ahora a la hora de exportar con la opción style elements a cada objeto se le agregó una clase, .st0 y .st1 con las propiedades de cada elemento por separado dentro de las etiquetas style.

Ahora el código está más organizado. Cada elemento tiene un ID heredado del nombre de la capa a la que corresponde en el archivo de Illustrator, y sus propiedades de color, relleno, borde, etc… están todas agrupadas en cada clase CSS asignada a cada elemento.

Crear un SVG desde Inkscape

En Inkscape también podemos crear un SVG, de hecho el SVG es el formato nativo de Inkscape. Para asignarle nombres a cada parte de nuestro gráfico vamos a Object > object properties y luego darle SET, que no se te olvide 

Luego le damos Save as > Plain .svg, porque el SVG por defecto nos deja como resultado un código larguísimo! Igualmente el código que nos genera es menos limpio que el que nos deja Illustrator. Siempre podemos entrar al código e ir quitando las líneas innesesarias para que pese menos y sea más legible a la hora de trabajar.

Como ven desde Inkscape la cosa es un poco más rústica y no tenemos opciones de exportación, por lo que si queremos organizar aparte los estilos debemos hacerlo a mano:

En ese caso buscamos donde diga style en cada objeto:

Código :

style="fill:#ffffff;fill-opacity:1;stroke:none" 

Y lo quitamos y al pasarlo a CSS en el HTML nos quedaría así:

Código :

<style type="text/css">
#estrella{
fill:#ffffff;
}
</style>

Fíjense cómo optimicé inclusive los estilos ya que al exportar se agregaron propiedades innecesarias. 

Cómo insertar un SVG dentro de un documento HTML

Tenemos dos maneras de insertar un SVG dentro del HTML, una es dentro de la etiqueta img y la otra es insertar el elemento SVG directamente en el código HTML.

Código :

<body>
   <img src="icono-avion.svg" alt="icono de un avion">
</body>

De esta manera el SVG será tratado como un elemento de imagen, por lo cual no podremos acceder a sus partes ni podremos manipularlas.

Insertar el elemento SVG en el código HTML

Sólo tenemos que copiar del código todo aquello que incluye la etiqueta SVG del código que nos deja el archivo exportado desde Illustrator y lo pegamos en nuestro HTML. Recuerda que debes pegar los estilos CSS entre las etiquetas HEAD o ponerlos en un archivo CSS aparte y linkearlo en el HTML. 

Código :

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   .st0{fill:#FF0086;}
   .st1{fill:#FFFFFF;}
</style>
</head>
<body>
   <svg 
version="1.1" 
id="icono-avion" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px"
y="0px" 
width="255px" 
height="255px" 
viewBox="0 0 255 255" 
style="enable-background:new 0 0 255 255;" 
xml:space="preserve"
>

      <circle 
         id="fondo-circulo_1_" 
         class="st0" 
         cx="127.5" 
         cy="127.5" 
         r="93.6"
      />
      <path 
         id="avion" 
         class="st1" 
         d="M119.4,106.3c0,0-0.9-32.7,8.2-32.7c9.1,0,8.6,33.2,8.6,33.2l40.9,34.6l1.7,10.8l-43.2-25.8l-3.3,37
         l12.1,13.6l0.3,4.1l-16.8-4.1l-17.5,4.1l0.4-4.1l13.2-13.6l-4.4-37l-43.4,23.2l1.9-8.2L119.4,106.3z"
      />
   </svg>
</body>
</html>

Recuerda identar el código de manera que te sea más útil y ordenado para la hora de  trabajar. De esta manera nos mantenemos independientes del archivo SVG que nos dejó Illustrator, o sea, ya no lo necesitamos más porque ahora con el código estamos dibujando directamente en el HTML.

Si quisiéramos cambiarle el color al ícono por ejemplo, sólo tenemos que modificar el estilo CSS.

Código :

.st0 {
   fill:  #35C612;
   }

Fuente:enlace