Adobe Dreamweaver - Componentes y descripción

Adobe Dreamweaver

Si bien se podría diseñar una página WEB en código HTML con cualquier editor de texto, existen programas que facilitan la creación y edición de Sitios Web.

Este es el caso de Dreamweaver.

Es un editor de páginas Web, lo que quiere decir que nos asiste en el diseño de una página web en sus distintos aspectos. La ventaja de Dreamweaver es no tener que saber el código como HTML para poder armar nuestro Sitio Web.

Dreamweaver se considera un editor de páginas web tipo WYSIWYG (what you see is what you get = lo que ves es lo que obtienes) para indicar que se nos va mostrando lo que luego se verá en el navegador, tenemos una vista similar a cómo lo verá un visitante a nuestra página, cuando ya esté Publicada.

Se puede diseñar en varios entornos de trabajo: Diseño, Código y Dividir

En el modo Diseño, sólo veremos lo que vamos diseñando, el resultado “visible”.

En el modo Código, veremos las líneas de código fuente que genera el aspecto de la página que podemos ver luego.

En el modo Dividir, se separará la pantalla en dos paneles, veremos el código y el diseño en tiempo real.

Comencemos por lo principal.

La ventana de presentación de Dreamweaver nos mostrará varias opciones para Abrir, o crear desde cero una página Web.

 

 

De las opciones de “Crear Nuevo” elegiremos HTML, que es el lenguaje que usaremos en nuestra página para comenzar.

De las opciones emergentes elegimos “Ninguno” para comenzar con una página en blanco, sin ningún diseño aplicado de antemano.

Componentes de Dreamweaver:

Barra de título: Muestra el programa y el nombre del archivo en el que estamos trabajando.

Barra de Menús: Muestra los menús disponibles para mas opciones.

Barra del Documento: Posee opciones como el guardado y demás que se refieren al documento que está abierto en el momento.

Panel de Objetos: Es el panel de categorías de opciones diferentes según lo que se quiera configurar.

El inspector de propiedades nos irá mostrando las propiedades del elemento o sector que seleccionemos dentro del área de trabajo.

Por ejemplo, si no tenemos nada seleccionado, nos mostrará las propiedades de nuestro documento, el cual por el momento no tiene ningún nombre. Se nos presentará como "Untitled-1" (untitled-2,untitled-3, ...) y consecutivamente si seguimos creando documentos html sin darle nombre aún.

Para comenzar tenemos que aprender a usar las opciones principales, como ser abrir, guardar,guardar como

Al no haber guardado nunca este documento, el botón Guardar de la barra del documento nos mostrará la ventana de diálogo donde indicaremos lugar y nombre de nuestro documento.

Antes de llegar a este punto, necesitamos tener armada una serie de carpetas, o al menos 1 carpeta para designar como la carpeta Raiz de nuestro futuro Sitio Web.

Este paso se puede realizar en el momento, pero dependerá de algunas indicaciones que daré en clase para que todos sigan los mismos pasos y obtengan los resultados deseados.

Dicho esto, volviendo a Dreamweaver podemos indicar el nombre de la primera página a crear, la cual idealmente se llamará "Index" y .html es la extension por defecto al haber seleccionado esa opción en la ventana de bienvenida.

Notamos que el nuevo nombre de nuestro documento aparecerá en la pestaña de Dreamweaver

Ya tenemos el nombre del documento y observando vemos que el Panel Archivos a la derecha ya lo muestra, pero dentro de una carpeta llamada "Sitio Sin nombre"

Esto se debe a que Dreamweaver no maneja los documentos de manera independiente, sino que tiene en cuenta su relación respecto a un directorio de carpetas que define el sitio Web.

Tenemos que definir el sitio Web.

El Menú "Sitio" me servirá para las opciones relacionadas al Conjunto de páginas, a su directorio = Al Sitio Web.

Ingresamos en Nuevo Sitio (también válido Administrar Sitio)

