Editar Imágenes

Herramientas:

1-Transformar Escala.
2-Lazo Poligonal.
3-Licuar.
4-Inflar.
5-Turbulencia.
6-Desenfoque Gaussiano.
7-Varita Mágica.
8-Selección.
9-Mover.
10-Enfoque Suavizado.
11-Reconstruir.
12-Molinete a la Derecha.
13-Texto.

Modificar Imágenes

Herramientas:

1-Desinflar.

2-Molinete a la Derecha.

3-Inflar.

4-Empujar a la Izquierda.

Herramientas:

1-Turbulencia.

2-Desinflar.

3-Inflar.

4-Reconstruir

Agregar Imágenes

Herramientas:

-Archivo, nuevo, predefinir (película y video), contenido de fondo (transparente).

Poner Imagen de Fondo:

1-Archivo, abrir, seleccionar  imagen de fondo (paisaje).

2-Click derecho en el titulo de la ventana de la imagen, mover a nueva ventana.

3-Click sostenido en la imagen, arrastras hasta la ventana vacía, y la imagen se ve grande (paisaje).

4-Menú edición, transformar, escala, ponerlo en el tamaño de la hoja de trabajo y doble clic, cerrar la ventana que no utilizamos.

5-En la parte derecha buscar el botón capas, y se ve que una capa está vacía.

Agregar una Imagen:

1-Agregar otra imagen, archivo, abrir, luego seleccionar  imagen de fondo, click derecho en el título de la ventana de imagen, mover a una ventana nueva.

2-Seguir el paso 4 y 5.

3-Ver capas en la parte derecha.

4-Recortar con la herramienta lazo poligonal la imagen.

5-Cortar, selección, invertir, Suprimir, menú selección deseleccionar.

6-Seleccionar por partes, herramienta lazo.

7-Seleccionar capa, hacer clic en la capa que esta de fondo.

8-Dar efecto al fondo: menú filtro, desenfocar, movimiento (ángulo 23, distancia 48 píxeles)

9-Menú imagen, ajustes, tono saturación, seleccionar por defecto, todos, colorear y mover las guías para ver los tonos.

Agregar Otra Imagen:

1-Archivo, abrir, imagen, seleccionar una imagen.

2-Seguir el paso 3, 4 y 5.

3-Cortar una parte de la imagen  con la herramienta circulo.

4-Menú selección, invertir, perfeccionar borde, click en la opción Sobre el negro, acomodar posición donde quiere que este la imagen.

"Mascara Rapida y Bordes"

Herramientas:

1-Marco Rectangular.
2-Invertir Selección.
3-Editar Máscara.
4-Filtro (Distorsionar, Rizo).
5-Editar Máscara (Suprimir). 
6-Filtro (Artístico, Azulejo de Mosaico).

Diseño Digital Fotográfico en Photoshop

Utilidad y Función de Herramientas:

Marco Rectangular: para realizar selecciones cuadradas o rectangulares.

Marco Eliptico: para crear selecciones circulares o elípticas.

Mover: para mover el contenido de la capa en la que estamos trabajando. La capa se mueve por completo o bien sólo el área seleccionada, si es que había una selección creada. 

Pincel Historico: pinta con trazos estilizados que simulan el aspecto de diferentes estilos de pintura utilizando el estado o la instantanea seleccionadas.

Lazo: para hacer selecciones a mano alzada, haciendo clic en un área de la imagen y pintando la selección a mano.

Lazo Poligonal: para hacer selecciones más complejas, marcando los vértices de un polígono.

Varita Mágica: para hacer selecciones rápidas de áreas del mismo color. Pulsando en un lugar de la imagen nos selecciona todo el área que tiene el mismo color continuo. 

Tampon de Clonar: pinta con una muestra de la imagen.

Máscara de Texto: crea una seleccion en forma del texto.

Recortar: Es un tipo de selección cuadrada, editable una vez que se ha definido, que nos sirve para recortar una imagen, quedándonos sólo con el área seleccionada.

Pincel: para dibujar a mano alzada sobre la imagen. Se dispone de varios pinceles, de grosuras y formas distintas y se puede ajustar la dureza del trazo, entre otras cosas. El pincel pinta en la capa que esté activa en ese momento.

Lápiz: realiza un trazo sin suavizado en los bordes y totalmente opaco. 

Parche: repara las imperfeccciones del area seleccionada en una imagen utilizando una muestra o motivo.

 

Borrador: para borrar partes de una imagen.

Bote de Pintura: para rellenar de color una capa entera, o el área seleccionada de la capa. Rellena con el color que se haya seleccionado en la barra de herramientas como color frontal.

Degradado: para hacer degradados de color, funciona como el bote de pintura, rellenando color en toda una capa o en el área seleccionada de una capa, con la diferencia que para hacer el degradado tenemos que hacer una línea, pulsando con el ratón y arrastrando, para que el degradado se haga en ese espacio marcado.

