práctica digida 2 herramienta photoshop selector

Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada

Lic. Mario Quiroz

1

Prá cticá dirigidá 2: Corte con herrámientá selector Objetivo: Utilizar el programa Adobe Photoshop para el diseño de una página web Tema: Uso de la Herramienta Sector y Menú Archivo> Exportar para Web & Dispositivos

1. Luego de ingresar al programa Adobe Photoshop ir al menú principal: Abrir: 01_portal.psd

2. Con la herramienta selector trazamos un rectángulo sobre el primer sección de botones

Logo

Bandera

Botones

Botones

Pantalla de

contenido

Foter

Botones


Lic. Mario Quiroz

2

3. Cambiamos de herramienta seleccionar sector damos doble clic sobre el recuadro, aparecerá un cuadro de dialogo en donde indicará las coordenadas X:47 e Y: 129 con un Ancho: 135 px y Alto 23 px y le da Ok.

4. Seguidamente con el botón derecho del Mouse sobre el sector se abrirá un menú emergente, elija la opción: Dividir sector, en donde

indicará en: Dividir verticalmente en: 3 sectores a lo largo

5. El resultado será que el sector seleccionado se ha convertido en 3 secciones independientes y proporcionalmente separado.

Menú principal 6. Vamos al menú principal de la web, seleccionamos la herramienta Sector (C) y trazamos un rectángulo sobre el menú principal de la web

e indicamos los siguientes coordenadas: X: 213 e Y: 129, en Ancho: 408 y Alto: 33 recordar que todos son unidades en pixeles. Observe el resultado


Lic. Mario Quiroz

3

El menú lateral 7. Con respecto al menú lateral, realizamos el mismo procedimiento del paso (2 al 5), trazamos un sector sobre el menú lateral, con la

herramienta Sector (C) y con la herramienta seleccionar sector le damos doble clic, aparecerá el cuadro de dialogo en donde indicaremos su ubicación mediante las coordenadas X e Y y el Ancho y el Alto de sector.

8. Posteriormente botón derecho sobre el sector aparecerá un menú emergente y seleccione: Dividir sector…

9. En el panel de Dividir sector en la opción de Dividir horizontalmente indicamos 5 sectores hacia abajo, espaciado uniforme, le damos Ok

y revise el resultado.


Lic. Mario Quiroz

4

Sectores independientes

10. Vamos a la sección del Foter o Pie de página, de la pantalla y procedemos a trazar un rectángulo con la herramienta selector y con la

herramienta seleccionar sector procedemos a indicar las coordenadas y su dimensiones como se aprecia en la figura.

11. De igual manera vamos al menú emergente del selector e indicamos una división vertical de 3 sectores

12. Manualmente con la herramienta seleccionar sector manipulan cada columna dividida de acuerdo a la función que va ha cumplir

13. Para el botón de Audio on/off


Lic. Mario Quiroz

5

14. Para el crédito de la página @2013 UTP o similares,

15. En línea de la bandera de la pantalla web: Logo SOLUTIONS, trazamos un sector, precisaremos su ubicación y dimensión dándole doble

clic sobre el sector construido.

16. Y la bandera principal de la pantalla


Lic. Mario Quiroz

6

Enlaces web 17. Para realizar los enlaces web debemos usar la herramienta seleccionar sector comenzaremos con la sector del “Logo SOLUTIONS”

le damos doble clic sobre el sector y realizamos los siguientes cambios:

Función Sector

(nombre por defecto del Photoshop)

Ancho Alto Vinculo Destino Tipo de fondo de sector

Enlace: Logo SOLUTIONS 01_portal_1_01 187 px 129 px portal.html _blank ce0000

Llenar los siguientes datos en la tabla de Opciones de selector

18. Seleccionar el icono de la casita, con herramienta seleccionar sector darle doble clip

19. Repita el procedimiento con los dos iconos (búsqueda y privacidad)

Función Sector (nombre por defecto del

Photoshop)

Ancho Alto Vínculo Destino Tipo de fondo de sector(color)

