Tutorial de Inicio con PhotoShop

En este Tutorial van a aprender lo básico para iniciarse en PhotoShop. Aprenderán a:

1. -Conocer el Entorno de PhotoShop.

2. -Crear Nuevo Documento con especificaciones propias.
3. -Abrir una imagen.
4. -Mover y Arrastrar imágenes.
5. -Crear una Capa Texto y modificarla.
6. -Aplicar un Estilo de Capa
7. -Guardar un documento.
8. -Crear un Banner Web

1- Empecemos abriendo el programa desde el “Menú Inicio” o desde nuestro acceso directo en
el escritorio.
Ventana de inicio de PhotoShop

<<Barra de herramientas Elementos acoplados>>

Ventana de Color,
Muestras y Estilos>>

Ventana de Capas,
Canales y Trazados>>

Al iniciar PhotoShop no encontramos con la Barra de Herramientas a la Izquierda encabezada

por el logo “Ps“. En la parte superior se encuentra la barra de menú, esto es un estándar de
todos los programas, al igual que la barra de titulo y los botones minimizar, maximizar y cerrar.
Por ultimo, a la derecha nos encontramos con las ventanas acopladas de PhotoShop.
-Hay que aclarar que la barra de herramientas también es una ventana, y que todas estas
ventanas se pueden cambiar de lugar, minimizar y cerrar.
-Si cerramos una ventana y queremos volver a visualizarla, solo debemos dirigirnos a la barra
de menú, menú ventana y clic en la ventana que queremos abrir.

2- Pasemos ahora a crear un documento nuevo… para ello nos dirigimos con el Mouse al
menú Archivo, damos clic para desplegar el menú y nuevamente clic en la opción Nuevo. Esto
abrirá la ventana para crear un nuevo documento.
Todos saben usar los menúes de Windows así que esto se abreviara con “Menú
Archivo>Nuevo”. También se puede acceder a esta ventana presionando las teclas Ctrl+N.
Ventana “Nuevo Documento” de PhotoShop

Es aquí donde se especifica lo más importante del documento, las medidas, la resolución y el
modo de color.
-Para empezar el Nombre pude ser el que figura por defecto “Sin titulo-1” porque luego, al
guardar el documento, podemos especificarlo de nuevo. Incluso si van a crear un documento
que va a ser la base de muchos documentos con las mismas especificaciones (misma
resolución, medidas o modo de color), no importa con que nombre creen el nuevo documento,
lo que importa es como guardan ese nuevo documento.
-Predefinir nos da la opción de seleccionar especificaciones por defecto. Por ejemplo, la
opción “Portapapeles” toma la configuración de resolución de nuestro monitor para crear un
documento (esto es ideal para crear capturas de pantalla), la opción “Papel Internacional”
habilita la opción “Tamaño” para seleccionar tamaños estándar de papel como A4, también hay
una opción de “Dispositivos y Móviles” con los tamaños estándar de las pantallas de Celulares,
mp4, etc. En cualquier caso podemos especificar nosotros las medidas de ancho, alto,
resolución etc, lo que cambiará el nombre de la opción predefinida a “A medida”. Esto no
significa que las opciones predefinidas desaparezcan o se modifiquen.
-Ancho y Alto, yo recomiendo colocar el ancho y el alto del documento en centímetros, a
menos que sepamos cuantos píxeles necesitamos. Para ello damos clic en el desplegable que
dice píxeles y seleccionamos cm.
-Ponemos 35 cm de ancho por 7,5 cm de alto. Para crear un banner, por ejemplo. En
píxeles serian unos 1000x200.
-La Resolución es muy importante, y recomiendo que se acostumbren a usar la opción
“píxeles/pulgada” y no la otra “píxeles/cm” porque “píxeles/pulgada” es el estándar para
impresiones y monitores. De hecho DPI (dot per inch) significa eso, píxeles por pulgada, o
puntos por pulgada cuadrada (PPP).y para que entiendan mejor les paso un cuadrito.

Resolución Peso Nombre Usada para:

72 ppp bajo Baja Web,
resolución Televisión
150 ppp medio Media Impresiones
resolución A4,
fotografías
300 ppp alto Alta Impresiones
resolución en alta
resolución.

-Como vamos a crear un banner para nuestra Web, seleccionamos la resolución 72