Nos muestra el cuadro para completar el nombre de nuestro sitio. Aquí es donde cada trabajo puede diferir o ser el mismo, dependiendo de la consigna de clase.

Supongamos que al sitio lo llamamos "Evento's"

Debajo tenemos la ruta para ubicar la carpeta que contendrá el sitio completo. Llegado a este punto es obligatorio que se haya armado la estructura de carpetas, o la configuración estará incorrecta de aquí en adelante.

Me tomé la libertad de crear 2 páginas más y 1 carpeta más, observen la imagen:

Las páginas "Contacto" y "Galeria" serán las otras 2 páginas Ejemplo para trabajar con Dreamweaver. Index será la carátula, la página de Inicio o HomePage 

La carpeta imagenes (sin acento) será la que luego contendrá los archivos de imagen (fotos, etc.) que irán en nuestro sitio Web.

Evento's, nuestro sitio web de ejemplo, será una página que promociona organización de eventos, fiestas varias como casamientos, cumpleaños, bautismos, fiestas empresariales, etc.

De modo que las imágenes estarán relacionadas a dicho tema. Como consigna para comenzar, sería útil que consigan al menos 10 imágenes relacionadas a términos como "Salón de Fiestas", "Músicalización", "Cattering"  y frases similares del mismo rubro.

Una vez conseguidas las imágenes, las guardamos en la carpeta Imágenes, o las copiamos ahí si es que las descargamos en otra ubicación primeramente.

Escribir en Dreamweaver:

Ningún secreto, es como escribir en Word o un editor de texto regular. Basta con chequear que estemos trabajando en el modo "diseño" para comenzar a tipear palabras.

De momento pondremos títulos a las 3 páginas que hemos creado:

He escrito la palabra en mayúsculas y luego de seleccionarla, usé el botón "B" para remarcarla en negrita, y de la lista "Párrafo" elegi "Encabezado1"

Hay varias opciones dentro de la configuración de formato en HTML para el texto.

Haré lo mismo con las siguientes páginas:

y...

En cada caso vamos usando el botón Guardar e intercambiando con las solapas entre los documentos que tenemos. Esto no es obligatorio, podemos usar el boton "X" que aparece al lado del nombre del documento en cuestión para cerrarlo, pero deberiamos volverlo a abrir, y para este caso resulta más comodo de la siguiente manera.

CTRL+ TAB para intercambiar entre solapas de documentos.

CTRL+ S para guardar los cambios que vamos haciendo.

El botón Guardar Todo sirve para aplicar cambios en cada documento de cada solapa que esté abierta.

Bien, restaría solamente el material de contenido para nuestro sitio y completar cada página con información, para luego darle formato.

A este proceso le antecede el armar el "Esqueleto" la estructura de cada página, puesto que no podemos simplemente dejar párrafos de texto e imagenes sueltas una debajo de la otra.

Una propiedad MUY IMPORTANTE de una página Web es la ACCESIBILIDAD

Una propiedad MUY IMPORTANTE  de un sitio Web es su INTERCONEXION.

Por lo tanto cada página tiene que cumplir si rol, eso está claro.

Pero cada página tiene que poseer un acceso a otra página, tiene que estar Vinculada a otra página u otra sección de sí misma, u otro contenido que puede mostrar.

Para eso se utilizan los VINCULOS o HIPERVINCULOS.

En la lección siguiente, veremos el prediseño de una página, como maquetar la estructura de la página, cómo diagramar nuestro sitio y cómo aplicar todo esto de manera eficaz.

Espero que les haya gustado.

El codigo HTML

Codigo que en su origen fue meramente descriptivo, con el progresar de sus versiones ha ido incorporando más etiquetas (también eliminando otras) para poder ampliar sus capacidades. De por sí al principio HTML solo describia el texto plano, luego pasó a describir el texto con formato, luego las tablas, luego la adición de imágenes, luego pasó a tener secciones, y la última versión de HTML (5) contiene etiquetas que permiten la inserción de objetos multimedia como ser reproductores de video, de audio, pudiendo reproducirse el contenido sin la intervención de otros lenguajes de programación.


