Mas Photoshop

Photoshop pasa por ser uno de los programas informáticos con un área de trabajo más lógica y ordenada. Las nuevas paletas o la barra e opciones que incorpora la nueva versión no han hecho sino aumentar este prestigio.

La barra de menús
En los nueve menús se encuentran todos los comandos que nos permitirán trabajar con Photoshop. Respecto a las versiones anteriores, destaca el aumento considerable de opciones del menú Capa y un menú Ayuda más completo, sobre todo por la integración de la ayuda en línea.
barra de menúsEn líneas generales el menú Archivo posee los comandos relacionados con la gestión del archivo, tales como Abrir, Guardar, Cerrar, Importar o Exportar. El menú Edición alberga los comandos comunes de edición, como Copia, Cortar, Pegar, Deshacer y Rehacer. Además, en él se insertan las diferentes opciones de transformación de una imagen o una capa y los ajustes y preferencias del programa. En el menú Imagen, encontrarás los controles que determinan la imagen, tales como el modo de color, los ajustes de color y el tamaño de imagen. El menú Capa, que ya hemos dicho que ha sido ampliado sobre manera, alberga las opciones de capa, algunas de las cuales se encuentran también en la Paleta Capas. Desde el menú Selección podrás controlar cualquier selección realizada anteriormente, como Invertir, Suavizar o Calar.

El siguiente menú es el que contiene los filtros de Photoshop. Los filtros son pequeños programas desarrollados por Adobe Systems y otros desarrolladores de software en colaboración con Adobe Systems que sirven para añadir funciones a Photoshop. Los filtros que incorpora Adobe Photoshop están agrupados en 14 submenús. Además, los filtros instalados de otros fabricantes aparecen en la parte inferior del menú Filtro. Existen filtros artísticos, de desenfoque, de distorsión, etc. El menú Vista contiene los controles que determinan la visualización o 'zoom' de las imágenes y los que controlan los elementos de organización, como guías, reglas o cuadrículas. Desde el menú Ventana podrás mostrar u ocultar las paletas de Photoshop. Finalmente, el menú Ayuda contiene un magnífico tutorial y ayuda en línea a través del sitio web de Adobe.

La barra de estado
La barra de estado, situada en la parte inferior de la ventana, muestra información útil, como el nivel de zoom actual y el tamaño del archivo de la imagen actual, e información breve acerca del uso de la herramienta que tienes seleccionada.

1. Hacer la figura o texto al que le queramos aplicar un borde en una capa independiente, ya que la herramienta de contornear traza líneas por los bordes de las capas.
2. Ahora vamos al menú edición/contornear edit/stroke , y nos aparece un cuadro como el de la izquierda, en la zona que dice anchura definimos el grosor de la línea de contorno.
El color del contorno es el que tengamos seleccionado como color frontal. photoshop


3. Una vez que oprimimos el sobre el botón OK el borde aparece alrededor de la capa, este tutorial es bueno para contornear textos que necesiten ser resaltados, o que tengan mal contraste con el color de fondo.

En las últimas versiones de Adobe Photoshop , no es necesario usar ImageReady ya que el mismo Photoshop incluye la Herramienta de Corte (Slice Tool). Este tutorial contiene las capturas de Adobe Photoshop CS3 , pero con leves cambios se puede realizar lo mismo en Photoshop CS y CS2 .

Luego de abrir el archivo, vamos seleccionar la Herramienta de Corte (Slice Tool), para poder seleccionar cada uno de los elementos gráficos del diseño.


De esta forma es que le indicamos a Photoshop CS3 como dividir el diseño para obtener pequeñas imágenes que se insertaran en el HTML de nuestra Web.

La forma de trabajo es sencilla, vamos a marcar los elementos como el logo, la zona de banners, el menú, etc. de cada parte y realizar el Corte arrastrando el ratón con la herramienta Corte (Slice Tool), como muestra la imágen.

Con paciencia y de la misma forma, vamos a ir cortando todos los elementos hasta que quede como se muestra en la siguiente imágen.


Con esto que hemos hecho ya podemos llevar nuestro diseño a Dreamweaver CS3 (o una versión anterior u otro editor si lo prefieren), para Guardar el HTML debemos hacer lo siguiente:

Archivo, Guardar para Webs y Dispositivos