Botón: Búsqueda 01_portal_1_05 45 32 busqueda.html (sin

acento) _blank 5f6460

Botón: Privacidad 01_portal_1_06 45 32 privacidad.html _blank 5f6460


Lic. Mario Quiroz

7

20. Continuamos con el menú horizontal, primero dividiremos el sector. Botón derecho sobre el sector.

21. E indicamos el número de divisiones verticales es de 5

22. Seleccionamos herramienta seleccionar sector damos doble clic el sector EMPRESA y llenamos los siguientes campos

Función Sector


Nuevo nombre

X Y Ancho Alto Vínculo Destino Tipo de fondo de

sector

Botón : Empresa

01_portal_1_08 portal 213 129 71 32 portal.html _blank 5f6460

Botón : Servicios

01_portal_1_09 servicios 284 129 83 32 servicios.html _blank 5f6460

Botón : Búsqueda

01_portal_1_10 búsqueda 367 129 82 32 busqueda.html _blank 5f6460

Botón: Estadísticas

01_portal_1_11 estadísticas 448 129 101 32 estadisticas.html _blank 5f6460

Botón: Correo

01_portal_1_12 correo 549 129 72 32 contactenos.html _blank 5f6460


Lic. Mario Quiroz

8

Nota: Seguimos también con los botones: servicios, búsqueda, estadísticas, correo, tener en cuenta que en los vínculos o direcciones web no usar acentos ni espaciados entre las letras o números.

23. En el menú lateral, con la herramienta seleccionar sector darle doble clip, sobre el botón “Acerca de nosotros” y en la cuadro de diálogo

de OPCIONES DE SECTOR ir a Tipo de sector seleccionar SIN IMAGEN

24. E insertar el siguiente código en el campo TEXTO DE LA CELDA (COPIARLO DEL PDF)

<a href="portal.html" target="_blank" class="menu">Acerca de nosotros</a>


Lic. Mario Quiroz

9

25. Seleccionar Tipo de fondo del selector y con el gotero capturar el color de fondo del botón.

26. Ahora seguimos con el botón: Soluciones” doble clip con la herramienta Seleccionar sector y en Opciones de sector cambia el Tipo de

selector a SIN IMAGEN

27. Y copiar (DEL PDF) el siguiente código, en el TEXTO DE LA CELDA:

<a href="servicios.html" class="menu">Soluciones</a>

28. Ahora capturemos el color de fondo de botón con el gotero en TIPO DE FONDO DEL SECTOR, Color de fondo

Y darle OK, OK.


Lic. Mario Quiroz

10

Seguimos con el botón “Productos”

29. Copiamos el código del pdf y lo pegamos en el TEXTO DE LA CELDA:

<a href="busqueda.html">Productos</a>

30. Y capturamos el color de fondo.

Y le damos Ok, Ok. 31. Seguimos con el botón “Clientes”


Lic. Mario Quiroz

11

32. Copiar el texto (del pdf) y pegarlos en el panel de TEXTO DE LA CELDA y captura el color de fondo con el gotero

<a href="estadisticas.html">Clientes</a>

33. Seguimos con el botón “Contáctenos”, doble clip sobre el botón (con la herramienta Seleccionar selector), aparecerá el cuadro de dialogo

OPCIONES DE SECTOR, cambiar el TIPO DE SECTOR: SIN IMAGEN e insertar el texto (copiarlo del pdf)

<a href="contactenos.html">Contáctenos</a>

34. Y capturar el color de fondo, con el gotero de COLOR DE FONDO, Y DARLE OK, OK

35. Después de esto ir a Archivo> Guardar para la web. Una pantalla con el nombre Guardar para la web aparecerá.


Lic. Mario Quiroz

12

36. Seleccione el sector del logotipo y elegir el formato GIF desde el menú desplegable.

37. Ahora seleccione el sector bandera y la barra horizontal de botones y seleccione JPEG al máximo de los menús desplegables.

Consejo: Recuerde que las fotografías siempre se debe exportar como JPEG y colores sólidos pueden ser exportados en formatos GIF colores