Vamos a referirnos en este curso a la versión de HTML 4.0 , cuyas versiones intermedias pueden ser varias.

Las etiquetas básicas (algunas) incluidas unas pocas de las versiones anteriores de HTML

son las que figuran en la siguiente lista:

APERTURA	ACCION	ATRIBUTOS	CIERRE
<!	Comentario	Ninguno	-->
<body>	Cuerpo del documento	Bgcolor, background, text, link, vlink, alink	</body>
<head>	Encabezado	Base, tittle, nextid, meta	</head>
<br>	Retorno de línea		Ninguno
<p>	Retorno de línea, con un espacio		ninguno
<p align>	Alineación de texto	Left, center, right	</p>
<b>	Texto en negrita		<b>
<div>	Define un bloque de contenidos	Align	</div>
<img>	Contiene una imagen	Align, src, alt width, height, border,	ninguno
<h1>
<table>	Dibuja una tabla	Width, align, border, cellspacing, cellpadding	</table>
<tr>	Fila en una tabla (table row)	Rowspan, width, border	</tr>
<td>	Celda en una tabla (va dentro de <tr>)	Bgcolor, align, valign, height, width
<a>	Vincula a un destino	Href,	</a>
<title>	Titulo de la pagina		</title>

Hay, por supuesto, muchas más etiquetas, pero lo más importante es lo que describiré a continuación:

Descripción de la estructura de HTML

HTML consta de varios componentes vitales, incluyendo elementos y sus atributos, tipos de data, y la declaración de tipo de documento.

Elementos:

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre.

Atributos

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es considerado poco seguro.

Por lo tanto ya tenemos 2 características

Las etiquetas HTML tienen apertura y cierre (dadas ciertas excepciones)

Las etiquetas en su mayoría poseen atributos, los cuales modifican el contenido que se agrega dentro o entre las etiquetas. Un atributo puede ser:

El tamaño de una imagen: Su ancho(width) y su algo (heigth), su fuente, origen o ubicación (src=), sus bordes ("0","1", etc)

Así tambien un texto tiene en sus atributos su formato, color, tipo de letra, tamaño, orden, etc.

Esta lección sólo tratará estos aspectos y directamente les pasaré la página donde pueden encontrar los códigos HTML para representar los colores de cualquier atributo.

COLORES HTML


EL ORDEN en el que agregamos los atributos es en general indistinto, obviamente dadas ciertas excepciones


Como notarán, todas las etiquetas corresponden a palabras o abreviaciones de palabras en inglés

table
img (image)
src (source = origen)
font (fuente - de texto)
body (cuerpo)

etc.

Toda página tiene al menos las siguientes partes en su código

ENCABEZADO
CUERPO

En el encabezado habrá contenido que no necesariamente vaya a ser mostrado en el navegador, no será "visible" por nosotros.

El Cuerpo de la página será la sección que contendrá lo que mayormente SI aparece en la ventana, será "visible"

El encabezado se usa en general para agregar más etiquetas (tags) para funciones como el nombre del documento, alguna descripción para ciertos navegadores, mensajes a mostrarse si el navegador no puede mostrar la página correctamente, versión de HTML usado en la pagina, y código de programación ajeno a HTML para cumplir funciones complementarias como ser comunicar errores,mensajes adicionales hacia el navegador y/o hacia el visitante, etc.

El cuerpo de la página contendra en orden de lectura Arriba a abajo y de Izquierda a derecha, la ubicación de los contenidos, como ser imagenes, tablas, texto, divisiones de secciones por motivos organizativos (u otros que veremos también)
También el cuerpo de la página se dedica para darle propiedades a la página globalmente, cuando se trata de configuraciones en código HTML


Para volver a este tema nos referiremos a la clase en la que describí los conceptos de Internet y el gráfico dibujado en clase.