Luego debemos seleccionar la solapa de Optimización (Optimized), donde veremos nuestro diseño con los cortes, y presionamos en el botón Guardar (Save)


En esa nueva pantalla vamos a asegurarnos y controlar estos 5 puntos:


1. El nombre del archivo HTML, en este caso le di: index.html
2. Tipo de archivos que guardaremos: HTML y las Imágenes
3. Seteos Personalizados (Custom)
4. Cortes Todos (All Slices)
5. Presionamos Guardar (Save)

Listo !!, con esto tenemos nuestra pagina Web cortada y lista para trabajarla en Dreamweaver CS3 (u otra versión u otro editor HTML).

En este truco vamos a explicaros como modificar una tipografía ya creada con Photoshop,este truco de Photoshop nos será muy útil cuando por diseño,necesitemos modificar alguna parte de la fuente.
A continuacion tendremos que convertir la Capa Texto en una Capa de forma, para ello iremos al menu Capa - Texto - Convertir en Forma.

Una vez convertida la Capa Texto a Forma seleccionaremos la Herramienta de selección directa ( A ) imagen posteada por el usuario ,con esta herramienta podremos mover los puntos o nodos de nuestra forma, de manera que según los vayamos modificando los huecos se irán rellenando solos.

Podemos editar un texto desde su capa y en
Menú - Ventana - Carácter
Se abrirá la paleta de Carácter y aquí podremos editar las opciones del texto.

Convertir una cara en dark utilizando texturas.


El video tutorial es en inglés.

Poniendo texturas a una cara.

1. Para empezar hay que crear un documento nuevo en RGB. Lo primero que necesitamos es una selección circular, por lo tanto, creá un nuevo layer (o capa) en Layer/New/Layer... y presionando ENTER o presionando el ícono de nuevo layer. Con la selección circular y presionando SHIFT creá la selección...

2.Ahora que tenemos lista la selección tenemos que setear correctamente el gradiente. Haciendo doble click en la herramienta Gradiente. Esto debe hacer visible la ventana de opciones de esta herramienta, nos fijamos de cambiar el tipo de degradado de Linear a Radial y hacemos entonces click en el botón Edit...
Aquí se pueden elegir varios estilos de degradados, pero recomiendo elegir uno que incluya 3 colores y modificarlo para que los colores de los costados sean blanco. Luego, el color del ¿Ven esas flechitas con forma de diamante? Hay que correrlas hacia los costados para que queden como en el ejemplo.

3.Ahora todo está configurado correctamente. Presioná OK para salir de esta ventana. Listo, ahora solo queda ir al layer del círculo y arrastrar la herramienta gradiente desde la parte superior izquerda hasta abajo a la derecha. Es posible que tome un tiempo hasta que encuentres la forma adecuada de aplicar el gradiente, no olvidar que con Ctrl+Z se deshace el último cambio. También es factible que tengan que arrastrar la herramienta un poco más llá del contorno de la selección, pero eso se ve con la práctica.

4.Todavía un poco más. Si se quiere darle un efecto un poco más 3D, recomiendo que le apliquen una sombra a la esfera. Si no estás familiarizado con ellas, recomiendo que veas el Tutorial sobre Sombras, que explica como aplicarlas...

Ahora para dar un efecto que hay una pared atrás podemos seleccionar una parte de la sombra, que seria donde empieza la pared de esta forma :

Y con esta parte seleccionada vamos a 'Edit->Transform->Perspective' y ponemos las preferencias q muestra la imagen:

Ahora alineamos la parte del texto seleccionado con la otra y listo.

Anillo en 3D

	Abre tu imagen con un fondo similar al que tendra tu pagina. Dibuja una seleccisn circular con la herramienta MARCO (Eliptico) (pulsa la tecla mayzsculas -Shift- para que sea perfectamente redondo). Rellena la seleccisn con el color que quieras, contrae la seleccisn (9) y pulsa en aceptar. Pulsa la tecla Supr para vaciar el centro.
	Selecciona el anillo con la varita magica (en realidad es preferible seleccionar las areas que no ocupan el anillo y luego invertir la seleccisn). Vete a la paleta de canales y crea un nuevo canal. Rellenalo de blanco.
	Sobre la seleccisn, aplica el filtro de desenfoque gaussiano: Filtro/ Desenfocar/ Desenfoque Gaussiano. El radio elegido dara mas o menos profundidad al anillo. Yo utilici un valor de 3. Selecciona el canal RGB y vuelve a la capa donde dibujaste el anillo.
	Aplica unos efectos de iluminacisn: Filtro / Interpretar / Efectos de iluminacisn... Yo utilice estos valores: Tipo de luz: Direccional Intensidad: 35 Lustre: 0 Material: 91 Exposicisn: 0 Ambiente: 8 Canal de textura: Alfa1 Resaltar blanco: Si Altura:13
	Para eliminar el exceso de ruido carga la seleccisn: Seleccisn / Cargar Seleccisn... en canal selecciona el Alfa1. Contrae la seleccisn en 2 pixel, inviertela y dale a la tecla Supr.