Texto: para escribir texto en una imagen. El texto puede escribirse con distintas fuentes y tamaños y tendrá el color frontal que se haya seleccionado.

Pluma: para hacer trazados de cualquier tipo, curvos o poligonales.

Rectángulo: para hacer rectángulos, que pueden estar o no rellenos de color.

Línea: para dibujar líneas,se les puede colocar una flecha.

Forma Personalizada: permite dibujar un buen grupo de formas ya prediseñadas, como flores, estrellas, señales, globos, etc.

Cuentagotas: podemos seleccionar colores, de cualquier parte de la imagen, para colocarlos como color frontal.

Mano: para mover el lienzo. No mueve ni modifica ninguna parte de la imagen, sino que traslada el área que estamos viendo de la imagen, si es que el lienzo entero no cabe en la ventana que tenemos abierta, ya sea porque la imagen sea muy grande o porque hayamos hecho zoom.

Zoom: para ampliar la imagen o reducirla, pero sin alterar la imagen, para que se vea más grande y podamos hacer retoques con más precisión, o se aleja el zoom para hacer la imagen menor y así poder verla toda en nuestra pantalla.

(CAPAS, SELECCIÓN, EDICIÓN Y COLOR)

(CAPAS, SELECCIÓN, EDICIÓN Y COLOR)

A continuación trabajaremos siguiendo cada paso:

     1.    Ir a, Archivo, nuevo, predefinir (película y video),…., contenido de fondo (transparente), ok, ok.

Luego ponemos imagen de fondo:

     2.    Luego archivo, abrir, seleccionamos la imagen de fondo. (paisaje)

     3.    Luego clic derecho en el titulo de la ventana de la imagen, mover a ventana

     4.    Luego clic sostenido en la imagen arrastrar hasta la ventana vacía, y la imagen se ve grande (paisaje)

     5.    Luego menú edición, transformar, escala,…ponerlo en el tamaño de la hoja de trabajo y doble clic,…       cerramos la ventana que no utilizamos.

     6.    Luego en la parte derecha buscar botón capas, y se ve que una capa esta vacía.