Esta mini lección es la introducción al código HTML y se interconectará con la siguiente que presentará al programa Dreamweaver.

HTML, y conceptos fundamentales de Internet

Para saber cómo lograr tener una página WEB propia, armada a gusto y ubicada para ser vista por todo el mundo, hay varios pasos. Uno de los más importantes es el de saber COMO llegamos a ver una página web, el concepto cliente-servidor, hosting, algunos tipos de archivos, dominio, etc.

INTERNET

La red de redes. Fue creada en un principio como una red de varias PCs, luego esas máquinas fueron conectadas con otras PC que no estaban en la misma habitacion, o el mismo edificio.

Fue así como una computadora en una ubicacion geográfica, pudo compartir información con otra que estaba ubicada remotamente. Ya desde aquí se tuvo el concepto de LOCAL y REMOTO.

Local es Mi PC, es la máquina que ustedes están usando en sus hogares, en el instituto, etc. También varias PCs pueden armarse en red dentro de un edificio. Esto formaría una red Local.

Remoto, es el dispositivo que no está al alcance de tu PC sin que se tenga que acceder a una red mayor. Esta red es Internet, es la interconexión de equipos que permiten que tu PC use un medio para llegar a otra PC.

De modo práctico, necesitamos un proveedor de Internet, como ser Speedy, Fibertel, Telecentro, etc.

Ese proveedor nos facilita los medios para conectarnos a Internet, que como dijimos, sigue siendo en defintiva una red de equipos como tu PC.

¿Cómo veo una página web y cómo llegué ahí?

Lás páginas WEB están ubicadas, por lo general, en un equipo remoto, el cual es accesible desde casi cualquier lugar en el mundo. 

Ese equipo que me permite ver una página WEB es un SERVIDOR WEB.

Un servidor es tan similar a tu PC como una bicicleta a un camión. La principal diferencia radicará en que un servidor es accesible por cualquier PC que pueda conectarse a él.

El servidor, tal como tu PC tiene un dispositivo de almacenamiento: Un disco rígido (muchos, en realidad) y en ese disco rígido tiene guardados los archivos en carpetas. O sea, tiene espacios divididos y organizados por nombre para  administrar su contenido. 

Todavia se preguntarán Como llego a ver eso que tiene un servidor?

El servidor está compartiendo sus archivos, tiene un sistema operativo adecuado a esa función. Linux, o Windows Server

Por ejemplo: Un servidor tiene una carpeta con el nombre JuanPerez

Dentro de la carpeta Juanperez (así, sin espacios) tendrá más carpetas y archivos.

JuanPerez

--Paginas

--Imagenes

--Sonido

--Video

--complementos

Dentro de la carpeta Paginas (o puede llamarse de cualquier modo) tendrá archivos de un tipo especial que pueden mostrar tanto TEXTO como IMAGENES, SONIDO, y/o VIDEO.

JuanPerez

--Paginas

              -Index.html

              -Galeria.html

Los archivos de tipo HTML (o htm, xhtml, etc.)

tienen estas cualidades, pueden mostrar contenido variado. Por lo tanto son el tipo de archivo que se utiliza en Internet.

En una red de computadoras, uno puede querer buscar una foto que encuentra en la PC de la otra habitación de la casa, o en el otro extremo del aula del instituto.

¿Cómo accedo?

Bien tendría que saber que la PC que quiero acceder tiene un nombre. Por ejemplo PC08

Entonces ya tenemos un nombre para realizar la busqueda

Pero la PC08 posee muchas carpetas, digamos que sólo tenemos disponible el disco D: de la PC08

Entonces podemos entrar a la PC08\D:

Ya ingresamos y vemos muchas carpetas, hay que saber cómo se llama la que contiene la foto "cachorro.jpg"

Supongamos que la carpeta Fotos es donde buscaremos

Entonces en la PC08\D:\Fotos

Vemos muchos archivos y también el que buscamos.