píxeles/pulgada, poner una mas alta no le dará mas calidad a nuestro banner, solo lo hará
mas pesado, y tendrá un peso innecesario ya que todos los monitores y televisores no
muestran una calidad mayor a 72 píxeles por pulgada cuadrada, o sea que si le ponemos
150ppp será inútil porque siempre que se muestre en un televisor o monitor, tendrá una
resolución de 72ppp.
-Ahora seleccionamos el Modo de Color, RGB (red, green, blue) es el predeterminado de
PhotoShop, y es el mas utilizado para el retoque fotográfico por estar conformado por los
colores Luz.
CMYK (cian, magenta, amarillo, negro) son los colores pigmento, tintas y demás, se utiliza para
imprimir un trabajo terminado, pero podemos especificar que queremos un documento con el
modo de color CMYK justamente para trabajar solo con los colores CMYK, y no encontrarnos
con sorpresas a la hora de imprimir o cambiar el modo de color. Recomiendo que siempre
utilicen el modo de color RGB para poder trabajar sin límites con todos los filtros de PhotoShop,
-Si seleccionamos el modo CMYK algunos filtros y colores no estarán disponibles para
“trabajar” con nuestro banner, así que seleccionamos aquí el modo de color RGB.
-Contenido del Fondo, aquí pueden elegir el color de fondo con el cual quieren empezar a
trabajar. Yo siempre selecciono el blanco, también están las opciones transparente (para que el
documento tenga el fondo transparente) y color de fondo (que toma el color de fondo que
hayas seleccionado anteriormente en la ventana de color o en la ventana de muestras de color.
Sin embargo una vez creado el documento podemos rellenar el fondo con otro color como el
negro por ejemplo.
No es necesario cambiar las opciones avanzadas, a menos que conozcan algo de imagen
digital, gestión de color, etc.
-Damos clic en OK y ya tenemos nuestro documento creado con las siguientes propiedades: 35
cm de ancho por 7,5 cm de alto, resolución 72 píxeles/pulgada, modo de color RGB.
Si nos fijamos en la ventana inferior derecha, la ventana capas, vemos que se ha creado una
capa automáticamente y esta seleccionada (con una coloración celeste) Esta capa es la Capa
Fondo, esta bloqueada (con el candado) y también esta visible (el ojo). Para desbloquearla
dan doble clic en su nombre y OK, pero no es necesario para el banner que vamos a realizar.

3- Lo que si quiero que hagan es abrir una de las fotos que tengan y quieran incluir en su
banner.
Para ello vamos al Menú Archivo>Abrir, o presionamos Ctrl+O, se abrirá la ventana abrir de
Windows, para que ubiquen su documento de imagen, PhotoShop abre todos los formatos de
imagen que conozco así que no creo que haya problema aquí.
Ventana Abrir de PhotoShop

Una vez seleccionada la imagen damos clic en abrir. Esto abrirá la imagen de forma
maximizada lo que significa que nuestro banner blanco no esta visible.
Para arreglar las cosas podemos “restaurar” la imagen dando clic en la esquina superior
derecha restaurar, o clic en el Menú Ventana>Organizar>Cascada.
Ahora todas las ventanas son visibles. Recomiendo la ultima opción para que no tengan que
restaurar y maximizar cada imagen que abren.
Yo abrí un fondo abstracto como notaran.
4- Lo siguiente es poner mi fondo abstracto en mi banner. Vamos a hacerlo
Ubiquémonos en la barra de herramientas, a la izquierda, y seleccionamos la primera de ellas,
la Herramienta Mover (también podemos presionar la letra V para seleccionarla). Ya
seleccionada, nos ubicamos en la imagen que queremos mover, damos clic, y lo mantenemos
mientras arrastramos hasta nuestro banner en blanco.

Una ves hecho esto podemos cerrar nuestra imagen (en mi caso mi fondo abstracto), ya que
en nuestro banner se ha creado una nueva capa con la imagen que arrastramos.
Para trabajar mas cómodos podemos maximizar la ventana de nuestro banner, ya que no
necesitamos incluir otra imagen, yo prefiero trabajar en modo ventana.
Con la herramienta mover pueden mover la Capa 1 donde mas les guste, y si se dirigen al
Menú Edición>Transformación Libre, podrán achicar o agrandar la imagen que incluyeron,
no se recomienda agrandar una imagen porque pierde calidad (se píxela), pero pueden
distorsionarla a su gusto.

5- Solo resta incluir algún logotipo o Texto que identifique a nuestro sitio Web. Para ello
podemos abrir un logotipo que hayamos creado anteriormente y arrastrarlo a nuestro banner, o
podemos incluir texto con alguna fuente que nos guste. Hagamos esto último, dirigiéndonos a
la barra de herramientas, específicamente a la tercera sección de herramientas, y damos clic
en la Herramienta de Texto.

1-Herramientas de Selección

2-Herramienta de aplicación de color

3-Herramientas de Dibujo y Texto

4-Herramientas de Documento

Color Frontal y De Fondo

Mascara Rápida
Modo de Pantalla
Al seleccionar la herramienta de texto, la parte superior cambia para poder especificar los
valores de la herramienta que estamos utilizando. En este caso podemos elegir la fuente del
texto, el estilo, el tamaño, la alineación, el color etc.
Si necesitamos especificar algo más de nuestro texto también podemos abrir la Ventana
“Carácter“, ubicada a la derecha, en la barra de Elementos Acoplados.

Yo seleccione la fuente “Arial Black” que es una fuente que casi todos tienen, tamaño 60
puntos y con un color parecido al color de fondo para luego aplicar un efecto rápido. Pero
pueden elegir los valores que mas les gusten.
Al terminar de colocar los valores que queremos para nuestro texto pasamos a escribirlo, para
esto hacemos clic con la Herramienta de Texto en alguna parte donde queremos que inicie
nuestro texto. No importa si sale corrido o hay partes que no se visualizan, luego podemos
moverlo con la herramienta mover.
Ahora pueden ocultar la ventana carácter, si la desplegaron,
En la ventana Capas, hay una nueva capa, es la Capa de Texto y vamos a aplicarle un estilo
básico y conocido. Una Sombra Paralela.

6- Para aplicar un Estilo de Capa nos dirigimos a la ventana “Capas”. En la parte inferior de la
ventana hay varios iconos, el segundo icono, identificado con un “fx”, abre un menú
desplegable con varias opciones, elegimos la opción Sombra Paralela… esto abrirá una
ventana, la ventana de Estilos de Capa.

fx

Ventana Estilos de Capa de PhotoShop

En esta ventana podemos notar que a la izquierda hay mas estilos de capa, y que podemos
personalizar cada uno con los valores que modifiquemos.
Específicamente en el Estilo de Capa “Sombra Paralela” podemos modificar el color de la
sombra, el ángulo, la opacidad (más transparente u opaca), la distancia, extensión, tamaño,
contorno y ruido. Tilden la opción Previsualizar, a la derecha, para ver los resultados
directamente en nuestra mesa de trabajo. Luego de Jugar un poco con los valores podemos
darle OK, y listo, tenemos aplicada nuestra sombra paralela en nuestro texto.
7- Ahora el último paso de este tutorial, y el más importante, Guardar el trabajo terminado.
Primero hay que decidir ¿que guardar?:
• Porque podemos guardar el documento con el formato “PSD” que es el formato de
capas de PhotoShop, para luego seguir trabajando en él y poder abrirlo y editarlo
muchas veces.
• O podemos dar por terminada la sesión de diseño y guardar solo los resultados con el
formato “JPEG”, o cualquier otro formato. Esto es, claro, comprimir la imagen,
eliminando las capas y eliminando la opción a futuro de modificar alguna capa.
Sea cual sea tu decisión, yo recomiendo que empieces guardando en ambos formatos y luego
cuando tengas mas practica guardes solo los JPEG o el formato final que elijas. Esto porque
los archivos PSD son algo pesados, considerando su funcionalidad, como para llenar nuestro
disco con ellos.
Si eres novato podrás ver los resultados de tu trabajo con “JPEG” y entender como llegaste a
ese resultado con “PSD”. Por eso para ir aprendiendo es bueno tener ambos formatos.
En fin, pasemos a guardar el documento. En la Barra de Menú abrimos el
Menú>Archivo>Guardar Como, se nos abre la ventana Guardar Como de Windows con unas
cuantas modificaciones. Escribimos el Nombre del documento, si vamos a guardar el original
PSD editable y la copia JPEG no editable, es conveniente darles el mismo nombre.
Seleccionamos el Formato, PSD, JPEG, BMP, PNG, TIFF, etcétera. Aparecerá una ventana
mas luego del clic en Guardar, en ella deben elegir la compatibilidad del documento (PSD) o
la calidad final de la imagen (JPEG). Denle el OK y todo queda guardado.
Ventana Guardar Como de PhotoShop

Listo, ya tienen el primer banner creado por sus propias manos, solo resta ponerle
imaginación, aprender algunas cosas mas, y practicar en casa.