de adaptación 256.

38. Ahora lo que queremos es una comparación visual de los resultados finales en la web. Si nos fijamos en la parte superior de la ventana, verás unas pestañas con los nombres: Original, optimizado, 2 copias, 4 copias. Se tiene que usar la opción de 2 copias.

Botones en jpg


Lic. Mario Quiroz

13

39. El siguiente paso sería la de revisar el tamaño de la imagen a un tamaño utilizable para la web. En el lado derecho, hacia el fondo, verás una sección llamada Tamaño de la imagen. El ejemplo de la derecha muestra el tamaño de la imagen está al 100%.

40. Es importante mantener las proporciones correctas antes de cambiar el tamaño. Al lado de la caja de tamaño de la imagen es una imagen

pequeña de un eslabón de la cadena (que se indica en la imagen a la derecha). Si ve dos líneas onduladas en su lugar, haga clic en él hasta que vea un eslabón de la cadena. El eslabón de la cadena significa que las proporciones de la imagen se mantienen a medida que cambia el tamaño. Esto evitará la distorsión. Tenga en cuenta que también puede cambiar el tamaño a través de porcentaje.

41. Ahora vamos a exportarlo a la Web, asumiendo que has hecho todos los ajustes que necesite. Vaya a Archivo> Guardar para Web / Dispositivos. Es hacia el final del menú desplegable. Este proceso no cambia el archivo original en absoluto. Recuerde que creando un nuevo archivo. Una vez finalizado este proceso, Photoshop volverá a la imagen original.


Lic. Mario Quiroz

14

42. Una pantalla con el nombre: Guardado optimizada como, aparecerá. Y llenar la siguiente lista 1. Nombre: portal.html, 2. Formato: HTML e imágenes, 3. Ajustes: Otro

4. Sectores: Todos los sectores

43. En la opción de Ajustes de salida, cambiar en el menú desplegable de HTLM a Sectores

44. En sectores seleccionar la opción Generar CSS, de referencia lo dejamos en ID y le damos Ok


Lic. Mario Quiroz

15

45. Guarde la página web en la carpeta de sitio web solutions(si no existe la carpeta crea una con ese nombre). Ahora haga clic en Guardar. Verifique que las página en html y la carpeta imágenes se han guardado en la carpeta del sitio web solutions.

Trabajo 2

46. Abra el archivo servicios.psd y con la herramienta sector y dividir las siguientes sectores: logos, botones bandera y exportarlo a Html Función web Sector


Nueva división Ancho Alto Vínculo

1. Logo SOLUTIONS 01_portal_1_01 logotipo 187 129 portal.html

2. Bandera bandera 513 129 No tiene

3. Botón: Casita 01_portal_1_04 casita 38 32 portal.html

4. Botón: Búsqueda 01_portal_1_05 búsqueda_1 45 32 busqueda.html

5. Botón: Privacidad 01_portal_1_06 privacidad 50 32 privacidad.html

6. Botón : Empresa 01_portal_1_08 empresa 71 32 portal.html

7. Botón : Servicios 01_portal_1_09 servicios 83 32 servicios.html

8. Botón : Búsqueda 01_portal_1_10 busqueda_2 81 32 busqueda.html

9. Botón: Estadísticas 01_portal_1_11 estadísticas 101 32 estadisticas.html

10. Botón: Correo 01_portal_1_12 correo 72 32 contactenos.html

11. Botón: Acerca de nosotros 12. Botón: Soluciones 13. Botón: Productos 14. Botón: Clientes 15. Botón: Contáctenos

01_portal_1_19 01_portal_1_20 01_portal_1_21 01_portal_1_22 01_portal_1_23

nosotros soluciones productos

clientes contáctenos

186 18 portal.html servicios.html

busqueda.html estadisticas.html contactenos.html

16. Botón Audio 01_portal_1_28 audio 513 29 No tiene

17. pantalla de contenido 01_portal_1_17 pantalla 457 402 No tiene

práctica digida 2 herramienta photoshop selector

Design