PÁGINA WEB CON FIREWORKS

En esta práctica he realizado el diseño de una página web a partir de Fireworks.

Una vez creábamos el documento en fireworks teníamos que seguir una serie de instrucciones que se nos mostraban en un PDF que nos servía de guía :

La práctica consistía en crear una especie de banner ( digo esto por que creamos varios recuadros que nos llevan a distintas partes ) con varios elementos.

A la derecha de la colocamos cinco recuadros en los cuales colocaremos seis opciones y a la derecha, en cada uno de los cuadros blancos correspondientes con dichas opciones ( que eran sillas, mesas, armarios y camas ).

Para poder hacer la interactividad lo que teníamos que hacer era insertar la división en todos los nombres y en los cuadrados blancos correspondientes, enlazábamos los recuadros grandes con los pequeños y poníamos la opción one-click.

TRAZADOS DE FORMA

En esta práctica he realizado dos composiciones utilizando la pluma con la opción de forma.

En la que veis arriba he hecho un desierto. Para el sol he hecho una circunferencia con la herramienta de elipse y luego le he dado un degradado lineal que va de amarillo a rojo, además lleva un trazo rojo. 

Para dar la impresión de las montañas de arena del desierto he cogido la herramienta pluma con la opción de forma como mencioné antes y fui creando la forma de las montañas. 

Por último hice el texto que lleva, dándole distintos efectos como por ejemplo un degradado, una sombra paralela y un trazo.

Para esta composición de un bosque lo primero que hice fue el cielo, trazando una estrella y duplicado capas mientras cambiaba su tamaño. La luna la hice con la herramienta de trazo, haciendo su forma poco a poco, además después le di un degradado radial.

Lo siguiente fue el suelo, que lo hice con un degradado radial que iba de blanco a un tono rojizo. Lo mismo hice con la parte superior del suelo pero con un degradado lineal que iba de rojo a morado.

Por último hice los árboles trazando su forma y también la forma de color verde que tiene dentro, en referencia a las hojas de los árboles. 

POSTERIZAR Y SOLARIZAR IMÁGENES

En esta práctica he posterizado la siguiente imagen :

Esta posterización la he realizado a partir de las capas de ajuste de photoshop de una forma muy sencilla que explicaré ahora.

Lo primero que hay que hacer al abrir la imagen en photoshop es ir a la opción de capa de ajuste y abrir la opción de posterizar.

Cuando se abra simplemente tenemos que mover el regulador de nivel para ajustar cuanto queremos que se posteriza la imagen, o bien darle un cierto valor numérico para que se posterize. 

Este es el resultado de haber posterizado la imagen : 

También he realizado la opción de posterizar una imagen, esto es invertir los tonos de la imagen creando que las zonas oscuras ahora sean luminosas.

   

ETIQUETAS HTML

En esta práctica he aprendido a realizar varias etiquetas para crear un código HTML.

Para ello he utilizado el programa Dreamweaver que nos permite crear un HTML en el que pondremos todas las etiquetas y podremos hacer una previsualización para ver como va a ser el resultado final.

Esto es lo que nos aparece al abrir el programa.

Como vemos aparece el código HTML que nos permite que todo lo que escribamos se convierta en un HTML, la cabecera, una opción para poner el título que queramos al documento, la cabecera, y el cuerpo del documento en el que pondremos todas las etiquetas.

Como he dicho antes, en el apartado que pone "Body" tendremos que colocar todas las etiquetas para que luego se puedan ver.

La práctica que he realizado ha sido la siguiente :

En esta práctica hemos puesto en práctica todas las etiquetas que he aprendido.

Lo primero que hice fue colocar el título y el subtítulo que aparecen al principio, que se colocaban con las siguientes etiquetas :

Os explicaré en que consisten algunas de las etiquetas que aparecen en la imagen :

<h1> = Sirve para poner títulos.

<br/> = Sirve para separar párrafos.

<p> = Sirve para poner párrafos.

<hr/> = Crea una línea horizontal. 

<FONT SIZE=> = Sirve para cambiar el tamaño de las letras.

<strong> = Sirve para poner negrita.

Lo siguiente que hice fue poner el enlace que lleva a la página principal del instituto y la imagen que está debajo de ella, que pinchando sobre ella lleva a este blog.

Los códigos que he utilizado para hacerlo son :

<a href=> = Sirve para crear un enlace.

<img src=> = Sirve para poner una imagen.

Width y Height = Sirve para indicar el tamaño en ancho y alto de la imagen.

Por último colocábamos los dos párrafos que faltaban, y con esto terminaba la práctica.

<i> = Sirve para poner las letras en cursiva.

     

CORRECCIÓN DOMINANTES DE COLOR

En esta práctica he corregido varias dominantes de color de distintas imágenes.

La dominante de color es un “rasgo” visual que suele aparecer con mucha frecuencia en el mundo de la fotografía. En muchas ocasiones es un efecto buscado y provocado, pero en otras ocasiones se trata de un defecto que nos roba veracidad y destruye la naturaleza real.

Para retocar esas dominantes de color he utilizado dos "herramientas" que me han ayudado mucho en la tarea. 

Una de ellas es la paleta de color CMY, que nos ayudaba mucho a saber que colores teníamos que darle a la imagen si queríamos quitar cierto color. 

Por ejemplo, si queremos quitar una dominante amarilla debemos darle a la imagen una mezcla de colores, en este caso serían magenta y cian, o también podemos optar por ponerle un solo color, el azul violeta en el caso del amarillo. 

La otra herramienta es indispensable para hacer una corrección de dominante de color. 

Se trata de la herramienta de equilibrio de color de photoshop, que abrimos desde la ventana de imagen o desde la herramienta de capa de ajuste. 

Esta herramienta nos permite modificar las cantidades de color que tenemos en la imagen, esto sirve para dar las cantidades de color correctas de color para quitar una dominante, como he dicho antes.

En esta pestaña vemos los tres colores que podemos modificar, el cian, el magenta y el amarillo. También vemos en la parte superior un apartado en el que pone Tono, esto nos permite decidir donde queremos modificar ese color, si en las sombras, en las luces o en los medios tonos.

A continuación os enseñaré como retocar una de la imágenes que he retocado en esta práctica. 

IMAGEN ORIGINAL

Como vemos esta imagen tiene una dominante amarilla, que sobretodo se nota en las luces (En las nubes por ejemplo, o los árboles).

El primer paso que tenemos que tenemos que hacer para corregir una dominante de color es averiguar que color predomina en la imagen. Este paso ya está hecho, ya que como dije antes el color que predomina es el amarillo.

Lo siguiente que hay que hacer para corregir una dominante es mirar la paleta cmy, desde la que averiguaremos que color o combinación de colores tenemos que utilizar para corregir esa dominante.

En este caso sería el color azul violeta. ya que es el complementario del amarillo, o bien una mezcla de magenta y cian.

Cuando ya sabemos que colores tenemos que utilizar para corregir esa dominante llega el momento de utilizarlos. Esto se hace desde la opción de equilibrio de color, que nos permite dar diferente valores de color para así corregir las imágenes.

Después de dar los valores a dichos colores vemos que la imagen ya está corregida y no hay dominante, y si la sigue habiendo simplemente tenemos que ajustar más esos colores para que desaparezca.

IMAGEN SIN DOMINANTE

  

PRÁCTICA RETOQUE IMÁGENES BLANCO Y NEGRO

En esta práctica he retocado 4 imágenes a partir de la herramienta de curva. 

A continuación os enseñaré el proceso que he seguido para retocar estas 4 imágenes que estaban en un modo de color de escala de grises.

Lo primero que hice cuando la imagen estaba colocada en photoshop fue abrir la herramienta de curvas. Una vez allí si nos fijamos aparecen 3 cuentagotas.

El primer cuentagotas es el que se utiliza para definir el punto negro ( las sombras ), y el tercero se utiliza para definir el punto blanco ( las luces ). El de la mitad no lo hemos utilizado.

Para definir correctamente un punto blanco lo que tenemos que hacer es pinchar dos veces sobre el cuentagotas que define las luces, al hacer esto nos saldrá una paleta de color que utilizaremos para dar un porcentaje de 5 % en el color negro del CMYK, dejando los demás a 0. 

Después de hacer esto simplemente seleccionamos el punto más claro de la imagen, con esto conseguiremos que la imagen tenga un tono de luz correcto.

Para definir el punto negro hice algo parecido, pero en este caso con el cuentagotas que servía para definir el punto negro y con un porcentaje de negro del 95 %, dejando los demás colores también a 0.

