(Trataré de conseguirme un microfono para que la próxima vez oigan mi melodiosa voz XD)

Pinche aquí para ver el vídeo

PD: Si hay alguien que necesita aclarar una duda o tenga una consulta en otros temas pueden seguirme o contactarme en Twitter o Tumblr. ¡Saludos!

Y para los que no saben que es Adobe Kuler, aquí está una pequeña reseña.

Articulos Interesantes

• ¡Colorea tus diseños! (Sin perderte en el proceso)

Como uno de los muchos usuarios de Photoshop que soy, siempre tengo que lidiar con recortar las imágenes que deseo utilizar en una composición que vaya a necesitar el uso de alguna imagen fotográfica aunque también me sucede con imagenes vectoriales aunque en menor manera.

Bueno como hace poco Darío había hecho una recopilación y análisis de algunas de la herramientas de recorte en Photoshop, decidí probrar una que nunca había utilizado: el filtro extraer.

Bueno, abro mi querido Photoshop Cs4 y me dirijo al menú de filtros…para mi sorpresa de no encontrarlo en dicho menú. Pensé que seguro estaría en otro menú pero no estaba.

Realmente desconosco el motivo por el cual Adobe decidió quitar dicho filtro de la nueva versión de Photoshop.

Aún así no significa que vamos a tener que despedirnos de dicha herramienta…

Adobe a colocado en su web este plug-in en un paquete de actualización opcional. Puedes decargarlo de ahí, aunque tendrás que buscarlo y muchos se han equivocado y han bajado la versión en turco XD…bueno tengo el derecho a equivocarme…

Por eso les pongo el link directo para que no les pase y lo tengan disponible. Este paquete sirve tanto para las versiones de Photoshop CS4 y CS4 Extended en Español, Francés e Inglés.

Ahora, una vez que lo descargues, descomprimelo en tu escritorio.

Abre la carpeta y busca photoshopcontent/español (o inglés depende de tu versión)/extras ahi encontrarás las dos carpetas con plugins opcionales (entre ellos el fillro extraer) y nuevos “presets” o archivos predeterminados.

Ahora abre la capeta donde está instalado tu Photoshop que por lo general es C:/Adobe/PhotoshopCS4  Copia y pega los plugins en la capeta correspondiente así como los presets, si te sale la opción de combinar carpetas (en Windows Vista) aceptala.

Ahora inicia tu Photoshop CS4 de nuevo y ya tendrás tu filtro extraer en el menú Filtros listo para usar.

Espero que a los que utilizan mucho esta herramienta a la hora de migrar a Photoshop CS4 les sea de mucha utilidad.

¡Saludos a todos!

Articulos Interesantes

• Photoshop CS5: Impresiones
• 1º Aniversario para PSDcreativo
• Concurso: Diseño + Bloggers
• Entrevista: Diego L. Rodríguez (Paranoid Park)
• Tutorial – Wireframes en tus diseños

En este tutorial usaremos el programa Cinema 4D, uno de los programas mas usados por diseñadores profesionales y no profesionales para crear diferentes objetos ya sea 3d u otros.

Para comenzar explicare que es un wireframe:

“Un Wireframe es la  renderización del que resulta una imagen semitransparente, de la cual sólo se dibujan las aristas de la malla que constituye al objeto. De ahí su nombre.” (Wikipedia)

En esta grata ocasion cuento con la colaboracion del artista Factorxyz (Jairo Arturo) quien realizo este video tutorial para crear los wireframes especialmente para PSDcreativo, aqui pongo el video tutorial:

Pinche aquí para ver el vídeo

Este es el resultado del wireframe ya hecho y guardado como imagen:

En su Deviant podras encontrar mas wireframes, aparte de otros recursos, para descargar y usarlos en tus diseños.

Ahora sigue este pequeño paso para insertarlo en tu diseño, para comenzar despues de guardar el archivo en psd, lo buscamos donde lo guardamos y lo abrimos en el photoshop, despues crearemos un nuevo archivo del tamaño que desees y lo llenaremos de un color cualquiera, (de preferencia en fondos claros), despues pondremos nuestro wireframe, y luego a la capa del wireframe la pondremos en modo Multiplicar y listo podras ver que el fondo blanco se elimina.