Para verlo, la ruta que hemos seguido y hemos de seguir para volver ahí es 

PC08\D:\Fotos\cachorro.jpg

Esta es una dirección de red

Para hacerlo más exacto: \\PC08\D:\Fotos\cachorro.jpg

las barras invertidas dobles indican acceso a la red, el nombre de la pc y subdirectorios hasta llegar al archivo.

De similar manera, hay una dirección unica para llegar a un archivo, pero esta dirección tiene que estar relacionada a un nombre fijo, de modo que si hay otra pc en el mundo que se llama PC08, nuestra busqueda no sea errónea o de a un destino equivocado.

Si queremos llegar a ver el archivo "Index.html" tenemos que saber en que PC, vamos a reemplazar el termino PC por su función SERVIDOR, y con qué denominador único e irrepetible puedo llegar a ver éste archivo.

Ahora, no es suficiente con saber el servidor y el nombre del archivo, antes tengo que saber qué nombre está relacionado a ese archivo en su ubicación exacta (que puede estar debajo de cientos de carpetas con distintos nombres).

QUE SE HIZO PARA SOLUCIONAR ESTE INCONVENIENTE?

Se implementó un sistema de direcciones llamadas URL (Universal Resource Locator) 

Con este método, una dirección exacta podia ser representada por medio de un protocolo específico.

La URL contiene varias partes, las principales son:

WWW. (no es obligatoria)

DOMINIO

FINALIDAD

UBICACION

Ejemplo:                                         www.automotores.com.ar

Donde automotores es el nombre que no debe repetirse

".com" es la designación para una pagina con finalidad comercial, con fines de lucro.

".ar" es el protocolo para indicar la ubicación u origen de la página. En este caso Argentina.

WWW indica World Wide Web, algo como Red Global.

Esta URL será unica e irrepetible por cualquiera que quiera hacer otra pagina cuyo nombre sea "automotores" y más especificamente "automotores.com.ar"

para establecer un protocolo de comunicación de archivos se usa también

http://

hypertext  transport protocol

http://www.automotores.com.ar

...

Ahora la pregunta es: 

"automotores" es el nombre del archivo que me mostrará la página web????

No

"automotores.com.ar " es el Dominio que está relacionado a una carpeta dentro del servidor. Pueden haber millones de archivos "index.html" y por eso asociamos la ruta a este archivo, dentro de varias carpetas, a un nombre irrepetible.

Por lo tanto, ya se van haciendo una idea de cómo operan los servidores. Un sitio web es en realidad el conjunto de paginas web vinculadas. Y un servidor  permite usar una carpeta con un nombre determinado para que se alojen carpetas y archivos. Por ejemplo, la estructura de carpetas que menciono al principio.

JuanPerez

--Paginas

--Imagenes

--Sonido

--Video

--complementos

estas carpetas y su contenido conformarán el sitio web "PerezProducciones.com.ar"

Dentro de la carpeta Paginas, hay un archivo llamado "Index.html" el cual fue diseñado para mostrar la bienvenida al sitio web, un resumen de lo que se trata el sitio, etc. 

Como es la página que tiene la bienvenida la usaremos como PAGINA PRINCIPAL o HomePage.

Ahora si tenemos el concepto de que al escribir la dirección

"http://www.PerezProducciones.com.ar"

estaremos accediendo en realidad a "http://www.PerezProducciones.com.ar/Index.html"

En algunas páginas esto se muestra tal cual, en la mayoria se muestra el dominio sin la extension del archivo


_________________________________________________________________________________

Alteración de Fotografías y un vistazo final sobre Photoshop (Por ahora...)

En esta última lección sobre Photoshop (al menos dentro del módulo de diseño gráfico "no web") veremos unos detalles para el trabajo sobre fotografías como retratos o fotos destinadas a páginas que requieren una cierta estética o retoque en las fotos que incluirán.

Unos de estos retoques son las nivelaciones de color, las cuales ya vimos anteriormente, esta vez las utilizaremos en varias etapas.

Para el siguiente ejemplo, he ido intercalando el trabajo entre varios ajustes del menú Imagen y una nueva herramienta que también presentaré.

Esta imagen, cuyo nombre de archivo es "pecosa.jpg" es la que usaremos para aplicarle distintos efectos

Como disciplina de prolijidad y también para poder actuar en caso de un error o varios, duplicaremos la capa, por más seguridad hasta 2 veces.

Ustedes verán cómo incluso agregué un nombre para remarcar qué modificaremos en esta imagen

Mi consejo es antes que nada, balancear los niveles, brillo/contraste y leves ajustes en tonalidad. No debemos exagerar con este primer paso, porque podríamos perder detalles de la imagen o "quemarla"

Observamos primero que nada lo "lavada" que está la imagen, los colores son muy pálidos, tanto del pelo como la piel y demás. Esto es un efecto del tipo de cámara usada para tomar la foto, o al momento de pasar la imagen "digitalizarla" se toman pixeles de distintos tonos y se los "empareja" usando el blanqueamiento que vemos para disimular errores en el dispositivo (cámara digital)

También puede ser que la luz que había al momento de tomar la imagen era muy blanca o era un reflejo de luz que dio esta sabana blanca que cubre toda la composición

Sea cual sea el motivo, lo primero será darle más "intensidad", más "viveza" a los tonos. Para ellos usaremos:

Aquí interviene mucho el ojo, para percibir qué tonos están faltando, y cuales ajustes y balances de color pueden ayudar a resaltar más los colores que favorecen a la "modelo" en cuestión. Mi sensación de la imagen era que necesitaba más "color piel" y más tonos cálidos, los cuales son rojo, naranja, amarillo. Restando azul y cian, se logra un efecto levemente de más color en la piel y pelo.

 

Ahora usando las herramientas Subexponer y Sobreexponer modificamos la intensidad de los colores

Una forma útil es la de Subexponer los tonos de pelo rubio muy lavados , de manera que resalte el color amarillo un poco más (no exagerar)

Si sobreexponemos los tonos medios sobre los ojos, el color azul se notará más.

Si subexponemos los labios sus tonos medios se oscureceran, notandose más el color rojo/rosado

Si sobreexponemos las sombras, podemos resaltar cejas, pestañas y remarcar algunas lineas especificas.

Todo siempre con un nivel muy bajo de exposición, regulando y deshaciendo/rehaciendo cuando sea necesario

La esponja por su parte servirá para dar toquees finales y Saturar los colores que logremos rescatar en cada área. La esponja puede o desaturar o saturar unas zonas de la imagen. Se modifica desde las opciones que aparecen en el mismo lugar donde vemos la exposicion de las herramientas sobreexponer y subexponer.

NUEVA HERRAMIENTA! 

El pincel de corrección puntual o corrector puntual nos servirá para trabajar sobre piel en especial. 

Su función se puede regular, pero básicamente lo que hace es tomar un área alrededor del punto central del pincel (luego de seleccionar la herramienta, se entiende) y emparejar el centro con los alrededores.

Como resultado, es una de las dos herramientas más usadas por los especialistas en tratamiento de imágenes para publicidad gráfica.

Cumple varias funciones en un solo paso: un pincel no podria imitar la textura de la piel a la perfeccion para rellenar un granito o un lunar o un piercing (si se desea quitar) y tampoco quedaria estético copiar un área de piel y ponerla en donde deseamos cubrir, no queda un efecto deseado.

Luego verán por qué elegí "curar" la piel en esta etapa y no luego

FILTRO - - DESENFOQUE - -- DESENFOQUE DE SUPERFICIE

Este filtro sirve para dar un efecto de alisado sobre TODA  la composición, y no discrimina entre piel o cabello u ojos. Cuidado con el resultado,

Medir el filtro adecuadamente puede ser la diferencia entre un alisado de piel ideal o convertir una modelo en un manequi sin expresión.

CLAVE: a mayor calidad de imagen, mayores los valores de radio y umbral que necesitaremos. 

Usen por ahora los valores que yo indiqué y le serán suficientes para casi cualquier foto que tengan.

La diferencia entre usar este filtro y usar la herramienta de pincel corrector dependerá de cuanto lo necesite la composición. 

Si la piel tiene muchas manchas muy notorias, es mejor primero emparejarlas lo más posible antes con una herramienta correctora.

Luego una imagen con muchos pequeños detalles como ser arrugas leves pero esparcidas sobre la piel, requerirá un filtro como el que mostré ahora.

Habrán notado que habia duplicado una capa una vez más. La capa sin el filtro quedó abajo, con los colores ajustados y la piel curada.

Por lógica una vez que tengo una imagen con la piel curada y detalles no deseados disimulados, ya puedo duplicarla para el siguiente paso.

MASCARA DE CAPA: La máscara de capa será como el papel que pondremos encima de la capa, será parte de ella e interactuará con ella. El icono de mascara se situará a la derecha de la miniatura de capa, unido con una pequeña cadena para indicar su conexión.

Yo puedo manejar una máscara quitándola por completo, levemente, modificandola, etc.

Una vez agregada la máscara, se selecciona automaticamente, marcando en blanco un recuadro del icno de mascara en el panel de capas.

ya hemos agregado el alisado con el filtro pero deseamos quitar en las zonas del cabello porque el efecto es muy irreal y poco convincente, por lo tanto, no es el deseado.

USANDO EL PINCEL (B) CON EL COLOR FRONTAL NEGRO Y DE FONDO BLANCO, pintaremos el área del cabello, ojos y boca (punta de nariz opcional) para recobrar los detalles perdidos por el filtro de desenfoque

El color negro hará las veces de "Borrador de máscara" y a su vez el color blanco hará de "recuperador de máscara", lo cual facilita el trabajo mucho más que si usaramos el borrador, quitando pixeles, pudiendo tener un efecto muy desprolijo al momento de dejarse ver la capa inferior (la que no tiene el filtro) 

Noten la diferencia entre la zona que pintamos de negro en la capa y la zona que aun no hemos tratado

En el panel capas la miniatura de la mascara mostrará donde hemos pintado de negro para indicar que esa parte de la máscara YA NO ESTA , o por el momento, no está visible

ACOPLAR CAPAS: Esta acción se usa para que no se tengan las limitaciones que tienen las capas máscara, las capas de texto. O cuando deseamos hacer un efecto que se aplique a TODA LA COMPOSICION y sus capas, pero que de otra manera no se puede hacer, tal como: Pintar de distintos colores un texto, darle efecto 3D, usarlo como relleno, deformarlo de manera especial. También como ahora, me servirá para afianzar las capas con las que siento que he logrado el objetivo.

Si lo deseo, puedo entonces duplicar la capa luego de ser acoplada. Tambien se accede desde el menu Capas - - Acoplar Imagen o Combinar capas.

Como aclaro en la imagen, se mantienen los efectos y filtros y veré la imagen como la veo con sus capas distribuidas y el resultado tal como estaba hasta ahora, no se preocupen. 

DUPLICAMOS LA CAPA ACOPLADA PARA EL SIGUIENTE Y ULTIMO FILTRO QUE VEREMOS EN ESTE MODULO.

El Filtro licuar es quizás uno de los cuales hizo famoso a este programa, junto con el de corrección de ojos rojos, y de corrección de defectos en la piel.

Posee pocas herramientas, pero que son útiles siendo combinadas con buen ojo y pulso.

Empujar a la derecha nos sirve para correr un area marcada por el tamaño del pincel elegido, y su efecto se acentua hacia el centro del circulo del pincel.

Esta herramienta se regula dependiendo su necesidad.

CONSEJO: Usar un pincel grande y la herramienta Empujar puede servir para correr amplios sectores en un efecto no tan notorio.