Todos sabemos que DeviantArt es un sitio de recursos inagotables para todo lo relacionado con imágenes, en donde artistas de diferentes ramas comparten sus trabajos y herramientas.

Ya hemos visto de que se tratan las acciones en Photoshop, por lo que he creado este recopilatorio con las que a mi criterio, son las mejores y mas útiles que encontramos en este sitio:

1º. Skin Smoothing. Esta acción es una de las mas útiles que encontré. Básicamente sirve para dejar un cutis perfecto. Con tan solo activarla, nos pedirá que utilizemos el pincel de historia para pasar por sobre la zona que deseamos corregir. Así de simple. El antes y el después, aquí:

2º. Tears Action. Como bien lo indica su nombre, con esta acción podemos crear lágrimas en un simple paso. Si bien hay pinceles de este estilo, no está de mas esta opción mas editable a nuestro gusto, al hecho de poder dibujar nuestra propia lágrima. El antes y el después, aqui:

Actualización: En reemplazo a esta acción que se encuentra caída, pueden ver este simple tutorial. (en inglés).

4º. Old Photo. No se si me cierra del todo la idea de "foto vieja". Pero si debo reconocer que le da un aspecto distinto y atractivo. El antes y el después, aqui:

5º. Nitor II. Si lo que buscás es darle un aspecto soft y angelical a las fotos, nada mejor que esta acción. Los colores claros se funden dando un mistisismo a la foto. El antes y el después, aqui:

6º. X3 -Vol1-. Esta acción trae consigo 12 efectos, algunos de ellos muy vistosos y que pueden llegar a servirnos en mas de una ocasión. Desde cajas de software hasta esferas y fuegos de artificio. Aquí un ejemplo:

7º. Ray´s Wood -Vol 2-. Si lo que estas buscando es una textura de madera, nada mejor que esta acción para realizarla por tu cuenta. Contás con 4 tipos de madera en distintos tonos. Aquí las muestras:

8º. Glass n Plastic Spheres. Siempre vienen bien estas cositas… no se me ocurre ahora algo específico pero creo que se logra un buen resultado con esta acción para el día que necesitemos una esfera. Aquí los 8 tipos de esferas que crea:

9º. My First Actions. De esta acción digamos que por ser la primera, está mas que bien. Se le pueden dar tonos alucinantes y delicados a fotografías de paisajes. En total son cinco. Aquí el antes y el después con uno de ellos:

10º. Special FX Enhanced -Vol 9-. 12 efectos a un click. Nieve, lluvia, niebla y cámaras de seguridad entre otros. Muy bueno. El antes y el después aquí:

Efectos de animación

Necesitamos un gráfico con un fondo cualquiera y varias capas en las que figuran los textos o gráficos del efecto. La idea es ir haciendo cada vez mas transparente las capas superiores, para dejar ver las que están mas abajo. Para ello, es necesario ver la ventana de capas (Ventana/ Mostrar Capas), e ir desplazando la regleta que marca la opacidad de la capa superior. Los gráficos muestran los distintos estados de transparencia que yo utilice para mi botón. Las opacidades van de 20 en 20. Es evidente que cuantas mas tomas intermedias se hagan, mas perfecta sera la imagen en la animación, pero cambien aumentara el tamaño del fichero. Después solo necesitas una herramienta que te monte los fotogramas en un gif animado. Yo utilizo MicroSoft Gif Animator. Principalmente porque es de libre distribución y se puede descargar desde su web. Otro producto muy famosos y fácil de conseguir es el 'Gif Construction Set'. El resultado final puedes verlo aqui mismo: