Source: https://fr.scribd.com/document/223892931/Adobe-Photoshop-Cs6-Orientado-a-Web-Unidad-1
Timestamp: 2020-08-04 02:52:20+00:00

Document:
Conceptos Básicos de Diseño Web con Photoshop: Objetivos de la Unidad | Píxel | Color
Conceptos Básicos de Diseño Web con Photoshop: Objetivos de la Unidad
enregistrerEnregistrer Adobe Photoshop Cs6 Orientado a Web Unidad 1 pour plus tard
Introduccion Photoshop 1002
Originales Digitales.pdf
ITGE_150a.pdf
ADOBE® PHOTOSHOP® CS6 Orientado a Diseño Web
a) Identificar los diferentes formatos para diseño web y
diferenciar las caracteristicas inherentes de cada uno.
b) Reconocer
profundidad de color y su utilidad para el diseño web .
c) Digitalizar de una forma eficiente una imagen tomando
en cuenta el uso futuro de esta en el diseño web.
d) Utilizar
filtros inteligentes y máscaras a objetos inteligentes
Adobe Photoshop Orientado a Web es un curso que le ayudara a diseñar un sitio Web, desde el punto de vista estético de una forma profesional, y de aspecto moderno, utilizando los marcos teóricos de marketing y identidad corporativa; durante el proceso de aprendizaje de este curso explotara el potencial de este excelente programa en el ámbito del Diseño Web estético.
La Primera Impresión En la web, la primera impresión es vital. Los usuarios nunca confiarán de un sitio web que tiene una imagen descuidada o anticuada, especialmente si se trata de un sitio web comercial que vende productos o servicios.
Un sitio Web además es el rostro en el ciber espacio de la empresa, la imagen de este comunica una percepcion para quien no la conoce. Puede tener unas instalaciones fisicas adecuadas, o un servicio al cliente impecable, pero si la imagen en la web no representa eso es casi seguro que el usuario descartará su opción.
Identidad Corporativa Es preponderante sobre todo en sitios web empresariales que el diseño de este permanezca en armonia con la identidad de marca que este representa. Por lo que el sitio web no debera diferir del contenido significativo del logo de la empresa, y del modelo de imagen que la empresa ofrece en general por otros medios, impresos, publicidad, o en sus instalaciones físicas.
En el diseño web, la imagen corporativa es un factor de base, debido a esto si ya se dispone de un logo para la empresa a la que se diseña el sitio web, este debera respetar la informacion grafica y contenido significativo del logotipo de dicha empresa, caso contario habra que definir primeramente el logo de la empresa y su identidad corporativa.
FORMATOS DE IMAGEN PARA USO WEB
En general los trabajos para representacion web se realizan con imágenes rasterizadas, estas imágenes estan hechas de miles de pixeles. Un pixel es un punto minúsculo, la unidad más pequeña de medida de una pantalla. El número de pixeles que se puede visualizar en una pantalla se denomina resolución de pantalla. La resolución de pantalla es igual a un número de pixeles a lo ancho por un número de pixeles a lo largo. Cuanto más pixeles hay en una pantalla o imagen, mejor se ven los detalles o resolución de la imagen.
Algunas resoluciones de monitores son: 640×480, 800×600, 1024×768, 1600×1200, en ningún caso podrá visualizar una imagen a mayor resolución que la de pantalla, que suele ser de 72 ppp. El numero de pixeles es solo una parte de los elementos que determinan la calidad de un raster, otra parte importante es la cantidad de colores que soporta, esto se mide por el numero de bits que se utilizan para almacenar la información de color en cada pixel, esta característica también recibe el nombre de profundidad de color.
Color indexado Para las profundidades de color inferiores o iguales a 8, los valores de los pixeles hacen referencia a tonos RGB indexados en una tabla, llamada habitualmente mapa de colores o paleta. A continuación se presentan algunas profundidades de color en la gama baja, así como la cantidad de tonos que pueden representar en cada pixel y el nombre que se le otorga a las imágenes o framebuffers que los soportan.
• 1 bit por píxel
• 2 bits por píxel
• 4 bits por píxel
• 8 bits por píxel
2 colores, también llamado Monocromo
4 colores, o CGA
16 colores, mínima profundidad aceptada por el estándar VGA.
256 colores, también llamado Súper VGA
Color directo Cuando los valores de la profundidad de colores aumentan, se torna impráctico mantener una tabla o mapa de colores, debido al aumento exponencial de la cantidad de valores que el pixel puede tomar. En estos casos se prefiere codificar dentro de cada pixel los tres valores de intensidad luminosa que definen un color cualquiera en el modelo de color RGB.
Color de alta resolución o Hi Color Los valores de profundidad de color de 15 y 16 bits por pixel son llamados habitualmente color de alta resolución o Hi Color y contienen miles de colores
• En la profundidad de 15 bpp (bit por pixel) se utilizan 5 bits para codificar la intensidad del rojo, 5 para el verde y los otros 5 para el azul. Con una profundidad de 15 bpp es posible representar 32x32x32 = 32,768 colores en cada pixel.
• En la profundidad de 16 bpp se utilizan 5 bits para codificar la intensidad del rojo, 6 para el verde y los otros 5 para el azul. La razón de esto es que el ojo humano es más sensible al color verde, ya que puede percibir más tonalidades con diferente grado de intensidad verde. Con la profundidad de 16 bpp es posible representar 32x64x32 = 65,536 colores en cada pixel.
Color verdadero Para la profundidad de color de 24 bits por pixel, se habla de color verdadero debido a que la policromía se acerca a lo que el ojo humano puede encontrar en el mundo real, y a que este se torna incapaz de diferenciar, entre un tono y otro si la diferencia se mantiene en un cierto rango mínimo. En la profundidad de color de 24 bits por pixel, se dedica un octeto entero a representar la intensidad luminosa de cada uno de los tres tonos primarios de rojo, verde y azul, lo cual permite que cada pixel pueda tomar 256x256x256 = 16.777,216 colores distintos por pixel.
Cuando se utilizan 32 bits para representar un color se agrega al esquema de 256 valores para cada tono primario un cuarto canal denominado alfa que representa la transparencia. Este valor se utiliza cuando se deben superponer dos o más imágenes.
Una de las mayores limitantes de las imágenes rasterizadas es la proporción Calidad/Peso, ya que entre mejor calidad, mayor peso, y eso en diseño web es una variable muy importante, a tener en cuenta a la hora de diseñar la estética de un sitio web, porque entre más peso en Kbps tenga las imágenes que lo componen, más lenta será la carga de la interfaz en el navegador web, debido a esto existen una variada gama de extensiones para rasters, las más usadas para el diseño web, debido a su relación Peso/Calidad son GIF, JPG, y PNG.
GIF Es un formato sin pérdida de calidad para imágenes con hasta 256 colores, limitados por una paleta restringida a este número de colores. Por ese motivo, con imágenes con más de 256 colores, (profundidad de color mayor a 8 bpp) la imagen debe adaptarse reduciendo sus colores, produciendo la consecuente pérdida de calidad.
Una imagen GIF puede contener entre 2 y 256 colores, ademas que preserva la transparencia, y permite visualizar animaciones simples, es usado generalmente para la publicidad de tipo banners. Su principal difusión hoy en día sigue siendo para mostrar imágenes animadas para páginas web, al ser el único formato soportado por multitud de navegadores que permita dicho efecto. En la actualidad las imágenes de formato GIF son muy usadas en software de chat como es el caso del popular Messenger.
JPG Este formato lo creó The Joint Photographers Experts Group. Es uno de los formatos más conocidos para la compresión de fotografías digitales, todas las cámaras digitales y escáneres almacenan las imágenes en formato JPEG, no obstante y dado que la compresión de este formato afecta a la calidad de imagen, se puede escoger diferentes niveles de compresión: a más baja compresión mayor calidad; a más alta compresión menor calidad. El formato JPEG admite los modos de color CMYK, RGB y Escala de grises pero no admite canales alfa (No preserva la transparencia), a diferencia del formato GIF, JPEG retiene toda la información de color de una imagen RGB pero comprime el tamaño del archivo descartando datos selectivamente, es el único formato de archivo, que puede llegar a comprimir una imagen hasta sólo un 10% de su tamaño original, sin que el ojo humano pueda percibir diferencias, antes y después del proceso de compresión.
PNG Siglas en inglés de Portable Network Graphics, es un formato grafico basado en un algoritmo de comprensión sin perdida para imágenes rasterizadas no sujeto a patentes. Fue desarrollado principalmente parte para solventar las deficiencias del formato GIF ya que permite almacenar imágenes con una mayor profundidad de color y otros importantes datos, se utiliza para una compresión sin pérdidas. A diferencia del formato GIF, PNG admite imágenes de 24 bits y produce transparencia de fondo sin bordes irregulares. Esto es algo que consigue por medio del "canal alpha", que permite definir el grado de transparencia u opacidad de un color. Sin embargo, algunos navegadores Web no admiten imágenes PNG, o no las soportan del todo bien. El formato PNG admite también imágenes RGB, en 8 bit, de color indexado; conserva la transparencia en imágenes en escala de grises y RGB, lo que resulta extremadamente útil.
El fotosensor, generalmente de tipo CCD, es el componente fundamental de un escáner, ya que de él depende en gran parte la resolución que puede alcanzar la imagen digitalizada.
En general la resolucion que se puede optener por un escaner, se ve condicionada por:
• Tipo de sensor CCD y alineación del mismo
• Interpolación
• Sistema Óptico (longitud de foco, profundidad de campo, estabilidad, humedad, etc.)
• Escala de resolución
• Respuesta de frecuencia de los circuitos electrónicos
Resolucion Optica o Real Es el número de puntos individuales de una imagen, que es capaz de captar el CCD. Es la resolución más importante, ya que define los límites físicos del escáner, y se expresa dando los puntos horizontales y los puntos verticales que hay en una pulgada lineal, por ejemplo, un escáner con una resolución de 400 x 600 dpi es capaz de captar 400 puntos individuales en una línea horizontal de una pulgada y 600 puntos individuales en una línea vertical de una pulgada.
Resolucion Interpolada Es una resolución artificial, que crea el software del escáner o del ordenador que procesa la imagen interpolando puntos entre los puntos captados en la resolución real. Estos nuevos puntos deben sus características a los puntos reales que tengan al lado, la interpolación es el método por el que se calculan más puntos de muestra, de acuerdo con un algoritmo del software adecuado, para compensar las limitaciones de la resolución óptica. Por lo tanto, si la resolución óptica es de 1000 dpi, la interpolación sólo se utilizará si son necesarias resoluciones mayores que este valor.
La interpolación es especialmente útil en aquellos casos en que se necesita aumentar las dimensiones de una imagen sin que sufra pérdidas considerables de calidad. Si la imagen se aumenta sin interpolación, el mismo números de puntos se tendrán que situar en un área dos veces mayor, dando a la imagen una calidad granulada inconsistente.
En estos casos, la imagen se escaneará a la mayor resolución óptica posible, y el programa de tratamiento de imágenes interpolará la imagen capturada a la resolución necesaria. El resultado final dependerá de la resolución óptica o real.
Resolucion de escaneado Resolución configurable, definida por el usuario. Puede ir desde un mínimo de 75 dpi hasta el máximo que pueda alcanzar el escáner con la definición interpolada.
Existe una relación directa entre la resolución de la imagen y su número de colores con la calidad de la imagen y con el tamaño del fichero de imagen resultante del proceso de escaneado, a mayor resolución y mayor número de colores, mayor peso tendrá el fichero resultante. Cuando pasa una imagen digitalizada a un programa de edición, como Photoshop, si la resolución de escaneado usada ha sido alta la imagen tendrá unas dimensiones elevadas, produciendo un fichero de mucho peso en Kbts; debido a esto es conveniente adaptar la imagen a la resolución del medio en el que se va a usar, para imágenes destinadas a la web la resolución admitida esta entre 72 ppp y 96 ppp (en estos casos se pueden considerar la equivalencia entre dpi y ppp).
Resolucion de escaneado La escala de resolución determina cuánta información real se captura sin interpolación en la imagen resultante, siendo determinada por el escáner automáticamente, sin intervención del usuario.
De acuerdo con la teoría del muestreado digital, el escáner, si no quiere perder calidad en el proceso de digitalización, tiene que trabajar a un escala dos veces superior a la periodicidad máxima de la imagen que está siendo muestreada, dicho de otro modo si escanea una imagen de 200 LPI (recordemos que la resolución de imágenes impresas se mide en Líneas Por Pulgada), la escala de muestra tiene que ser de al menos 400 dpi.
La escala de muestra del escáner se determina por el número de elementos fotosensibles en una franja del sensor y por la distancia a que se mueve la cabeza lectora por la imagen en un tiempo de exposición determinado. Una escala de resolución típica sería de 300 x 600 dpi, por lo que, si en una franja de 5000 CCDs se escanea una anchura de 8,5 pulgadas, la escala de resolución será 5000/8,5 = 600 dpi, mientras que para escanear una imagen de 4,25 pulgadas de anchura, la escala de muestra sería de 1200 dpi.
Escalado Se entiende por escalado el proceso de aumentar o reducir el tamaño relativo de una imagen de manera que la altura y la anchura continúen teniendo la misma proporción.
Cuando se aumenta el tamaño de una imagen, la interpolación añade más detalles para compensar las pérdidas en resolución por el aumento, en caso contrario, la información no necesaria se elimina para mantener la resolución aparente. Debido a esto es preferible escanear a mucha resolución y reducir luego el tamaño hasta las dimensiones necesarias que escanearla a menor resolución y aumentar luego su tamaño aplicando interpolación, la interpolación se produce tanto cuando se disminuye como cuando se aumenta el tamaño de una imagen.
Resoluciones recomendadas En el momento de digitalizar un objeto con un escáner debe elegir la resolución a que va a realizarse el proceso. Este es un valor muy importante, ya que según el medio en el que se utilizara la imagen necesitara más o menos resolución, producto de esto el fichero gráfico que resultante tendrá más o menos tamaño. Una de las misiones principales como diseñador sera determinar la relación calidad/peso más conveniente.
En general, la resolución de captura debe ser el doble de la resolución del dispositivo de salida, ya que de esta forma puede imprimirla o visualizarla en pantalla a tamaño real, e incluso aumentarla un poco, sin pérdidas de calidad, si la resolución de captura es menor y aumenta el tamaño de la imagen digitalizada (al fin y al cabo, un mapa de bits), perderá calidad y aparecerán bordes dentados.
Por lo tanto, si la imagen digitalizada está destinada a ser impresa en un dispositivo que trabaja a 300 dpi, la resolución de escaneo debe ser de 600 dpi. En cambio, si la imagen está destinada a ser visualizada en pantalla, como las usadas en las páginas web, no necesita más de 96 dpi (72 dpi en caso de un MAC), por lo que si la ha escaneado con mayor resolución, al preparar la imagen conviene bajar la misma a 96 (72) ppp.
Los objetos inteligentes son capas que contienen datos de imagen procedentes de imágenes rasterizadas o vectoriales como, por ejemplo, archivos de Photoshop o Illustrator. Los objetos inteligentes conservan el contenido original de la imagen con todas sus características originales, de tal modo que posibilitan la edición no destructiva de la capa en cuestión.
Los objetos inteligentes se pueden crear con varios métodos: usando el comando Abrir como objeto inteligente, mediante la colocación de un archivo, al pegar datos de Illustrator o convirtiendo una o varias capas de Photoshop en objeto inteligente.
Utilidad de los Objetos Inteligentes en Photoshop:
• Realizar transformaciones no destructivas. Esta caracteristica le permite cambiar la escala de una capa, rotarla o deformarla sin perder la calidad ni los datos de imagen originales porque las transformaciones no afectan a los datos originales. No obstante, algunas opciones de transformación como Perspectiva y Distorsionar no se hallan disponibles.
• Trabajar con datos vectoriales (por ejemplo, ilustraciones vectoriales de Illustrator) que, de otro modo, se tendrían que rasterizar en Photoshop.
• Aplicar filtros no destructivos. Los filtros aplicados a los objetos inteligentes se pueden editar siempre que se quiera.
• Editar desde el programa nativo del objeto inteligente (Ilustrador o Photoshop) y visualizar de forma automatica los datos enlazados.
• Aplicar una máscara de capa que contenga, o no, un enlace a la capa de objeto inteligente.
• Probar los distintos diseños con imágenes de marcador de posición con baja resolución, que más tarde sustituirá por las versiones finales.
No es posible realizar operaciones que alteren los datos de los píxeles (pintar, sobreexponer, subexponer o clonar, entre otras) directamente en una capa de objetos inteligentes a menos que se convierta primero en una capa normal que, por lo tanto, ha de someterse a rasterización. Si desea efectuar ese tipo de operaciones, edite el contenido del objeto inteligente, clone una capa nueva por encima de la capa de objetos inteligentes, edite duplicados del objeto inteligente o cree otra capa.
Nota: Al transformar un objeto inteligente con un filtro inteligente aplicado, Photoshop desactiva los efectos de filtro mientras la transformación esté en curso. En cuanto ésta termine, se vuelven a aplicar los efectos de filtro.
Capa normal y objeto
inteligente en el panel
Capas. El icono de la
de la miniatura indica que
se trata de un objeto
• Elija Archivo > Abrir como objeto inteligente, seleccione un archivo y haga clic en Abrir.
• Elija Archivo > Colocar para importar archivos como objetos inteligentes a un documento de Photoshop abierto.
• Elija Capa > Objetos inteligentes > Convertir en objeto inteligente, para convertir la capa seleccionada en un objeto inteligente.
• Pegue las ilustraciones de Ilustrador en un documento de Photoshop y seleccione Objeto inteligente en el cuadro de diálogo Pegar.
• Para aplicar un filtro inteligente a toda la capa de objetos inteligentes, seleccione ésta en el panel Capas.
• Para limitar los efectos del filtro inteligente a una zona concreta de la capa de objetos inteligentes, realice la selección necesaria.
• Para aplicar un filtro inteligente a una capa normal, seleccione ésta, elija Filtro > Convertir para filtros inteligentes y haga clic en OK.
• Seleccione un filtro en el menú Filtro. Puede seleccionar cualquier filtro, incluidos los de otros fabricantes siempre que admitan filtros inteligentes, excepto Extraer, Licuar, Creador de Motivos y Punto de fuga.
• Defina las opciones del filtro y haga clic en OK.
Nota: Si aplica un filtro o más sirviéndose de Galería de filtros, todos ellos aparecen en el panel Capas como un grupo denominado “Galería de filtros”. Para editar un filtro individual, haga doble clic en la entrada de Galería de filtros.
Nota: Al editar un filtro inteligente, no puede pre visualizar los filtros apilados por encima de él. Photoshop vuelve a mostrarlos cuando termine de editar el filtro inteligente.
Edición de los ajustes un filtro inteligente
• Haga doble clic en el filtro inteligente en el panel Capas
• Haga doble clic en el icono de edición de opciones de fusión que figura junto al filtro en el panel Capas
• Defina las opciones fusión y haga clic en OK.
Ocultar filtros inteligentes
• Para ocultar un único filtro inteligente, haga clic en el icono de ojo que aparece junto a él en el panel Capas. Para mostrar el filtro inteligente, vuelva a hacer clic.
• Para ocultar todos los filtros inteligentes aplicados a una capa de objetos inteligentes, haga clic en el icono de ojo que aparece junto a la línea Filtros inteligentes en el panel Capas. Para mostrar los filtros inteligentes, vuelva a hacer clic.
Reorganizar filtros inteligentes
En el panel Capas, arrastre el filtro inteligente que le interese hacia arriba o hacia abajo por la lista. (Haga doble clic en Galería de filtros para reorganizar los filtros de la galería). Photoshop comienza la aplicación de filtros inteligentes desde el último en sentido ascendente.
Duplicar filtros inteligentes
Nota: Para duplicar todos los filtros inteligentes, pulse Alt (Windows) u Opción (Mac OS) y arrastre el icono Filtros inteligentes que aparece junto a la capa de objetos inteligentes.
Eliminar filtros inteligentes
Para eliminar un único filtro inteligente, arrástrelo hasta el icono Eliminar de la parte inferior del panel Capas. Para eliminar todos los filtros inteligentes aplicados a una capa de objetos inteligentes, seleccione dicha capa y elija Capa > Filtro inteligente > Borrar filtros inteligentes.
Use máscaras de filtro para enmascarar sólo los filtros inteligentes que desee. Si se enmascaran los filtros inteligentes, la máscara se aplica a todos ellos, no se puede hacer de forma individual.
Utilice los controles del panel Máscaras para modificar la densidad de las máscaras de filtro, añadir efectos de desvanecimiento a sus bordes o invertirlas.
Nota: De forma predeterminada, las máscaras de capa están enlazadas a las capas normales o a las capas de objetos inteligentes. Al mover la máscara de capa o la capa con la herramienta Mover, se mueven juntas como una unidad.
• Haga clic en la miniatura de la máscara de filtro del panel Capas para activarla, aparecerá un borde alrededor de la miniatura de la mascara.
• Seleccione cualquiera de las herramientas de edición o pintura.
Para ocultar ciertas partes del filtro, pinte la máscara de negro. Para mostrar ciertas partes del filtro, pinte la máscara de blanco. Para hacer visible en parte el filtro, pinte la máscara de gris.
• Haga clic en la miniatura de máscara de filtro o seleccione la capa de objeto inteligente en el panel Capas y, a continuación, haga clic en el botón Máscara de filtro en el panel Máscaras.
• En el panel Máscaras, arrastre el regulador Densidad para ajustar la opacidad de la máscara y el regulador Desvanecer para aplicar este efecto a sus bordes.
Eliminar máscara de filtro inteligente
• Haga clic en la miniatura de la máscara de filtro del panel Capas y, luego, haga clic en el icono Eliminar del panel Máscaras.
• Arrastre la miniatura de la máscara de filtro del panel Capas al icono Eliminar.
• Seleccione el efecto de filtro inteligente y elija Capa > Filtros inteligentes > Eliminar máscara de filtro.
Añadir máscara de filtro
Aunque elimine una máscara de filtro, puede añadir otra si le interesa.
• Para añadir una máscara vacía, seleccione la capa de objetos inteligentes y haga clic en el botón Máscara de filtro del panel Máscaras.
• Para añadir una máscara basada en una selección, realice la selección pertinente, haga clic con el botón derecho del ratón (Windows) o pulse Control y haga clic (Mac OS) en la línea Filtros inteligentes del panel Capas y elija Añadir máscara de filtro.
Documents similaires à Adobe Photoshop Cs6 Orientado a Web Unidad 1
alienihg234
chiopilar
Rayén Fusco Fígoli
CUADERNO DE PRÁCTICAS PHOTOSHOP
PAMELA LUGO RODRIGUEZ
Creación de Menús de Servicio Dolphin
mod 4 Modos de color.pdf
Datos digitales y datos analógicos.docx
FOTOGRAFIA EN LA INSPECCION VISUAL
Reparar fuentes conmutadas de TV
adaltato0204
Plus de Jose Mauricio Espino
Rotulacion de Caja Liquidacioncajas
Constancia Electronica de Estar Sujeto al Régimen de Pagos a Cuenta (1).pdf
CURRICULUM VITAE edgar baquedano.docx
Ensayo ElPositivismo.doc
Ce Materiales Jose 222
cartadepermisoaldirector-110313082240-phpapp01
ccnncued
Precalculo Gloria Montano Mm-110 PDF Por Waro
Trabajo de Sociologia Sobre La Famila
Tecno 2 Final Apuntes
Cómo Pasar Planos a Jpg
Introduccion Corel Draw x5
Pegado Especial Jes2
Impresora Canon Pixma Mg 3210
Canon Smart LF Ci40 (Scanner Gran Formato)
Manual HP 3515
Catalogo de Yosan Definitivo
ALQUILER IR-3045-3035- CONSULSA SA.docx
preprensa-1

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución

 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 Resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución