Imágenes Las imágenes que se utilizan para trabajar normalmente se encuentran en formato TIFF o alguno de los formatos propios de las aplicaciones (por.

Presentación del tema: "Imágenes Las imágenes que se utilizan para trabajar normalmente se encuentran en formato TIFF o alguno de los formatos propios de las aplicaciones (por."— Transcripción de la presentación:

1 Imágenes Las imágenes que se utilizan para trabajar normalmente se encuentran en formato TIFF o alguno de los formatos propios de las aplicaciones (por ejemplo, PSD, si se trata de Photoshop) Estos formatos son los que garantizan unas imágenes de la más alta calidad sin la perdida de datos. Dos de los formatos más comunes, cada uno de ellos enfocado a un determinado tipo de imagen. GIF – se utiliza para dibujos, no para fotografías. JPEG – por su nivel de compresión, se puede conseguir que una fotografía de miles de colores ocupe tan poco como un gráfico GIF.

2 Comparación GIF fue el primer formato gráfico que se definió para la Web, por lo que es conocido como el formato universal. GIF sólo soporta hasta un máximo de 256 colores, a diferencia de los formatos JPEG y PNG-24 GIF comprime las fotografías de modo menos eficaz que JPEG y PNG. Sin embargo para los logotipos y textos que utilizan una fuente en particular, GIF es el formato ideal. PNG no permite la creación de animaciones, a diferencia de GIF. PNG admite píxeles parcialmente transparentes, a diferencia de GIF, que permite píxeles completamente transparentes o completamente opacos.

3 Comparación Para comprimir un dibujo o un gráfico de colores planos, utilice GIF. Para comprimir una imagen que sólo tiene texto, utilice GIF. En el caso de una imagen, utilice los formatos JPEG o PNG-24, aunque este último dará lugar a un archivo algo mayor a igualdad de calidad. GIF y JPEG están soportados por todos los navegadores, no así el formato PNG.

4 Introducción Photoshop Photoshop es una herramienta utilizada tanto por los diseñadores de Web como de productos impresos, mientras que ImageReady está concebido específicamente para diseños Web.

5 Introducción Photoshop El color de los monitores Los monitores de las computadoras visualizan el color en el modo RGB, donde: R = Red (rojo) G = Green (verde) B = Blue (azul) Cada letra representa un valor comprendido entre 0 y 255, siendo 0 el color más oscuro y 255 el más claro del espectro. En RGB, el blanco y el negro tienen los siguientes valores: Blanco 255, 255, 255 Negro 0, 0, 0 El modo de color RGB es decimal, es decir, está basado en el numero 10

6 Personalizar Photoshop Practicas 1. Cambio de la unidad de medida por omisión a píxeles. >> Seleccione Edicion|Preferencias|Unidades y reglas. A continuación desde el menú de reglas seleccione Píxeles. 2. Personalización del color y estilo de las guías. >> Seleccione Edicion|Preferencias|Generales Presione la flecha del menú desplegable Selector de Color para ver las opciones disponibles. Una vez vistas las opciones, es posible cambiar el selector de color según sea necesario. Para llamar al selector de color después de cambiarlo, presione OK para volver a la ventana principal. A continuación presione sobre una muestra de color en el selector de color frontal o de fondo.

7 Personalizar Photoshop Practicas 3. Utilización de reguladores de colores Web >> Presione sobre el triángulo situado en la esquina superior derecha de la paleta de color. En el menú desplegable que aparece, seleccione Reguladores de colores Web. Para cambiar el espectro y visualizar los colores RGB, presione sobre el triangulo situado en la esquina superior derecha de la paleta de color. En el menú que emerge, seleccione Espectro RGB. A continuación para forzar a que se usen solamente los colores compatibles con la Web, presione una vez más sobre el triangulo de la esquina superior derecha de la paleta de color y seleccione Hacer curva compatible con Web.

8 Personalizar Photoshop Practicas 4. Utilización de muestras de colores compatibles con la Web >> Asegúrese de que la paleta está visible seleccionando Ventana|Muestras. Después presione el triangulo de la esquina superior derecha de la paleta y elija alguna de las paletas compatibles con la Web listada en el menú emergente. Cuando se le requiera, especifique si desea sustituir la biblioteca de muestras actual por la nueva biblioteca o añadir la nueva biblioteca a la biblioteca actual. 5. Creación de bibliotecas propias. >> Puede crear muestras propias, colocando el apuntador sobre un espacio en blanco en la Paleta muestras y presionando el ratón. El apuntador cambiara a un bote de pintura cuando está sobre un espacio en blanco, indicando que es posible “rellenar” dicho espacio con el color frontal actual.

9 Personalizar Photoshop Logotipo a.) Inicie Photoshop y abra la imagen de su logotipo. Si es necesario, ajuste las dimensiones de la imagen a las que necesita para el documento Web. Puede usar el comando Imagen | tamaño de imagen y especificar las dimensiones correctas. Puede ajustar la resolución de la imagen; 72 puntos por pulgada. b.) Convierta la imagen al modo de color RGB ejecutando el comando Imagen | Modo | Color RGB c.) Haga clic en el botón Editar en ImageReady del cuadro de herramientas de photoshop. d.) En ImageReady verá una ventana con cuatro pestañas en la parte superior, correspondiente a cuatro fichas. La ficha Original, que es la predeterminada, muestra la imagen TIFF que acaba de abrir, como se desea crear una imagen comprimida en formato GIF que ocupe menos espacio.

10 Personalizar Photoshop Logotipo d.) Haga clic en la pestaña Optimizada para trabajar directamente en la imagen comprimida. Esta imagen es muy similar a como se vera en el navegador. e.) Seleccione la herramienta Varita Mágica. f.) En la barra de opciones de la herramienta, que aparece en la parte superior, establezca la Tolerancia a 0 y desactive la opción suavizado. Con esta configuración se trata de seleccionar el color plano de fondo, no así ninguno de los píxeles que rodean el texto. g.) Con la varita mágica, hacer clic en cualquier lugar del fondo de la imagen. ImageReady crea una selección compuesta únicamente por los píxeles del fondo. Para añadir los “huecos”, presione la tecla de Mayúsculas y marque todos los huecos.

11 Personalizar Photoshop Logotipo h.) Presione la tecla de Supr o retroceso y verá aparecer en el fondo transparente un patrón en forma de tablero de ajedrez. i.) Seleccione Archivo | Guardar optimizado como, especifique un nombre para el archivo (logo-trans) en el cuadro de edición Nombre, seleccione Sólo imágenes en Tipo y mantenga la opción Ajustes por defecto j.) Haga clic en Guardar para guardar la imagen como un GIF optimizado y con el fondo transparente.