Ahora bastara que pongas todo lo que desees a tu diseño, aqui te pongo 2 ejemplo de como quedarian tus diseños con los wireframes, y tambien los psd`s de lso diseños para que veas mas como los use y te des ideas:

Wireframe Art -1º Resultado

Font Wireframe Art - 2º Resultado

Descargar PSD 1º

Descargar PSD 2º

En el psd del primer ejemplo podras encontrar una nota donde te digo como crear el efecto de los circulo, solo tendras que:

1º Darle vision a la carpeta Circulo del psd.

2º Darle dobre click al icono que tiene forma de nota que esta en la parte izquierda del diseño para abrir la nota.

Espero que este tuto les sirva, ire tratando de crear tutoriales de este tipo para darle mas potencia a nuestros diseños y no solo estancarnos con el photoshop. De nuevo gracias a Factorxyz por su colaboracion especial.

Articulos Interesantes

• Tutorial – Ilustracion con Formas
• Tutorial – Creando una Composicion Impactante
• ¡PSDs a dieta!
• Modos de seleccion y recorte en Photoshop
• Tutorial + Plus – Composicion desde cero

Para comenzar, como siempre hacemos, pongo todos los archivos de lo usado en este tutorial:

1.- Para comenzar crearemos un archivo nuevo del tamaño deseado, en mi caso usare un tamaño de 875px x 1175px, después agarremos nuestra herramienta bote de pintura y con un color negro rellenaremos el diseño:

2.- Ahora crearemos una nueva capa y como siguiente agarremos nuestra herramienta degrado después  agarraremos el degrado Color Frontal/Transparente y cambiaremos el color blanco por uno un poco oscuro, en mi caso use el color #1e1b32 para combinar con el fondo, hasta lograr algo como esto:

3.- Lo siguiente que haremos será agregar nuestro personaje a usar, en mi caso uso un stock creo que ya bastante conocido, podrás verlo en el pack por si deseas usarlo:

4.- Ahora le agregaremos un efecto de líneas curvas con la herramienta pluma, para eso haremos lo siguiente:

1.- Tomaremos nuestra herramienta pluma (p) y después de eso pondremos la configuración de trazados, después crearemos un trazo en forma de curva, ahora escogeremos un color blanco para contornear el trazo,  luego escogerás la herramienta pincel y escogerás un brush pequeño de entre 2px o 3px, después de eso crearemos una nueva capa y volvemos con la herramienta pluma , después apretamos click derecho en el trazo y luego en contornear, cuando te salga la ventana con que herramienta contornear escogerás la herramienta pincel y también seleccionaras la opción Simular Presión, das en ok y debes tener algo como esto:

Nota: El tamaño del trazo de la curva dependerá de cómo desees que vaya en el diseño, en pocas palabras es al gusto. Para quitar el trazo de guía solo basta con dar click en la opción Capas de forma y luego otra vez en la de Trazados, esto se encuentra en las propiedades de la pluma (Deja el ratón encima de cualquier botón de opción para que veas el mensaje pequeño que te dice que es esto).

2.- Lo que haremos a continuación será duplicar esta capa y moverla un poco hacia cualquier dirección, después cambiarle de color con las opciones de fusión, eso lo hace la opción Superposición de Colores, ahí le cambiaremos el color, por eso decidimos dejar en blanco anteriormente el trazo para que sea más fácil trabajar al cambiar de color:

Nota: No olvides que para abrir las opciones de fusión basta solo con solo dar dos clicks a la capa que le podremos la opción, o también ir a Capa/Estilo de Capa/Opciones de Fusión.

3.- Ahora el paso anterior lo repetiremos cuantas veces sea necesario, para lograr algo como muestra la imagen:

Podrás ver dos tipos de composición de estas curvas que hice, no hay mucha diferencia, solo la distancia entre cada uno.

Lo que harás ahora seleccionar todas las capas duplicadas para la composición y luego apretaras Ctrl + G para agruparlos en una carpeta, después de eso esta carpeta la duplicaras (como duplicar una capa solo que en este caso aparecerá Duplicar Grupo)  y la convertirás en un objeto inteligente, luego le quitaras la visión al la carpeta que hicimos anteriormente, esto paso lo hacemos por si mas adelante esos archivos nos van a servir:

Después de eso el objeto inteligente es lo que usaras para ya montar en el diseño, lo duplicaras, giraras, transformaras, etc. dejando algo parecido a esto:

5.-Como siguiente haremos lo que hemos mencionado anteriormente, el efecto tipo breaking apart usando los brushes, para eso haremos los siguiente así que presta mucha atención, nuestro personaje que agregamos en el paso 3, lo duplicaremos dependiendo de cuantos brushes tipo splatter usaras, en mi caso use 4, para eso duplique esta capa 4 veces, luego de eso las capas duplicadas las pondrás atrás de la original, después a cada capa duplicada le pondrán una Mascara de Capa, después de eso cada capa de mascara la rellenaras del color negro, ahora lo que harás será agarrar el pincel Splatter y en la 1º capa duplicada dependiendo de cuantas veces duplicaste, con el color en blanco lo pasaras veras que dará el efecto fácilmente, claro también depende del brush y su calidad, los brushes que en mi caso use fueron: 1, 2(Esta en el pack, no pude encontrar a su autor) ,3 ,4.

Como ves es bastante fácil, solo usando dos cosas: una mascara de capa y un brush.

6.- En este siguiente paso usaremos un stock que tenga forma tipo pintura, el que yo uso es este: Stock Abstract, al tener fondo negro se me hace mas fácil trabajar con el, lo que hice es lo siguiente:

Después de poner el stock en el diseño, lo pondremos en modo Aclarar y lo colocaremos en la parte de atrás después de las capas de fondo, con el modo aclarar nos eliminara el fondo negro solo dejándonos lo abstracto, ahora es cuestión de nada mas buscar donde colocarlo, girarlo o transformarlo,  algo así para que te des una idea:

Si deseas cambiarle el color, lo único que tendrás que hacer será es irte a Capa/Nueva capa de ajustes/Tono|Saturacion después ir moviendo el tono, saturación, iluminación, hasta lograr el color deseado después das en ok, ahora tomaras esta capa y apretaras Ctrl + Alt + G para que solo función con la capa que se encuentra abajo:

Puedes ponerle las veces que desees este stock, claro siempre y cuando dándole la calidad.

7.- Lo siguiente será crear las líneas tipo energía, esto es bastante fácil, haremos lo siguiente, crearemos un grupo apretando Ctrl + G, esto ira detrás únicamente del stock del personaje original, ósea adelante del efecto breaking apart, después agarremos nuestra herramienta pluma y haremos líneas de distintos colores, distancias y tamaños, recuerden que ninguno se debe pasar de los 4px o 5px de grosor, esto es fácil es como hicimos en el punto 1 del paso 4 con las curvas, solo que en este caso las líneas serán tipo líneas con ondulaciones  y no usaras la opción Simular presión, por lo de mas todo será normal, en el caso del pincel lo pondrás en tamaños diferentes por línea, ya sea 1px o 2px o 3px, y en casos de trabajos mas grandes hasta 4px, pero nada mas grande de 5px, trata de hacer algo parecido a esto, no es difícil y siempre usando la herramienta pluma:

Nota: Por cada línea una capa, no lo olvides.

Puedas crear líneas encima de las mismas líneas, la cosa es que lo dejes a tu creatividad, imaginación y guste y que estés satisfecho con el resultado. Como consejo te diría que trates de jugar un poco con las líneas y también con algunas opciones de fusión como modos de capa.

Ahora después de hacer las líneas en diferentes capas, a la línea que desees (de preferencia la que mas vaya a pegar con el resultado le pondrás la siguiente opción de fusión:

Nota: Recuerda Capa/Estilos de capa/Opciones de fusión.

Después de eso harás lo siguiente, si es que por ejemplo creaste líneas de colores azules, líneas de colores rojo, dependiendo del grupo de color, harás esto, si creaste por ejemplo líneas azules, todas las capas de línea azul las duplicaras y luego apretaras Ctrl + E para adjuntarlas en una sola capa, después te iras a Filtro/Desenfoque/Desenfoque Gaussiano y le pondrás 3px de radio, luego de eso a esta capa la pondrás en modo Sobreexposición Lineal y le bajaras la opacidad entre unos 50px y 60px:

Así harás con los demás grupos de líneas, en el caso de que no lo hayas hecho tipo grupo pues solo duplicas todas las líneas y luego aprietas Ctrl + G y repites los mismos pasos de desenfoque,  cambio de modo y opacidad.

Lo que harás ahora será duplicar todas las capas de las líneas y luego de eso volvemos a rejuntarlas en una sola apretando Ctrl + E, después agarraremos nuestra herramienta dedo y con un pincel difuso de entre 100px y 300px lo pasaremos a estas líneas dando un buen toque sin exagerar, después de eso pondremos a esta capa en modo Luminosidad y le bajaremos la opacidad a 50px:

Muy bien ahora este grupo donde tenernos todas estas líneas y efectos logrados, la duplicaremos y luego la convertiremos en un objeto inteligente, después le quitamos la visión al grupo anterior, como mencione anteriormente esto solo sirve para ediciones futuras.

8.- Como siguiente paso, que ya aun es más fácil, lo que haremos será crear otro grupo este ira encima de lo que acabamos de hacer, ahora fíjate muy bien en lo que harás, esta ultima capa de objeto inteligente que tiene todas las líneas del grupo anterior, la duplicaremos y esta capa duplicada la pondremos dentro de este grupo que acabamos de crear, luego te iras a Capa/Nueva Capa de ajuste/Blanco y Negro y pondrás las propiedades que te aparecerán en la imagen y luego apretaras Ctrl + Alt + G a esta capa para que solo le trabaje a la capa duplicada:

Nota: Puedes trabajar en la mascara de capa que se crea automáticamente al crear un ajuste, recuerda que con negro se borra y con blanco se repone.

Ahora lo fácil será ir duplicando la capa de líneas (la del objeto inteligente que creamos anteriormente), así como la vas duplicando la vas haciendo chica, borrando partes que no te gusten, transformando, girando y mucho más, pero siempre en mismo entorno de las líneas, cosa es darles dureza y fuerza a las líneas:

Este paso se basa técnicamente en tu creatividad de transformación y composición.

Ahora todo lo se ha hecho se aplicara pero para la parte de debajo del diseño, ya sea duplicando lo anterior y poniéndolo para seguir con la jerarquía solo que un poco mas pequeño.

Lo que harás ahora es crear de nuevo otro grupo encima de este último, y luego el último grupo creado donde tenemos todo lo ultimo hecho de líneas, lo duplicaremos y también lo convertiremos en objeto inteligente (quítale la visión también a este grupo que acabamos de duplicar) pero este no lo duplicaremos este lo meteremos en este nuevo grupo, lo que haremos en este nuevo grupo será lo mismo que el anterior, ir duplicando, editando, transformando, girando y demás siempre en la misma idea de las líneas:

Ahora duplicaremos este grupo y lo convertimos en un objeto inteligente, después quitamos la visión a este último grupo, ahora ya debemos tener toda la composición de las líneas en una sola capa, ahora recuerdan la capa de objeto inteligente primera que creamos (paso 7) le vamos a quitar visión, ahora este ultima capa de objeto inteligente en donde tenemos todo la vamos a duplicar 2 veces y a la primera duplicada le agregaremos un desenfoque Gaussiano de 3px de radio después de esto, esta capa la pondremos en modo Luz Lineal (variable) y le crearemos una mascara de capa y borraremos las partes que no usaremos (negro borras, blanco recuperas) y a la segunda imagen duplicada le pondremos el mismo desenfoque pero el modo de capa será Sobreexposición lineal y le pondrás una opacidad de 50px, después también a este le pondrás una mascara de capa donde borraras todo lo que no desees:

Ahora que ya andamos casi acabando con las líneas puedes agregar detalles siempre usando líneas y el modo duplicar, donde desees:

9.- Para ya casi terminar agregaremos agua, para eso yo use los stocks siguientes 1, 2 después para recortar solo el agua use la herramienta Gama de Colores que se encuentra en Selección/Gama de colores, en el pack trae 2 psd del agua ya recortada, lo único que se hace para recortarla es únicamente agregar un ajuste Curva para tratar de aclarar mas el agua, después de eso nos vamos a lo mencionado anteriormente Selección/Gama de colores y luego vemos la tolerancia a poner para que nos seleccione el agua únicamente, yo use tolerancia de 200% ya luego listo ya tenia todo perfecto, lo mismo hice en el otro psd de agua.

Ya recortados bastaran solo con insertarlos en el diseño, de preferencia en la parte trasera del stock del personaje, después irlos transformando para darle la perspectiva deseada y acomodarlos perfectamente en el diseño:

Nota: Como consejo recomendaría usar la herramienta mover en la propiedad Deformar para lograr formas diferentes de agua.

Y también este tutorial te puede servir:
Modos de recorte en Photoshop

Con este último agregamiento ya tenemos la composición lista, ahora puedes agregar los detalles que desees antes de empezar a agregar ajustes y demás para darle un mejor estilo, pero eso es a consideración de uno.

10.- Lo que haremos ahora será crear una nueva capa encima de todas, después de eso nos iremos a Imagen/Aplicar Imagen, después agregaremos los siguientes ajustes de capa para darle un mejor tono y enfoque al diseño:

Ahora después de agregar esto, volvemos a crear una nueva capa encima de todo y de nuevo aplicamos imagen, después duplicamos esta capa donde aplicamos imagen y luego de eso agregaremos efectos de iluminación en esta imagen duplicada, para eso nos vamos a Filtro/Interpretar/Efectos de iluminación, el efecto dependerá de cómo desees que quede en el diseño, que es lo que sobresaldrá, lo que se iluminara, después a esta capa le bajaras su opacidad a 50px.

Ahora lo que harás será de nuevo crear una nueva capa encima de todas las demás, luego volverás a aplicar imagen (Imagen/Aplicar imagen), usaras esta capa para agregar sombras e iluminaciones con 2 herramientas que anteriormente habías explicado como usar en este tutorial:

Sombras e Iluminaciones en tus Diseños

No es difícil y en ese tutorial veras como funcionan.

Nota: Como consejo podes agregar mascaras de capas a estas últimas capas hechas para borrar las zonas donde no desees que surjan efectos (negro se borra y blanco se repone, todo esto con la herramienta pincel)

Bueno ahora como siguiente lo que harás será crear lo mismo una nueva capa y luego aplicar imagen, después esta capa la duplicaras y luego te iras  Filtro/Enfocar/Enfocar, lo siguiente será bajarle la opacidad a esta capa a 50px o 70px, dependiendo de cuanto enfoque deseemos que tenga, cuando ya tengamos el enfoque deseado apretaremos Ctrl + E para unir la capa con la de abajo y listo, diseño terminado:

Hidden - Have Nice Day

Espero que este tutorial te haya ayudado a aprender ciertas técnicas y te de nuevas ideas para crear tus propios diseños.

Articulos Interesantes

• Tutorial + Plus – Composicion desde cero
• Tutorial – Ilustracion con Formas
• Tutorial – Wireframes en tus diseños
• Entrevista: Marcela Bolivar
• Modos de seleccion y recorte en Photoshop

Como ya la mayoría de uds sabe, el formato PSD de Photoshop es el que nos permite guardar todos nuestros avances cuando trabajamos en este programa pero termina siendo muy pesado el archivo ya que guarda todo lo que utilizamos (capas, filtros, pinceles, objetos inteligentes, textos, formas personalizadas, etc)

En realidad esto no es tanto problema salvo cuando nuestro disco duro se está quedando sin espacio. Aún así, este problema se agrava cuando tenemos que transportar ese archivo a otra pc. Varios de los problemas que pueden surgir con un psd de mucho peso:

• Si tu llave maya o pendrive no es de mucha capacidad puede peligrar (si usas las de 128 mb estás en serios problemas…).
• Si necesitas escanear la llave con un antivirus puede tardar mucho tiempo.
• Dura mucho más en cargarse cuando entra el Photoshop, puede ralentizar el mismo programa y si no tienes mucha RAM puede que se te trave a menudo con la mímima modificación que hagas.
• Si deseas imprimir directamente del PSD puede tardar demasiado en llegarle a la impresora.
• La generación de resolución completa requiere de bastante uso del cpu.

Estos problemas parecen ser inofensivos pero cuando tienes prisa pueden complicarte las cosas. Ahora, tal vez pienses, bueno, pero para eso mejor lo guardo en formatos jpeg, png o gif que son menos pesados, inclusive en un PDF. Pero el problema es que si tu psd es pesado puede que tu archivo de imagen lo sea tambien, menos pesado eso si. Además de que no puedes alterarlos como en el archivo psd original porque son “planos”.

Algunas de las variables que hacen que los archivos PSD se hagan pesados o ligeros son los siguientes:

• Tamaño del lienzo: Esta es básicamente la que mayor cantidad de megas requiere. Al tratarse de mapas de bits que son los que manejamos con Photoshop, la cantidad de píxeles influye mucho en la el peso del archivo, ya que el programa debe craer el “mapa” de los pixeles en mayor cantidad abarcando un mayor espacio.

Por ejemplo comparemos el peso de dos archivos PSD en blanco con diferentes dimensiones de lienzo:

• Modo de color: Esto consiste en el tipo de administración de color que le vamos a dar al documento. Photoshop ofrece cinco administraciones de color: Mapas de bits (Administración por monocromía), Escala de grises (Administración por colores neutros), RGB (Administración por colores luz), CMYK (Administración por colores pigmento) y LAB (Administración por colores tridimensionales)

Comparemos los archivos con diferentes modos de color:

Los archivos tienen la misma cantidad de píxeles (700×700) pero diferente  modo de administración de color. Siendo el mapa de bits el menos pesado, luego la escala de grises, RGB y LAB empatados y el más pesado es el CMYK.

El mapa de bits solo utiliza un color por lo que es más ligero, pero el CMYK utiliza más colores, por eso es más pesado.

• Cantidad de bits: Este está sumamente ligado al anterior por el hecho de que según la cantidad de bits que utilicemos podremos incluir una mayor gama de colores. Por eso el Mapa de bits sólo utiliza 1 bit porque es monocromo y los demás pueden llevar de 8, 16 y 32 bits. Comparemos el peso:

Como podrán ver el resultado muestra que el peso práctimente es una multiplicación doble proporcional a la cantidad de bis: doble cantidad de bits=doble cantidad de K/Mega bytes.

• Cantidad de capas/objetos: Esta es bastante obvia, entre más cosas y capas tenga tu documento más pesado es, aunque si trabajas desde el incio con los puntos anteriores de forma correcta y que realmente necesitas, no será tan pesado. Objetos inteligentes, formas vectoriales y texturas aunmentan considerablemente el peso de un archivo PSD.
• Compatibilidad con versiones futuras de Photoshop: ¡En qué consiste? En que al guardar el achivo psd puedas hacer que este sea lo  más compatible posible con el próximo Photoshop, así que sí usaste Photoshop CS2 y lo vayas a abrir en un CS4 no te de problemas, aunque esto rara vez sucede. Esta  te quitará peso del archivo sí la deshabilitas, entre un 20% o 10% del peso total del .Psd. Por ejemplo un archivo de 1.40 mb con la opción de compatibilidad desactivada pesa alrededor 1 mb, compara eso con archivos que llegan a pesar más de 100 megas…

Conclusión:

Ya sabes lo que afecta el peso de un psd, ¿ahora qué? Ahora aplícalo. Por ejemplo, si vas a realizar una composición con objetos 3D utiliza un lienzo proporcional al uso o lugar donde lo vas a mostrar (sea un wallpaper o un banner), escoge el sistema de color LAB que trabaja con colores tridmensionales no exactos (buenos resultados, especialmente en Photoshop CS4 con archivos de 3DS Max…:p) y entre 16 y 32 bits según la cantidad de colores que quieras usar. Por el contrario si vas a realizar algo en blanco y negro, utiliza Escala de Grises desde el inicio y no tendrás que desaturar imágenes luego. Si vas a imprimir, usa el tamaño de la hoja donde lo vas a imprimir, CMYK o LAB (si vas a pasarlo a PDF) y 8 o 16 bits máximo.

Espero que este aporte les haya ayudado y que liberen un poco de espacio en sus discos duros y puedan trabajar más rápidamente en Photoshop…recuerden, todo se trata de sentido común. ¡¡Saludos a todos!!

(Visiten josheron.wordpress.com para entrar en contacto conmigo si necesitan más información)

Articulos Interesantes

• Tutorial – Wireframes en tus diseños
• Tutorial – Ilustracion con Formas
• Photoshop CS5: Impresiones
• 1º Aniversario para PSDcreativo
• Concurso: Diseño + Bloggers

Entre las muchas cosas que hacemos a la hora de diseñar es seleccionar para recortar, gracias a que el photoshop es muy extenso existen diferentes formas de poder seleccionar ya sea partes de imagenes, personajes y un sin fin de cosas, ahora en este articulo se explicara los modos mas usados y de mejor resultado:

• Seleccion con la Herramienta Pluma

Esta es la herramienta mas usada a la hora de seleccionar por su facilidad de manejo y edicion, podras ver que en casi la mayoria de mis tutoriales uso esta herramienta para recortar, para poder usarlo primero nesesitamos saber como esta compuesta esta herramienta.
Para eso hay un post en PSDtuts bastante completo sobre su uso, no es nesesario saber tanto el ingles ya que esta mas que explicado la guia:

Tambien hay uno en español hecho por el equipode elwebmater.com que te puede servir:

Y en Photodesigners, Samuel ha elaborado un tutorial sobre el uso mismo de esta herramienta:

Ahora bien creo que guias mas completas no puede haber.

Para recortar ahora primero buscamos que cortar, ya sea cual quier cosa, objeto, etc:

Nota: Si nesesitas stocks hay 2 posts sobre buenos sitios para descargar stocks, en el blog:

8 Exelentes sitios para descargar stocks

Galerias para descargar Stocks en Deviantart

Despues de escoger la imagen, recortar con la pluma es facil y si te tomaste el tiempo de leer los manuales mucho mas.  Entre algunos tips a la hora de recortar con esta herramienta:

Configuracion

Antes de seleccionar con la herramienta pluma (P) debemos escoger la configuracion nesesaria para llevar a cabo la seleccion:

Esa es la configuracion de Trazados para que a la hora de empezar a usar la herramienta pluma, al finalizar, podamos hacer la seleccion.

Usa la Herramienta Zoom (Z):

A la hora de recortar, una de mis recomendaciones o tips, es que usen la herramienta zoom, mayormente algunas imagenes no estan a un tamaño grande, el zoom ayuda mucho para lograr una mejor seleccion, aparte de que al ampliar la imagen usar la pluma se le hace mas facil a uno:

Aprende y  Usa todas las Subherramientas

Aprender a usar todas las subherramientas de esta herramienta te va ayudar mucho  a la hora de corregir trazados, agregar toques al trazado para recortar, todo esto para no tener la nesesidad de un hacer un trazado nuevo.

Para eso son las guias que mencione antes.

Recortar con esta herramienta es bastante simple ahora bien depende de ti seguir la practica ya que en esta herramienta hay otros millones de trucos por descubrir.

• Utilizando el Filtro Extraer
  

Esta herramienta te puede sacar de apuros si estas comenzando en el mundo photoshop, este filtro se encarga de estraer las porciones del algun objeto y recortarlo como si lo hicieras con la pluma, una muy buena funsion que tiene es el cortar cabella y esas cosas, veamos su funcionamiento:

Para comenzar escogemos una imagen cualquiera, despues haremos lo siguiente, nos iremos a Filtro/Extraer o solo apretamos Alt + Ctrl + X en el photoshop, esto nos abrira una nueva ventana con las opciones de este filtro:

En la imagen podras ver el uso de esta herramienta, las opciones son muy facil de usar, con la herramienta marcador resaltaremos poco a poco los bordes (verde) de la imagen que es lo que marcara que se recortar, despues de tener bordeado lo que se quiere extraer, agarraremos  la herramienta relleno (azul) y rellenaremos lo de adentro de lobordeado para marcar el limite.

En el menu derecho podras ver las configuraciones normales, tamaño de pincel para hacer el borde, colores de tipo de borde y relleno (azul, verde, rojo, etc).

Aqui ya esta la imagen recortada:

Como podras ver te deja la imagen con un corte bueno y en poco tiempo.

Ahora sobre el uso en el corte de cabello dejo un videotutorial donde podras ver el uso, que viene casi siendo lo mismo que hicimos en el paso anterior:

Pinche aquí para ver el vídeo

Como has de ver el usar este filtro esta por mas de facil, una opcion mas a la hora del recorte.

• Ajuste Umbral

Este ajuste te puede ayudar a recortar imagenes dificiles de seleccionar, es muy facil de usar y te  puede ahorrar tiempo, he hecho un video tutorial basando de la explicacion hecha en un post en Psdtuts,  para que veas como funciona:

Pinche aquí para ver el vídeo

• Usando las Mascaras de Capa

La mascara de capa es una herramienta fundamental a la hora de diseñar y nos puede sacar de muchos apuros, se puede usar de diferentes formas hablando sobre recorte:

El pimero seria activando el modo Mascara rapida, en este video puedes ver su funcionamiento:

Pinche aquí para ver el vídeo

El siguiente es usandolo como mascara de recorte:

Pinche aquí para ver el vídeo

Y otro tipo de recorte que se puede lograr es usando la mascara vectorial:

Pinche aquí para ver el vídeo

• Gama de Colores

Este es un buen selector, de buena ayuda con esas imagenes que se ven dificiles de recortar por los detalles casi dificiles de ver o seleccionar, la seleccion se realizara segun la tolerancia (medida) que le pongas a la imagen, para eso en Fotosigno hay un gran tutorial explicado de como usarlo:

Entre una pequeña explicacion, esta opcion tiene la funsion de seleccionar segun el color, sombra o iluminacion, escala de grises, etc de una imagen.

• Niveles

Este ajuste es bastante bueno para seleccionar imagenes con fondo blanco, aqui un ejemplo:

Pinche aquí para ver el vídeo

Quiza te preguntes, porque no mejor lo recorto directamente con la herramienta vara magica, la respuesta seria porque aparte de ahorrar mas tiempo de ir recortando por espacios, al mover los niveles, la imagen se convierte en un solo color esto ocasiona un mejor corte, aparte de que al recortar con la herramienta vara en muchos casos deja los borden muy pixeleados y mal recortados.

Mas informacion

Porque creo que no esta demas seguir aprendiendo y crecer, aqui les dejo enlaces sobre tutoriales sobre recorte:

Truco de seleccion de recorte en photoshop

Entrevits video tuto sobre seleccion y recorte

Como recortar en photoshop 1º y 2º parte

Tecnicas sobre seleccion en photoshop

Saber, tanto seleccionar como recortar en photoshop, es una tecnica que la verdad, te puede ayudar bastante a la hora de diseñar, aparte de que es fundamental para cualquier diseñador,  y saber usar todos los modos de recorte y seleccion te puede hacer un mejor diseñador.

Dudas, sugerencias, comentarios sobre los video tutoriales, que pido disculpas si no tiene voz, mi antiguo microfono no funciona, pero les prometo que los proximos son con voz, de paso se aceptan donaciones para un nuevo microfono (jeje ).

Articulos Interesantes

• Tutorial – Composicion Tipografica
• Tutorial – Wireframes en tus diseños
• Tutorial – Creando una Composicion Impactante
• Tutorial + Plus – Composicion desde cero
• Tutorial – Diseñando una Ilustracion Elegante con Photoshop

Hace poco, despues de haber hecho el tutorial al blog de Diego Mattei, me abrio una puerta en la cual fui invitado por el dueño de Solophotoshop (un sitio de tutoriales photoshop en español bastante conocido) a escribir en su revista mensual sobre diseño, esta revista es de muy buena calidad porque podras encontrar tutoriales, tecnicas, trucos, crear efectos, guias, y mucho mas, que escriben y dan otros diseñadores profesionales.

En mi caso, escribi un tutorial para la creacion de una Composicion desde cero, osea solo usando lo que el photoshop te da por preterminado, osea como si lo acabaras de instalar, usando apenas un stocks para el personaje, podras aprender a crear muy buenos efectos que daran un muy buen resultado al diseño que queramos lograr.

La revista tiene un costo bastante bueno y al alcanze de todos, creanme no se pueden perder esta revista y todas sus demas ediciones.

Revista

Articulos Interesantes

• Tutorial – Creando una Composicion Impactante
• Tutorial – Wireframes en tus diseños
• Modos de seleccion y recorte en Photoshop
• Tutorial – Diseñando una Ilustracion Elegante con Photoshop
• Tutorial – Ilustracion con Formas

Click para ver tamaño real

En esta ocasion tuve la grata oportunidad de hacer un tutorial para un sitio sobre diseño llamado Oh¡ Grafico, un sitio bastante completo e interactivo, donde puedes encontrar tanto recursos como inspiracion.

En el tutorial podran aprender a crear un diseño bastante simple pero a la vez bastante llamativo. Todo esto se lograra usando herramientas como la pluma, de formas, y algunos estilos de capa para un mejor resultado. Y esto lo podran lograr solo usando el photoshop, si es que no tienes el illustrador en manos.

Sin mas que decir les dejo el link hacia el tutorial y puedan juzgar ustedes mismos:

Ir al tutorial

Articulos Interesantes

• Tutorial – Composicion Tipografica
• Tutorial – Wireframes en tus diseños
• Tutorial – Creando una Composicion Impactante
• Modos de seleccion y recorte en Photoshop
• Entrevista: Juan Carlos Padilla (Tukan)

1.  Primero comenzamos creando un archivo nuevo del tamaño que deseen, en mi caso lo hare del siguiente tamaño, 600px por 750px, por consiguiente a la primera capa le pondremos el siguiente degrade en modo lineal con 90 grados, los colores a poner serán #bbc59d en la parte inferior y #96baae la parte superior que quede algo así:

2. Ahora agregaremos nuestro stock de la persona, para eso el mi lo busque en sxc.hu, te registras porque esta pagina requiere registro para descargar stocks, luego en donde dice + images categories, das click se te desplegara un listado de categorías, te vas a People/ Emotions/Happiness, y ahí te saldrán varias imágenes del tipo que tiene el diseño, después de buscarla, te vendrá con fondo el stock, tendrás que cortar solo a la persona con la herramienta pluma (P), después a esta persona que cortaste lo pondrás en tu trabajo:

Nota: Si no sabes usar la herramienta pluma aun,  aquí te dejo un enlace a un tutorial de su uso:
Uso de la herramienta Pluma

3. Ahora en este siguiente paso buscaremos una imagen (yo la busque del mismo sxc.hu) que tenga la forma de agua como explosión, como esta:

SXC.HU (Copyright)

Que tenga ese tipo de formas y explosión de preferencia ya que nos ayudara con el efecto que explicare a continuación (la imagen viene en el pack del tutorial).

4. Ahora a esta imagen la ponemos en el photoshop (para quitarle el candado solo la duplicamos o si eso les falla pues copiamos la imagen Ctrl + a para seleccionar todo, luego Ctrl+c para copiar, después de eso creamos un nuevo archivo (Determinadamente damos ok, las medidas ya nos la pone el photoshop) y apretamos Ctrl + v para pegarlo), ahora ya sin candado, nos vamos directamente a Selección/Gama de colores,  esto hará en nuestra imagen una selección según los colores, ahora lo que haremos pondremos la siguientes opciones:

Ahora como puedes ver lo que quiero lograr, no es cortar el agua si no cortar partes de ella, para dar un aspecto de grunge el cortado, para eso como puedes ver lo que aparece en blanco en las opciones va a ser lo que se seleccionara (Donde esta el fondo negro, lo blanco será lo que te seleccionara al dar ok) para luego recortarlo, y si vez no selecciono el agua si no parte de ella para poder dar el aspecto antes mencionado.

5. Ya teniendo puesto la gama de colores, escogemos solo parte del agua no cortarla toda, para eso vamos moviendo la barra de tolerancia, hasta que solo aparezca en blanco lo que queremos seleccionar, después de tener lo querido damos en ok, para luego solo cortar y pegarlo en nuestro trabajo del tutorial que quede algo así:

6. Ahora agregaremos algunas formas para lograr un aspecto mejor en nuestro diseño, aquí explico cuales, como hacerlos, donde ponerlos, y a darles el efecto:

1.- Lo primero que haremos será agregar dos círculos detrás de la capa del render (la persona que recortaste para el trabajo), los círculos serán de colores #efedd8 y #ffffff, para eso nos vamos agarrar la herramienta elipse, primero apretamos la tecla U, para que seleccione la herramienta que sirve para formas, después escogemos la forma del circulo, ya después, para ponerlo en nuestro trabajo primero apretamos Shift lo mantienes presionado y luego ponemos la forma en nuestro trabajo, el apretar Shift hará que al pasarlo nos haga un circulo exacto y redondo perfectamente:

2.- En este siguiente efecto agregaremos diagonales, esto es fácil, volvemos con la herramienta anterior mencionada (Herramienta de formas), solo que ahora escogeremos la herramienta línea, y la pasaremos en nuestro trabajo pero como diagonales, la dirección va dependiendo hacia donde vaya el render aunque no es muy exacta al igual que el color. Ahora después de poner todas las líneas que queramos, a la capa de líneas le pondremos una mascara de capa (no olvides con negro se borra y blanco se repone), después nos vamos a agarrar un pincel, en este caso escogeremos el pincel Salpicaduras en 46px, para que nos de un efecto de intervalos en las líneas, lo pasas muy suave a las líneas hasta lograr el efecto siguiente:

3.- Como siguiente efecto haremos lo siguiente, primero agarramos la herramienta elipse de nuevo, pero en este caso si ves en el panel de propiedades donde tienes agarrado (En la parte de arriba) te aparecen 3 opciones de cómo vendrá el círculo (Donde están las plumas):

• (Capas de forma) El primero es que al hacer el círculo tenga un relleno inmediato, ósea hacer un circulo normal.
• (Trazados) El segundo que es el que elegiremos nos hará el efecto como pluma sin relleno, este solo contorneara con una guía y ya nosotros podremos hacer ya sea un contorno del círculo o un relleno o una selección.
• El tercero es para rellenar pixeles.

Ahora bien como mencione tomaremos el segundo como muestra en la imagen de abajo, después haremos nuestro círculo, no olvides tener presionado Shift para que el círculo sea exacto y no ondulado, el círculo como veras te aparecerá sin relleno ni nada solo te aparecerá la línea pre terminada de guía que te pone la pluma, ahora ya teniendo el circulo nos vamos a la herramienta pincel, en esta escogeremos un pincel duro de 1px (el primero de los pinceles que vienen por defecto del photoshop), después de elegir el pincel, creamos una nueva capa, de nuevo volvemos a la herramienta elipse, y damos click derecho al circulo que habíamos hecho, damos en contornear, elegimos la herramienta pincel, después damos en ok, y como vez nos contorneara el circulo, solo contornearlo, después de eso, creamos una nueva capa y agarramos la herramienta pincel de nuevo y ahora elegimos uno del mismo tipo con el que contorneamos solo que este de entre 3px o 4px, y este lo pondremos en la raya del contorno del circulo, para lograr algo así:

7.- En este siguiente paso agregaremos círculos, muchos círculos y al gusto, los puedes agregar con la herramienta elipse apretando Shift para que el circulo salga redondo, también no olvides que por circulo es una capa, puedes ponerlos en la parte de delante de nuestro render, en la parte de atrás, a un lado o al otro, alejados,  círculos que estén recortados, etc. También de diferentes colores, con degrades que para agregarlos solo necesitamos dar doble click en la capa del circulo para que nos habrá las opciones de fusión y elegimos Superposición de degradado, escogiendo el degradado al gusto, aun que si no quieres ponerle un degrade y quieres cambiarlo de color, abrimos de nuevo las opciones de fusión y elegimos Superposición de Colores y elegimos el color querido, hasta lograr algo así:

8.- Ahora agregaremos formas que salen hacia afuera, esto lo haremos con la pluma, es bastante fácil, tomamos la herramienta pluma (P), elegimos la opción de trazados, para que al usarla no nos haga ningún efecto solo y solo nos muestre la guía (La misma que usamos en la herramienta elipse anteriormente), después haremos trazos hacia afuera de nuestro trabajo como muestra la imagen de abajo, creamos una nueva capa, después al trazo le damos click derecho y damos en rellenar, elegimos color frontal (para poder elegir color) y damos ok, si tu deseas cambiar otra opción sobre el relleno es al gusto, ahora si al trazo deseas agregarle algún degrade repetimos el paso de abrir las opciones de fusión y elegimos Superposición de degrade y elegimos el degrade que queramos, hacemos mas trazos, puedes duplicar los ya hechos, girarlos, hacerlos mas pequeños, etc.:

Nota: El que tienes 3 colores, lo que haremos será tomar la herramienta rectángulo y haremos 3 formas de tipo barras, claro con diferentes colores, como muestra la imagen, ahora haremos el trazo con la herramienta pluma en el modo de trazados (como menciono antes para que solo nos muestre la guía pre terminada) después de hacer el trazo con la pluma damos click derecho y elegimos Hacer Selección, después damos directamente ok en la opciones que nos salgan, después copiamos la selección que nos da, después volvemos a pegar, no olvides borrar las capas de las barras de colores, ya ahora solo colocamos lo recortado en el modo que queramos, ya sea girarlo con la herramienta Mover (V), etc., hasta tener algo así :

9.- A continuación haremos lo siguiente detrás del render, primero agarramos la herramienta pluma de nuevo, después de eso, en vez de elegir la opción de Trazado elegiremos la primera que es la de relleno de formas, ahora ya teniendo la herramienta a mano, haremos trazos pero sin seguimiento ósea como quien dice trazos a lo “loco”, para lograr algo tipo abstracto como muestro a continuación, para agregar el color, solo tenemos que crear una nueva capa encima, luego apretar Ctrl +Alt + G, funciona para que la capa solo funcione en la capa de abajo, es decir lo que pongas solo aparecerá en lo que tengas abajo, es llamado como Clipping Mask, (puedes crear todas las capas que necesites) si al apretarlo te pide que necesita rasterización o algo por el estilo le das en Si o continuar, ahora agarraremos la herramienta pincel y escogemos uno tipo duro con un tamaño que depende que donde quieres poner color, y si quieres agregar degrade solo tienes que dar doble click en la capa donde pasaste el pincel y das en superposición de degradado y escoges el querido, con eso debes lograr algo parecido a esto:

10.- Por últimos pasos haremos lo siguiente:

1.- Tomamos la herramienta pincel del tamaño 1px, escogemos un color cualquiera, y lo pasamos por donde deseemos, con eso lograras algo así:

2.- Agregamos 2 brushes tipo splatter, después de eso crearemos un texto en el fondo de nuestro diseño, después de elegir fuente y escribirlo, rasterizamos esta capa de texto, luego agarramos el borrado y escogemos el brush: Appendix-Halftone (para agregar un brush puedes ver aquí), y escogemos el brush Sampled Brush 14 y borramos con este brush el texto:, logrando al parecido a lo siguiente:

3.- Por ultimo agregaremos una capa de relleno Capa/Nueva capa de relleno/Degradado después elegimos el degrade Violeta-Naranja (Esta en los que aparecen pre terminados del photoshop), después lo ponemos en modo Luz Lineal (Puede variar) con una opacidad de 20%, ahora en la mascara de capa que trae pueden (si desean) borrar lo que no necesiten (Negro borras, blanco repones) , como siguiente crearemos una nueva capa encima de todas, después aplicamos imagen, para eso nos vamos a Imagen/Aplicar Imagen, después de aplicar la imagen, duplicaremos esta imagen, luego nos vamos a Filtro/Enfocar/Enfocar, después a esta capa con enfoque le ponemos una opacidad de entre 50 y 60px y listo debemos tener el resultado final:

Espero que este tutorial le haya servido en algo y les haya gustado, tratare de postear mas seguido.

PSD Ilustracion con Formas

Descargar PSD

Articulos Interesantes

• Tutorial – Wireframes en tus diseños
• Tutorial – Creando una Composicion Impactante
• Tutorial – Destruyendo un edificio
• Tutorial – Crear un Poster Typografico
• 1º Aniversario para PSDcreativo

Despues de tanto proceso en el blog, no habia tenido tiempo para poder un tutorial en photoshop, en estos dias me decidi a crearlo pero en una categoria que casi tenia abandonada.

El tutorial lo he dado como colaboracion al blog de Diego Mattei (que ya ni nesesito mencionar quien es), una web de recursos variados y con bastantes articulos de interes.

El tutorial esta mas que explica en esta ocasion con mas imagenes, para mejor comprension, para que cualquiera de cualquier nivel pueda lograrlo.

Tambien hay unos tips sobre la herramienta pincel, como tambien creacion de un tipo de vector.

Sin mas palabras los invito a todos a leer el tutorial y dar su opinion y porque no? ponerlo en practica:

Articulos Interesantes

• Modos de seleccion y recorte en Photoshop
• Tutorial – Diseñando una Ilustracion Elegante con Photoshop
• Inspiracion: Jonathan Wong
• Tutorial – Wireframes en tus diseños
• Tutorial – Creando una Composicion Impactante