DESINFLAR E INFLAR:

Ambas herramientas también dependen del tamaño del pincel. Si el diámetro es pequeño, afectarán un área pequeña, ya sea inflando o desinflando puntualmente. Con un pincel grande podemos por ejemplo: adelgazar una persona. Pero mal usada solamente sirve para caricaturizar o deformar

El truco es saber donde posicionar el pincel y qué tamaño usar dependiendo qué quiero cambiar.

CONGELAR Y DESCONGELAR MÁSCARA:

El primero pintará con una máscara roja casi transparente el área con el mismo tamaño del pincel. Un pincel más grande ahorrará tiempo, un pincel chico cubrirá áreas más pequeñas como bocas, ojos, etc.

Una vez congelada un área, NINGUN EFECTO SE APLICARA sobre la zona congelada. Podremos corregir una nariz grande si tironear la boca hacia arriba, o agrandar ojos levemente sin inflar la sien, por ejemplo.

Es muy importante cuando no se quiere hacer notorio el uso del Photoshop. Un error muy comun son las lineas verticales u horizontales  de una composición. Cualquier herramienta que usemos aquí deformará la linea, haciendo notar que la imagen está "Photoshopeada".

EFECTO NO DESEADO, o estéticamente incorrecto.

VAMOS A HACER LAS COSAS BIEN:

Achicamos la naríz un poco...

Vayamos un paso más avanzado...

Congelamos casi toda el área para asegurarnos que nada se altere (especialmente el cabello) y... con la herramienta empujar subimos al área sin congelar, levemente.

Ahora hacemos lo propio con ésta área que ha quedado un poco dispar.

NOTA: Los rostros simétricos que se ven en las páginas, y material gráfico impreso... están practicamente todos alterados de la manera en que les muestro ( o más radicalmente aún)

Cambio realizado...

Ahora tenemos una capa superior con filtro Licuar, la cual casi no podremos borrar ni enmascarar, ya que de alterar por error zonas del rostro, se verá por debajo el verdadero rostro original, dando un efecto no deseado de "doble cara"

Aprovechando la ocasión, he realzado más los colores del cabello, labios  y ojos levemente.

Las dos capas inferiores de momento las dejaremos para ver la diferencia entre lo hecho, paso a paso.

De momento decidí acoplar las 2 capas superiores, la que tenia el efecto de filtro de superficie y la capa con el Licuado y reconstrucción del rostro.

A continuación, voy a aplicar un retoque final que es opcional y dará un efecto de "ensueño" , un poco más irreal, pero que suele usarse en publicidades para evitar retocar tanto la piel de las fotografias si los detalles a ocultar no son muchos.

El filtro de desenfoque Gaussiano, nos empañará la imagen, distorsionandola como se ve en la imagen superior.

El nivel que usemos ahora será bastante alto , pero se puede regular.

Apliquemos un desenfoque de 20 pixeles, aún si ven que la imagen se ha casi perdido en sus detalles, ahora verán por qué...

Tal como expliqué antes, este efecto queda a criterio de cada uno. Es UNA manera de dar terminación al trabajo, entre cientos de posibilidades.

Recuerden que el tipo de fusión de capa será SUPERPONER para lograr lo que ven arriba.

Se puede regular el efecto suavizandolo en distintos aspectos, desde la opacidad y relleno de la capa.

Como despedida les dejo la diferencia . el ANTES Y DESPUES

Bien, como digo siempre ESPERO QUE LES HAYA GUSTADO 

Este módulo que fue dedicado a Photoshop es parte de nuestra práctica para saber las bases de la edicion de imágenes

Lo hecho y visto cubre solamente el aspecto más básico del uso de este programa. En su aplicación fotográfica y para elementos que nos servirán también en el Modulo Web del curso, teniendo en cuenta que este es un programa de la Suite Adobe, y está altamente integrado con los otros dos que veremos: Adobe Dreamweaver y Adobe Flash.

La siguiente lección abre el tema WEB.