Después de hacer esto seleccionábamos el punto más oscuro de la imagen y conseguíamos que la imagen tuviese unos niveles correctos de sombras.

Con esto terminábamos de retocar la imagen en blanco y negro, ahora os enseñaré la diferencia de la imagen retocada a la original.

ORIGINAL

RETOCADO

PRÁCTICA CURVAS

En esta práctica hemos utilizado las curvas para retocar una imagen o modificar su contraste.

La imagen que se nos daba era la siguiente :

Para retocar esta imagen podíamos hacer de dos maneras. La primera era con la opción de Automático que nos aparece en en menú de curvas.

Al seleccionar esta opción la imagen se retocaba automáticamente y quedaba de la siguiente manera :

Como veis el nivel de negro y blanco se ha equilibrado automáticamente y ha hecho que la imagen se vea de forma correcta, eso es lo que llamamos retocar una imagen.

Como dije antes, hay dos forma de retocar una imagen, la otra forma es hacerlo manualmente con las curvas : 

En esta ocasión he retocado yo mismo los ajustes de blanco y negro ( luces y sombras ), para que la imagen me quedase lo mejor retocada posible.

A continuación os enseñaré unos cuantos ejemplos para que podáis ver varias cosas que e pueden hacer "jugueteando" con las curvas.

LUCES AL 100 %

Si observamos la curva vemos que está totalmente inclinada hacia el lado de las luces, lo que va a hacer que la imagen no tenga nada de sombras, lo que quiere decir que será de color blanco.

SOMBRAS AL 100 %

En este caso hemos hecho los mismo que antes pero esta vez con las sombras, inclinando la curva totalmente hacia las sombras conseguimos que la imagen carezca de luces, es decir, que se quede totalmente en negro.

LUCES Y SOMBRAS AL 50 %

Como vemos en la gráfica, la curva está igualada en luces y sombras al 50 %, lo que hace que la imagen esté totalmente gris.

ACLARAR LUCES Y OSCURECER SOMBRAS 

En este caso lo que he hecho ha sido aclarar las luces, de forma que las luces se viesen mucho más, y oscurecer las sombras y que hiciesen más contraste.

OSCURECER LUCES Y ACLARAR SOMBRAS

Ahora he hecho lo contrario que en el caso anterior, he oscurecido las luces y aclarado las sombras, de esta manera hacemos que las luces se vean más oscuras y se vea ese tono grisáceo en ellas.

INVERTIDA

Por último os enseñaré una imagen con las luces y las sombras invertidas, una negativa. En esta imagen las luces y las sombras están puestas de forma contraria a como normalmente están, eso da lugar al efecto negativo.

PRÁCTICA TRAZADO MODELO

En esta práctica he trazado la silueta  de una modelo con la herramienta pluma para después crear la siguiente composición en Indesing.

Para trazar a la modelo la llevé a photoshop y utilicé la herramienta pluma. 

Cuando el trazado estaba terminado lo que hice fue crear un trazado de recorte en la modelo para luego poder llevármelo a Indesing sin que apareciese el fondo.

También cabe mencionar que la imagen de la modelo tenía que estar a una resolución de 225 ppp, ya que es para papel no estucado, y además tenía que tener un perfil de color de Fogra39.

Una vez hecho todo esto pasamos a Indesing, en el que teníamos que hacer unas cuantas cosas para crear la composición. 

Los primeros pasos eran muy simples, colocar el fondo de color azul con una caja de imagen y escribir el texto del título y darle su color, tamaño... 

El siguiente paso era algo nuevo, pero también muy sencillo. Consistía en colocar un texto falso que te da Indesing, o que puedes coger tu mismo desde internet.

Este texto falso se ponía desde el panel de carácter, desde la opción de llenar con texto falso.

Así es como quedaría :

Lo siguiente fue colocar la modelo de tal forma que diese la impresión de que el texto hacía la silueta de la modelo, o mejor dicho haciendo que el texto se ciña a la silueta de la modelo.

Para ello lo que hice fue darle a la opción de ceñir texto, que se abre desde la opción de ventana.

Al darle a esta opción aparece un recuadro con todas las opciones necesarias para poder ceñir el texto a nuestra imagen. 

Al elegir la opción que queremos para ceñir el texto ( en mi caso fue la tercera, que ciñe el texto de manera equivalente por todas la image ) la y darle los valores que queremos, el texto se ciñe inmediatamente.