Upload
mario-rafael
View
131
Download
2
Embed Size (px)
Citation preview
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
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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
(nombre por defecto del Photoshop)
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
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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>
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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”
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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á.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
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
(nombre por defecto del Photoshop)
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