Luego ponemos otra imagen (animal 1):

     7.   Luego traemos otra imagen, archivo, abrir, luego seleccionamos imagen de fondo (animal 1) …, clic  derecho en el titulo de la ventana de margen, mover a una ventana nueva

     8.   Luego… siga el paso 4… (animal 1) y el 5.

     9.   Luego ver capas en la parte derecha…

   10.   Luego recortaremos con la herramienta lazo poligonal la imagen ave.

   11.   Luego de cortar, selección, invertir, luego DEL o Supr,… luego menú selección deseleccionar.

   12.   Luego seleccionamos por partes, herramienta lazo,….

   13.   Luego seleccionamos capa, hacemos clic en la capa que esta de fondo.

   14.   Luego le damos efecto al fondo: menú filtro, desenfocar, movimiento (ángulo 23, distancia 48 {píxeles)

   15.   Luego menú imagen, ajustes, tono saturación, seleccionamos: por defecto, todos, colorear y… movemos           las guías para ver los tonos

Luego ponemos otra imagen (animal 2)

   16.   Archivo, abrir, imagen, seleccionamos una imagen (animal 2)

   17.   Luego… siga el paso 3, 4… (animal 2) y 5

   18.   Luego cortamos la cabeza con la herramienta circulo

   19.  Luego, menú selección, invertir… luego menú selección, perfeccionar borde, clic en la opción sobre el   negro, ok… luego acomode la posición donde quiere que este la imagen.

Colores en la Web

1. Introducción:

Esta es una faceta primordial al definir las líneas maestras de diseñodeunsebsite: va a tener una influencia realmente grande en como lo perciban los usuarios y la sensación que les quede después de la visita.

Por descontado que es un tema subjetivo, ya que cada uno puede aceptar mejor o peor determinadas combinaciones de colores. Sin embargo existen criterios objetivos si se quiere obtener un diseño equilibrado y agradable y, sobre todo, que ni estrese ni canse.

2. Número de colores en página:

Es arriesgado establecer una norma estricta, ya que 6 colores simultáneos en una página pueden ser demasiados si existe un gran contraste entre ellos, pero pueden conformar una combinación agradable si la relación entre los mismos es adecuada..

• Como norma inicial puede asegurarse que siempre es mejor pocos colores mejor que muchos. Como mínimo, el riesgo de estridenciasesmenor.
• Como siguiente norma se puede afirmar que 3 colores en una misma página sería lo mínimo a utilizar y, en la mayoría de casos, debiera ser suficiente. Con menos de 3, las posibilidades de que la página sea anodina y aburrida son muy grande

3. Relación entre colores:

Según su posición relativa en el Círculo Estándar de Color, los colores pueden ser:

• Colores Análogos: Para un color dado, sus colores análogos son aquellos que se encuentran a ambos lados del mismo en el círculo de color.

o    Colores Complementarios: Son aquellos que se encuentran opuestos en el círculo de color (por ejemplo el amarillo y el violeta). Usados juntos producen un gran contraste destacando mucho uno sobre el otro. Su efectopuedeserllamativo y hasta agresivo.

• Colores Monocromáticos: Son aquellos que se encuentran aislados, sin presencia de otros colores. Usados producen sensación de unidad, homogeneidad y robustez. Se puede evitar la monotonía utilizándolos con diferente luminosidad (más claros y más oscuros).

• Colores Complementarios Adyacentes: Dado un color, sus complementarios adyacentes son los colores análogos de su color complementario.
• Colores Triada: Tres olores constituyen una Triada cuando sus tonos son equidistantes en el Círculo Estándar de Color
• Esquema Cromático Monotono: Un esquema de color monotono lo constituyen un único tono de color junto a sus posibles variaciones en términos de tintes, luminosidad y saturación.

o    Esquema Acromático Monotono: Un esquema de color acromático monotono es un caso particular del esquema de color monotonoconstituído sólo por colores neutros dentro de la gama del negro al blanco.

4. El Contraste entre colores:

Buscando una definición intuitiva, podemos simplificar y decir que el contraste entre dos colores, es la diferencia que hay entre ambos. El contraste será mayor cuanto mayores sean las diferencias entre ambos en términos de:

• Tono
• Luminancia
• Crominancia

Cuando se diseña una página web el elegir el contraste entre los colores que vamos a usar es muy importante porque va a influir directamente en la sensación que vamos a transmitir a los visitantes.

En primer lugar será importante que exita un gran contraste entre el testo ordinario y el "background". Sin embargo habrá que tener sumo cuidado en no caer en estridencias que generalmente son tomadas como inmadurez o falta de profesionalidad.

Esta misma recomendación es aplicable cuando elegimos colores para resaltar o separar áreas de contenidos: aquí es menos necdesario y abusar de él puede ser aún más perjudicial.

Si en nuestras páginas utilizamos por ejemplo un marco del área de trabajo gris y queremos utilizar un verde para áreas resaltadas, no es lo mismo elegir la combinación:

En el segundo caso la gran luninosidad de ambos colores, y en especial la del verde, hace que el contraste sea demasido grande y la combinación resulte agresiva.

La Teoría del Color define muchos tipos de contraste y, aunque algunos no son especialmente aplicables a páginas web, es muy interesante conocerlos para profundizar en el conocimiento del efecto de los colores.

4.1 Contraste de Tono: Está relacionado directamente con las distancias entre dos colores dentro del Círculo Estándar de Color descritas en el apartado así, cuanta mayor es la distancia entre dos colores dentro del círculo, mayor es el contraste entre ambos.

Entonces, una pareja de colores complementarios produce el máximo contraste, mientras que para cualquier color el que menor contraste produce con este es su adyacente.

Es interesante el contraste ce tono entre colores fríos y cálidos. Los colores cálidos siempre aparecen al espectador más próximos, mientras que los colores fríos aparecen al espectador más distantes.

En una página web será más conveniente utilizar colores fríos para marcos, tapices o elementos secundarios y colores calientes para menús, iconos o barras de herramientas que queramos que el usuario siempre tenga presente.

Para la relación texto y background normalmente no será suficiente cfontraste de tono ya que no garantizará legibilidad suficiente. Seránecesarioaplicaralgúntipo de contrasteadicional.

4.2 Contraste de Luminancia (o de Valor): Permite crear grandes contrastes con el mismo tono de color sólo mediante el brillo de luz.

4.3 Contraste de Saturación: El contraste de saturación con frecuencia es el más adecuado para resaltar aspectos de la página web de una forma moderada, poco estridente.

4.4 Contraste Simultáneo: Es un efecto creado por nuestro sistema visual que, dado un color predominante, tiende a requerir su color complementario.

4.5 Combinación de contrastes: Es lo más frecuente, sobre todo cuando se trata de resaltar textos.

                        Los colores y el texto:

Como acabamos de comentar usar convenientemente el contraste es especialmente importante cuando se trata de escribir texto y resaltarlo suficientemente para garantizar su legibilidad a la totalidad de nuestros usuarios.

      6.  Ceguera al color:

Hay múltiples tipos de disfunciones en la visualización de los colores, como describimos en nuestra página de los colores. Sin embargo a efectos de accesibilidad sólo necesitamos preocuparnos de los daltónicos, grupo que constituye la inmensa mayoría de los que sufren alteraciones en la percepción del color.