Guin Tutorial

1. En este tutorial veremos edicin y

generacin

de

imgenes

de

contenido secundario.
2. Si no cuentas con la carpeta de
recursos grficos ingresa a la pgina.
3. Da click para descargar la carpeta.
4. Da click para abrir la carpeta
descargada.
5. A continuacin abre la carpeta
componente Psd especializado.
6. Ingresa a la carpeta 04 imagen C
Secundaria.
7. En este tutorial vamos a utilizar el
programa photoshop si no cuentas
con el podrs utilizar cualquier editor
de imagen.
A

continuacin

abre

el

archivo

abierto

el

archivo

correspondiente.
8.

Una

asegrate

vez
de

tener

abiertos

los

siguientes paneles. Las medidas de

tu imagen son: 131px x 131px .

9. La edicin de este archivo solo

consiste en reemplazar el elemento
fotogrfico de modo que ya debes
contar con los elementos necesarios
para editar las imgenes de acuerdo
a tu sitio.
10. A manera de ejemplo en este
tutorial vamos a utilizar esta imagen,
las dimensiones de esta imagen son
88px x 88px. Da clic derecho sobre el
archivo para abrir con Photoshop

11. Una vez abierto el archivo en el

editor de imgenes debes tener
seleccionada la capa y la herramienta
de seleccin.
12. Con ayuda del cursor encuadre la
imagen que utilizar para su sitio.
Aparecer una lnea punteada lo que
indica es que esta seleccionada tu
imagen.

13. Una vez aqu, presiona ctrl + v en

Windows o cmd + v en mac para
pegar el elemento.
Asegrate
opcin

de

que

est

activada

transformacin

herramienta mover.

en

la
la

14. Ajusta el tamao de la imagen

presionando shift evitando que se
distorsione y adecalo al tamao de
la imagen de este archivo ocupando
todo el espacio.
15. Una vez que hayas hecho el
ajuste podemos darnos cuenta de
que a pesar de que se modific el
tamao

sigue

siendo

de

buena

calidad porque las dimensiones son

aproximadas al tamao que debe
tener la imagen. Por contrario si la
imagen fuera demasiado pequea al
tratar de adaptarla al tamao de este
archivo el elemento se distorsionara
y perdera calidad. Es por esto que
debes cuidar que las imgenes que
utilices tengan dimensiones similares
a las de este archivo.
16. Cuando consideres que tu imagen
esta lista para contribuir tu sitio clic en
file o archivo y a continuacin
guardar para web

17. En esta ventana selecciona el

formato jpg con calidad del 100%
cuando est lista da click en guardar.

18. En esta ventana, asigna el

nombre de tu archivo y la ubicacin
donde lo guardars.

19. Vamos ahora a hacer un ejemplo

con una imagen de dimensiones
50px x 50px.
20. Abre tu imagen con photoshop o
con tu editor de imagen.
21. Debes tener seleccionadas la
capa y la herramienta de seleccin.
Aparecer una lnea punteada lo que
indica es que esta seleccionada tu
imagen. Presiona ctrl + c en Windows
o cmd +c en mac para copiar la
imagen, y a continuacin regresa al
archivo de imagen C secundaria.

22. Nuevamente, presiona ctrl + v en
Windows o cmd + v en mac para
pegar el elemento. Y verifica que est
activada la opcin de transformacin
en la herramienta mover.

23. Ajusta la imagen al tamao

presionando shift y evitando que se
distorsione. Asegrate que ocupe el
espacio del archivo. Debes procurar
utilizar imgenes aproximadas a las
dimensiones del archivo que son
131px por 131px, ya que al utilizar
elementos considerablemente ms
pequeos como en este caso, la
imagen final pierde calidad y se
distorsiona.
24. Nuevamente hacemos un ejemplo
con una imagen de dimensiones de
800px x 500px.
25. Abre tu archivo con tu editor de
imagen.

26. Asegrate de tener seleccionada

la capa y la herramienta de seleccin.
Aparecer una lnea punteada lo que
indica que est seleccionada tu
imagen.

Con

ayuda

del

cursor

enmarca la imagen que usars para

tu sitio. Para copiar presiona cmd+c
para mac y ctrl+c para Windows.
27.

Ve

al

archivo

imagen

secundaria y y presiona ctrl + v en

Windows o cmd + v en mac para
pegar el elemento.

28. Ajusta la imagen al tamao

presionando shift y evitando que se
distorsione. Asegrate que ocupe el
espacio del archivo.
29. Una vez lista tu imagen da click
en archivo o file, guardar para web.

30. Te aparecer la siguiente ventana

selecciona el formato jpg con calidad
del 100%. Cuando est lista da click
en guardar.
31. En esta ventana, asigna el
nombre de tu archivo y la ubicacin
donde lo guardars.
Verificando en la carpeta podrs
encontrar que tu archivo est listo
para contribuir en tu sitio.

Con estos tres ejemplos nos damos

cuenta
imgenes

que

podemos
con

utilizar

dimensiones

aproximadas o incluso ms grandes.

Debes asegurarte de tener cuidado
con las dimensiones y la calidad de
las imgenes que manejas. Una vez
de que te asegures de que tu imagen
cumple con las dimensiones y es de
buena calidad puedes guardarlas.