tratamiento de imagen, publicación electrónica, tutorial photoshop.

martes, 26 de abril de 2016

APRENDER A DIBUJAR EN FLASH

En estas prácticas he utilizado Flash para realizar dos dibujos.

El primer dibujo que realicé fue una composición con un oso panda como protagonista.


Para realizar este dibujo lo primero que hice fue colocar el color azul como color de escenario, y colocar un cuadro de imagen de color verde para la hierba. 


Después, en una capa distinta creé los diferentes pájaros, y en otra capa las nubes a partir de la herramienta de forma, eligiendo la forma de óvalo y juntando varios de forma que pareciese una nube.


Lo siguiente que hice fue crear el sol, el cual creé utilizando la herramienta de forma ovalada, creando la esfera y dándole un degradado radial que fuese de amarillo a naranja.


Por último creé el panda, empezando por la forma de su cara, también creando un círculo y deformándolo hasta que pareciese la cara del panda. Luego hice las orejas, que eran dos óvalos y las coloqué. Y por último creé los ojos y la boca creando distintas formas.


El otro dibujo que realicé fueron 3 textos, cada uno hecho de una forma distintas.

El primero hecho con una máscara de recorte, el segundo igual, lo único que cambiaba era que tenía que crear el contenido que iba a llevar ( La fresa en mi caso ), y por último un texto que llevaba filtros.








CARTA DE COLOR

Una carta de color es una paleta en la que se muestran distintos colores y distintas tonalidades de los mismos, además de las valores CMYK que tenemos que colocar para obtener ese color. Estas cartas de color son muy utilizadas en preimpresion o en el ámbito de la fotografía.

En esta ocasión he realizado una carta de color desde photoshop.

Para ello primero he organizado el espacio en el que iba a ir cada una de los cuadrados de cada color.

Para crear los distintos colores lo que hice fue crear uno a uno los cuadrados con la herramienta de marco rectangular y después crear una capa de relleno en esos cuadrados para después poner en el selector de color los distintos porcentajes y conseguir ese color.

Por último lo que hice fue colocar correctamente todos los colores y el porcentaje de CMYK que se necesitaba para conseguir el color deseado.

Este fue el resultado :


BANNERS CON HTML5

En esta práctica he realizado un banner HTML5 a partir de un programa llamado HTML5 Maker.


Este es un programa que se usa exclusivamente para crear banners en HTML5, y es muy sencillo de utilizar. 

Para empezar vemos a la izquierda las pestañas en las que se dividirá nuestro banner, y también el tiempo que durarán hasta cambiar al siguiente. También nos permite realizar otras acciones como por ejemplo borrar una pestaña o copiar una que ya tengamos hecha.



En la parte superior del programa están las opciones para añadir texto e imágenes, además de otras opciones que nos permiten visualizar nuestro banner y otra que nos permite hacer zoom.


Y por último en la parte derecha encontramos todo lo necesario para modificar nuestras imágenes y textos, ya sea su tamaño, color, trazo... Incluso también una opción que nos permite poner un hipervínculo.


Por último publicábamos nuestro banner y al publicarlo nos permitía guardarlo y coger su código embebido.

Otro de los programas que podemos utilizar es bannersnack.


Este programa nos permite crear banners en HTML5 y en flash.

Este programa se parece mucho al anterior, en su parte izquierda encontramos las dsitintas pestañas que nos servirán para crear nuestro banner, al igual que en el programa anterior.


En la parte superior también encontramos las opciones para añadir texto, imágenes, visualizar el banner...


Y en la parte derecha encontramos también los ajustes que nos permiten modificar nuestro texto, imágenes y demás.






lunes, 18 de abril de 2016

PROTOTIPO DE PAGINA WEB

El prototipado de una página web consiste en hacer un bosquejo o boceto de esa página para ver como será su aspecto y corregir errores antes de crear la página final. El prototipo de una página web se puede realizar a mano ( con una hoja y un papel ) o con un programa de prototipo, como por ejemplo NinjaMock, que es el que he utilizado en este caso.

Ahora explicaré como realizar el prototipo de una página web a partir de dicho programa.


Esa es la página que se nos abre cuando queremos crear un nuevo prototipo, como podéis ver yo ya tengo el mío creado. 

A la derecha aparecen todos los elementos que podemos utilizar para crear nuestro prototipo :


Entre estos elementos aparecen los típicos, como por ejemplo uno que te permite poner imágenes, textos, links... Pero hay otros más curiosos como por ejemplo algunos que te permiten poner calculadoras, mapas, gráficos... 



En la parte derecha de la página se muestran las propiedades del elemento que estamos utilizando : 


A partir de todos esos elementos cree un prototipo de página web, este es el resultado final :


Cuando estaba terminado había que guardarlo en HTML y en PDF :







martes, 5 de abril de 2016

GESTIÓN DE COLOR

En esta práctica os explicaré qué es y como se utiliza la gestión del color. 

Para ello os mostraré un ejemplo mediante imágenes que os ayudarán a comprenderlo mejor. 

Empezaré con la siguiente imagen :


En esta imagen aplicaré un ajuste de color Preimpresión Europa 3.

Lo primero que haremos será meter la imagen en Photoshop. Cuando hagamos esto se nos abrirá la siguiente ventana :


