CLASE-TUTORIAL
Mock-Up en Photoshop
Autora: Camila Vilches
Contacto: cv31416@[Link]
Contenidos
1. Abrir un archivo
2. Espacio de trabajo Photoshop y bandeja de
herramientas
3. Tamaños de Imagen
4. Colocar elementos incrustados
5. Borrador mágico (fondos)
5. Transformación libre
6. Variaciones en color
7. Guardar como (psd, jpeg, pdf).
1. Abrir un archivo
Esa es la pantalla de bienvenida del software. Para Luego de hacer cilck en este botón, se abrirá una ventana
comenzar, tenemos la opción de crear un archivo esde de diálogo en donde deberemos buscar y seleccionar el
cero, o de abrir un archivo existente. En este caso, archivo que usaremos de base. En este caso, el producto
trabajaremos a partir de un archivo de imagen existente. en blanco que necesitamos intervenir para la propuesta.
Para esto, se debe presionar el botón ”Abrir...” en el lado
izquierdo de la pantalla.
2. Espacio de Trabajo
Photoshop y bandeja
de herramientas
Una vez abierto el archivo que usaremos de base, ya podemos 3. “Historia”: Permite volver atrás en la edición y visualizar
observar el espacio de trabajo del Software. Este se divide cambios
en 4 secciones.
4: “Muestras”: Permite escoger colores
La más relevante es la sección de al medio, la cual nos
nuestra cómo va quedando el archivo intervenido. El resto 5. “Capas”: Permite visualizar, editar, rasterizar, mover y
de segmentos (horizontal arriba, vertical izquierdo y vertical seleccionar las capas de trabajo que queramos.
derecho) corresponden a menús de herramientas y filtros del
software. Lo que se destaca en color rojo corresponden a: Es importante asegurarnos de activar estas opciones desde
la pestaña “Ventana”. No todos los Softwares vienen con la
1. Barra de herramientas: Aquí usaremos más adelante misma previsualización de dichas herramientas, por lo que
herramienta Selección Rectangular, Bote de Pintura y tener hay que tener especial ojo en que puede ser que no
Borrador Mágico. En el lado inferior aparece las muestras todas las herramientas se vean de igual forma en como se
de colores activadas. ven en el ejemplo visto más abajo.
2. Pestaña “Ventana”: Aquí se despliegan todas las Una vez que tenemos activadas estas herramientas, podemos
opciones de herramientas disponibles para activar o seguir con los siguientes pasos.
desactivar en el espacio de trabajo. Desde aquí debemos
asegurarnos de tener activadas las siguientes:
1 3 5
4
3. Tamanos de imagen
Lo siguiente a verificar en nuestro archivo base es el tamaño Una vez que abrimos esta opción, se despliega un cuadro de
de imagen. Para verificar esto, debemos ir a la pestaña diálogo con una serie de datos. Para este caso, prestaremos
superior “Imagen”, desde la cual se desplegarán una seria especial atención en la “Resolución”. Se recomienda que el
de opciones. Hacer click en la opción que dice “Tamaño de valor ingresado en esta opcion esté entre 75 y 120 (resolución
Imagen”, tal y como muestra la siguiente imagen pequeña: apta para pantallas).
Si la imagen es muy pequeña, se recomienda cambiar
los valor superiores de “anchura” o “altura”. De forma
automática, Photoshop reconoce estos cambios como
proporcionales, por lo que no hace falta variar ambos, sino
sólo uno. De otra forma, se puede también variar el tamaño
del archivo variando la resolución.
Para termina la edición del tamaño de imagen, simplemente
hacer click en “OK”. Es posible modificar el tamaño de imagen
cuantas veces se requiera, sin embargo es importante saber
que, una vez que el tamaño se disminuye (tanto en resolución
como en altura/anchura) esta perderá información (calidad).
Sólo los cambios de más a menos mantienen la visualización
óptima de la imagen, pero los cambios de menos a más la
modifican.
4. Colocar elementos
inscrustados
Para poder agregar un logo y ajustarlo al producto, lo que Una vez que seleccionamos dicha opción, aparece un cuadro
se debe hacer es ir a la pestaña “Archivo”, y seleccionar la de diálogo pequeño, en donde deberemos seleccionar el
opción “Colocar archivo inscrustado...”. Para estos casos no archivo que queremos inscrustar. Una vez seleccionado, le
es necesario trabajar con elementos enlazados, y así nos damos click al botón “Colocar”:
ahorramos la posibilidad de perder el archivo de origen:
Si el logo viene en pdf, se abrirá un nuevo cuadro de jpeg, no aparecerá ningún cuadro de diálogo, y podremos
diálogo. En este deberemos seleccionar la opción “Cuadro visualizar la imagen del logo directamente, de la siguiente
delimitador” que aparecerá en la esquina superior derecha forma:
y le damos al boton “Ok” o “Aceptar”. Si el logo viene en
Es posible variar el tamaño de forma proporcional izquierdo del mouse presionado y “estirándolo” hasta
de dicha imagen al hacer click en cualquier de dejarlo del tamaño deseado. Para terminar de editar
las esquinas de la imagen, manteniendo el botón tamaño, simplemente apretar tecla “Enter” del teclado.
5. Borrador magico (fondos)
En el caso de que nuestro logo viniera con un fondo herramientas, y seleccionaremos el “Borrador
blanco (muy probable para logos en formato jpeg), lo mágico”. Esta herramienta borra todas las àreas
primero que debes hacer es rasterizar la capa. Esto del color sobre el cual hagamos click, por lo que
se hace haciendo click derecho sobre el nombre de la deberemos cliquear todas las partes de fondo que
capa, y seleccionado la opción “rasterizar capa”. queramos eliminar, teniendo especial cuidado con
Luego, vamos al menú vertical izquierdo de los interiores de letras y figuras.
6. Transformacion libre
Para poder lograr el efecto de perspectiva en el logo la tecla Ctrl del teclado, a la vez que acercamos
incrustado, es necesario activar la Transformacion Libre. el puntero del mouse a una de las esquinas con
Para ello, debemos asegurarnos que nuestra capa de logo cuadrado blanco. Sin soltar la tecla Ctrl, hacemos click
esté seleccionada. sobre una de las esquinas y la movemos libremente.
Una vez asegurada la capa seleccionada, presionamos en Luego, dejar de presionar la tecla Ctrl, y repetir el
el teclado Ctrl+t. Con esto se activará la transformación proceso con las demás esquinas. Para salir del modo de
tal y como ocurrió cuando recién instrustamos la imagen. transformación libre, basta con presionar la tecla Enter
Para poder transformar de forma independiente cada del teclado. Este proceso se puede hacer cuantas veces
vértice de la imagen, basta con mantener presionada sea necesario.
7. Variaciones en color
Una vez que situamos el logo y le damos perspectiva, Luego de escoger el color deseado, volvemos al panel de
podemos también indagar en pruebas de color. Para esto, trabajo, y manteniendo el boton Ctrl presionado, hacemos
es necesario crear una nueva capa, en donde aplicaremos click sobre el cuadrado correspondiente a la capa del
el logo del color a gusto, haciendo click en el botón que logo (como se indica abajo en rojo). Es importante que
simula una hoja de papel, ubicado en la esquina inferior dicho click sea en ese cuadrado y no en otro lado, sino
izquierda del panel de capas: la selección no funcionará. Podemos darnos cuenta que
vamos bien pues, al tener presionado el botón ctrl y
acercarlo a dicho cuadrado, aparecerá una mano pequeña.
Una vez presionado este botón, observemos que se ha
creado un nuevo Layer (Capa) en el panel de capas. Es
necesario que esta capa esté siempre seleccionada
para que toda edición se realice sobre esta y no sobre la
imagen del logo o la de fondo. Esto se ve, pues la capa
seleccionada siempre está de color más claro que el resto:
De esta manera se activa una selección con
la forma del logo, pero en nuestra nueva
capa. Posteriormente, seleccionamos la 1
herramienta Bote de Pintura (3), o también
sirve herramienta pincel (2), ambas ubicadas
en el menú vertical izquierdo, y hacemos
click en la imagen y sobre un punto
perteneciente al logo.
2
Posteriormente, seleccionamos el color con el cual
deseamos hacer la variación. Esto lo seleccioaremos
desde el panel de “Muestras”, representado por un
cuadrado compuesto por cuadrados pequeños. De esto se
3
despliega un menú de colores, sobre el cual simplemente
hacemos click sobre el color deseado:
De esta forma, la selección se rellena con el color Para salir de la selección, hacemos click en herramienta
escogido, creando así una nueva capa de alternativa. selección rectangular (1), y posteriormente click sobre la
Podemos crear cuantas capas y posibilidades queramos imagen.
simplemente repitiendo todo el proceso.
8. Guardar (psd, jpeg, pdf)
Para poder guardar el archivo, en el formato que sea,
debemos siempre ir a la misma opción: “Guardar cómo”.
Esta opción se ubica en la pestaña “Archivo” en la
esquina superior izquierda. Abrimos el cuadro de diálogo
para guardar el archivo simplemente haciendo click en
esta pestaña, y luego en la opción “Guardar cómo...”. Lo
primero que se recomienda es guardar el archivo en su
formato nativo, es decir, formato Photoshop ó “psd”.
Esto permite tener la fuente de origen de imágenes y
las respectivas capas alternativas, sin perder el trabajo
acumulado.
Una vez que escogemos esta opción aparece el cuadro
de diálogo que se muestra a la derecha, en el que
simplemente clickearemos “Ok”.
Para la opción de formato “jpeg”, debemos asegurarnos
que la calidad de la imagen sea sobre 7 (para impresión),
pudiendo ser menor si el peso así lo requiere. Luego click
en “Ok”.
Y para “Pdf” se recomienda tener activa sólamente la
opción “Optimizar para previsualización rápida en Web”,
con el fin de guardar menos información, alivianando el
peso total del archivo.