Como podéis ver en esa ventana se nos muestran tres opciones, estas opciones siempre se nos muestran cuando a la imagen le falta un perfil. 

En este caso he elegido la segunda opción que es : Asignar espacio de trabajo RGB Adobe RGB (1998). La primera opción significa que no se va a efectuar ninguna gestión de color y la última nos deja elegir un perfil. 

Después de darle el perfil de color a la imagen lo que haré será ir a la ventana de edición y seleccionar el apartado ajustes de color.


Como podéis ver, en esta ventana se nos presentan varias opciones sobre el ajuste de color. En este caso solo he tocado la primera opción en la que pone ajustes, en la que he cambiado la opción a Preimpresión en Europa 3. Al hacer esto automáticamente se cambiaba el ajuste de CMYK a FOGRA39 y el apartado de RGB queda igual que al principio.

Cabe resaltar que este último paso se puede realizar al principio, antes de meter la imagen en photoshop, así al meter la imagen ya se quedaría con esos ajustes y no habría que cambiarlos después.


Ese es el resultado que queda al realizar todo el proceso.

Ahora a partir de la siguiente imagen crearé un ajuste a medida que va a ser un FOGRA27.


Aunque este ejemplo lo haré de otra forma para explicar otra alternativa para realizar la gestión de color.

En este caso al colocar la imagen en photoshop marcaremos la primera opción :


Como dije antes esta opción no da ningún perfil de color, por lo tanto tendremos que colocarlo después. 

Para ello simplemente vamos a la ventana de edición y le damos a asignar perfil, allí nos aparecerá la misma ventana que nos aparecía al principio para darle el perfil.


Lo siguiente que haré será lo mismo que en el paso anterior pero con una pequeña diferencia. La diferencia es que cambiaré el Ajuste por uno a medida y en el apartado de CMYK cambiamos a FOGRA27.


Este es el resultado de esta imagen :


Por último explicaré como convertir el perfil en CMYK.

Simplemente vamos de nuevo a edición, y esta vez abrimos el apartado de convertir en perfil :


En el apartado de Espacio de destino marcamos la opción de Espacio de trabajo CMYK. Esta opción también sirve para pasarlo a RGB o a otro tipo de perfiles.











miércoles, 24 de febrero de 2016

DIAGRAMA DE COLOR

Esta práctica trataba de realizar dos diagramas de color, uno de síntesis sustractiva (CMYK) y otro de síntesis aditiva (RGB).

Estos diagramas eran muy sencillos de realizar, y solo había unas pequeñas variantes a la hora de realizar cada uno.

SÍNTESIS ADITIVA
En este modelo empecé realizando las elipses con la herramienta formas poligonales, y después les di el color adecuado y un trazo de un mismo grosor para todas.


A continuación tenía que realizar las fusiones que quedan dentro de las elipses, para ello lo que tenía que hacer era seleccionar la parte en la que se juntaban y crear una capa de relleno nueva con el color adecuado que salía de la mezcla de los colores.


Por último le di un trazo a las capas de relleno que cree, para que quedase acorde con las elipses.

SÍNTESIS SUSTRACTIVA

Este era más sencillo que el anterior, simplemente hice lo mismo al principio, realicé las elipses, le di el color CMYK adecuado a cada una de ellas, y para terminar simplemente le di un efecto de fusión (Multiplicar).


-DEFINICIÓN DE SÍNTESIS ADITIVA


Cuando nos referimos a la síntesis sustractiva del color, nos referimos al color como pigmentos, como pintura. Los pigmentos no emiten luz sino que sustraen (absorven) parte de las radiaciones de la luz. Dependiendo que radiación de luz absorvan los veremos de uno u otro color. Como cada pigmento quita parte de la luz cuantos más pigmentos mezclemos más oscuro será el color que obtendremos.

Los colores primarios en la síntesis sustractiva son el magenta, el amarillo y el azul cian.


-DEFINICIÓN SÍNTESIS SUSTRACTIVA


Al hablar de la síntesis aditiva del color debemos de hablar del color-luz, es decir del color como radiación de luz. En este caso los colores primarios (con los que podemos formar los demás) son el rojo, el verde y el azul.

Hay que darse cuenta que al mezclar luces de color, los colores resultantes de la mezcla van a ser siempre más luminosos que los originales.

Podemos ver un ejemplo muy claro en la pantalla de los televisores o en los monitores. Si miramos con una lupa veremos que la pantalla está formada por multitud de celdillas. Cada una de ellas con tres bandas verticales de colores rojo, verde y azul. Podremos comprobar como cada una de las bandas está más o menos iluminada dependiendo del color de la zona de la pantalla.

viernes, 19 de febrero de 2016

ACCESIBILIDAD Y USABILIDAD

ACCESIBILIDAD

La accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web.

USABILIDAD

La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema. Esto se mide a través del estudio de la relación que se produce entre las herramientas (entendidas en un Sitio Web el conjunto integrado por el sistema de navegación, las funcionalidades y los contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.

Ahora os mostraré algunas páginas en las que he encontrado estas dos licencias. 

MINISTERIO DE EDUCACIÓN, CULTURA Y DEPORTE.



UNIVERSIDAD DE ALICANTE