Bienvenido Grado Undecimo

Este es un blog educativo en el cual los estudiantes de grado Undecimo encontraran las actividades complementarias en el desarrollo del área de Tecnología e Informática en el Colegio CELCO Sogamoso

lunes, 6 de agosto de 2012

¿Qué es Photoshop?

Descripción: Photoshop CS5Photoshop, creado por Adobe Systems, es una de las herramientas software para el tratamiento de imagen más potente y popular de hoy en día.

Debemos tener bien claro desde el principio que Photoshop no está pensado para dibujar, para eso es recomendable que utilices Illustrator, también de Adobe. Photoshop está principalmente orientado a tratar y manipular imágenes, o bien creadas por otros programas, o digitalizadas por un escáner o máquina fotográfica. Entonces, una vez introducida la imagen en el programa podrías retocarla, transformarla y editarla con un sinfín de posibilidades.

De hecho, esta es una de las características más interesantes de Photoshop, pues Adobe ha sabido crear un programa intuitivo y muy completo que hace que se desmarque de la competencia y sea el software más utilizado por diseñadores e ilustradores.

Photoshop es un software comercial, y se ha de comprar una licencia para poder usarlo indefinidamente. No obstante, Adobe permite descargar y probar el programa totalmente gratis, pero por un periodo de 30 días.

Abrir una imagen

Para comenzar a editar una imagen, lo primero que tendremos que hacer será abrirla con Photoshop.

Vamos a ver los pasos a seguir para abrir un archivo desde Photoshop:

Una vez arrancado el programa, haz clic en Archivo en la barra de menú.

Descripción: Archivo en la barra de menú

Se desplegará una lista como esta:

Descripción: C:\Users\rolo\Desktop\CELCO\Grado 11°\Photoshop\Ph 1.png
Para abrir una imagen deberás hacer clic en Abrir. y se abrirá un cuadro de diálogo.

Descripción: C:\Users\rolo\Desktop\CELCO\Grado 11°\Photoshop\Ph 2.png

Llegados a este punto, lo que deberás hacer es navegar por las carpetas hasta encontrar el archivo deseado. Cuando lo tengas seleccionado, haz clic en Abrir y la imagen se abrirá en una ventana dentro del programa.

Descripción: C:\Users\rolo\Desktop\CELCO\Grado 11°\Photoshop\Ph 3.png

INTRODUCCIÓN A PHOTOSHOP CS5

Al abrir una imagen directamente, nos encontraremos con que no podemos editarla, ya que la capa que hace de fondo está bloqueada. Si abres la ventana Capa, verás algo así:

Descripción: http://www.aulaclic.es/photoshop-cs5/graficos/ventcapasfondo.gif

Aunque esto lo veremos más adelante, de momento diremos que para poder editar este fondo, hay que convertirlo a una capa. Para ello, basta con hacer doble clic sobre Fondo en el panel. Aparecerá un cuadro de diálogo con opciones. Aceptamos las opciones por defecto. Ahora, ya puedes editar la imagen.

GUARDAR UNA IMAGEN

Es importante diferenciar, primero, los dos estados de trabajo en los que se puede encontrar una imagen:

Una imagen puede estar en proceso, y no estar todavía acabada. Bien porque queremos grabar en determinado momento para no perder los cambios realizados, o porque deseamos terminar la sesión de trabajo y continuar más adelante.
O una imagen puede encontrarse terminada y lista para publicar, imprimir o almacenar.
Por tanto, si la imagen puede encontrarse en dos estados de trabajos, guardaremos nuestros archivos de formas diferentes.

En ambos casos el procedimiento inicial es el mismo, haremos clic en Archivo y luego en Guardar Como.

Descripción: http://www.aulaclic.es/photoshop-cs5/graficos/archivoguardarcomo.gif

Aparecerá el siguiente cuadro de diálogo:

Descripción: Cuadro de diálogo Guardar como...

Seguidamente navegaremos por las carpetas hasta encontrar el lugar donde queremos guardar el archivo.

Ahora es cuando debemos elegir una de las dos opciones:

a)    Guardar Imágenes inacabadas o en proceso.

Si todavía no hemos alcanzado el estado final de la imagen y queremos guardar el trabajo que hemos hecho, nos gustaría que la imagen permaneciese exactamente en el estado en el que se encuentra, manteniendo las capas, transparencias y objetos tal y como están para poder seguir trabajando con ellos después.

Entonces deberemos decirle al programa que el tipo de archivo que queremos crear al guardar la imagen sea de tipo Photoshop (.PSD o .PDD). Este tipo de archivo ocupa mucho espacio, pero es debido a que guarda gran cantidad de información sobre el estado en el que se encuentra nuestra composición.

Así que haremos clic sobre la lista desplegable de Tipo y seleccionaremos Photoshop.

Descripción: Archivo tipo .PSD
.PSD y .PDD no son archivos de imagen, son archivos de trabajo propios de Photoshop y por tanto sólo podrá utilizarse con este programa.

b) Guardar imágenes terminadas para su posterior almacenamiento, publicación o impresión.

En este caso, nuestra imagen ya ha alcanzado su estado final, hemos trabajado con la imagen y queremos finalizar su proceso.

Pues bien, ahora lo que haremos será guardar la imagen como un archivo de imagen para que pueda ser utilizada más tarde como mejor nos interese. Para ello haremos clic en la lista desplegable de Tipo y seleccionaremos el formato de imagen digital que queremos darle a nuestra imagen.

Descripción: Archivo tipo .JPg y .GIF

JPG, GIF y PNG son los formatos más comunes. El primero, está pensado para imágenes con muchos colores, como fotografías, para las cuales se obtiene mejor calidad en menor tamaño que otros formatos. El segundo, GIF, esta ideado para gráficos, imágenes con pocos colores (un máximo de 256) y áreas de color uniforme. Por lo general, un archivo GIF es muy ligero, ya demás permite transparencias y animaciones. PNG tiene varias versiones: PNG 8 puede usarse como los GIF, y PNG 24 está especialmente diseñado para gráficos con degradados y transparencias de distinta intensidad.. Eligiendo el formato adecuado, obtendremos la mejor relación calidad - tamaño.

Ten en cuenta que en el momento en el que guardes la composición en cualquiera de estos formatos de imagen, todos los objetos, capas y transparencias se acoplarán creando una imagen plana, y, por tanto, no podrás volver a manipular la imagen desde el estado de trabajo en el que se encontraba antes de grabar.

BÁSICO: FORMATOS DE IMAGEN

Una imagen digital no es más que un archivo que contiene la información de la imagen trasformada y almacenada en forma de unos y ceros.

Por esto que desde que existen los medios gráficos digitales se ha buscado una forma de convertir una imagen óptica a digital con la menor pérdida de información posible (colores, tonalidades, etc.).

Obviamente, no es difícil de conseguir, retener todos esos datos es relativamente sencillo, pero de esta forma se crearían archivos de imagen enormes. Era necesario comprimir la información de una forma eficiente.

La compresión de imágenes requería necesariamente desechar la información menos relevante, y de aquí empezaron a surgir diferentes métodos de compresión de archivos. Luego comenzó la revolución web, y se hizo necesario crear formatos más agresivos, que contuviesen menos información para que el archivo final pesase cada vez menos.

Y todo ello intentando mantener un resultado coherente y lo suficientemente bueno como para poder ser útil a la hora de compartir, imprimir y almacenar archivos de imagen.

Ahora veremos los formatos de imagen más comunes existentes en estos momentos.

El formato JPEG

Es uno de los formatos más utilizados hoy en día, indicado sobre todo para fotografías en Internet por su capacidad de conseguir imágenes suficientemente reales y con un gran número de colores.

Este formato soporta los modos de color CMYK, RGB y la escala de grises sin canales alfa, llegando a convertirse en uno de los formatos más populares por su versatilidad y una compresión bastante alta.

Las dispositivos móviles y mayoría de cámaras generan las fotografías en este formato. Por tanto es el que más utilizaremos en Photoshop.



Si vamos a editar una imagen varias veces, hemos de tener cuidado con este formato. Pues cada vez que la cambiemos y guardemos, iremos perdiendo un poco de calidad.

El formato TIFF

De mayor calidad que el formato JPEG, pero con compresiones mucho menores.

Este formato es utilizado sobre todo en la impresión de imágenes digitales, debido a que crea archivos de gran calidad. El único inconveniente de este formato es el tamaño de los archivos que crea, por lo que no suele utilizarse para publicar imágenes ni almacenamiento.

A pesar de ello, TIFF es uno de los formatos más flexibles y prácticamente admitido por todas las aplicaciones de pintura, edición de imágenes y diseño.

Soporta casi todos los modos de color: RGB, CMYK, Lab, Indexado y escala de grises, todos ellos con canales alfa, y mapa de bits sin canales alfa.

 El formato TIFF no puede crear archivos de tamaño mayor a 4 GB.

El formato BMP

Este formato tiene su origen en la plataforma Windows y DOS, aunque ahora se ha expandido y es característico por su usabilidad y el soporte en la mayoría de software de imagen que podamos encontrar hoy en día.

Admite RGB, color indexado, escala de grises y mapa de bits sin canales alfa.

Muy utilizado por las aplicaciones basadas en Windows, podemos encontrarlo en infinidad de imágenes, aunque su uso mayoritario es en el desarrollo de juegos y aplicaciones DirectX.

Se trata de un formato sin compresión ni perdida, por lo que las imágenes son de mucha calidad, pero de gran tamaño. Debido a ello, este formato no es soportado en las páginas web.

El formato GIF

Uno de los formatos más utilizados en Internet, crea gráficos e imágenes de color indexado en la web. Aunque una de sus carencias es la de admitir muy pocos colores (256 como máximo), se ha expandido mayormente por su capacidad de compresión al ser capaz de crear archivos de unos pocos kilobytes.

El formato GIF puede preservar las transparencias de la imagen aunque no soporte la inclusión de canales alfa.

Muy utilizado también en animaciones, al ser posible almacenar más de una imagen por fichero, creando pequeñas películas formadas por secuencias de imágenes que se repiten en el tiempo.

El formato GIF es óptimo para imágenes con pocos colores y áreas extensas de colores uniformes. Si cada píxel es de un color, como en una fotografía, el archivo GIF puede pesar más que la misma imagen en JPG.

El formato PNG

Formato creado como alternativa a GIF. Viendo que este último carecía de un aspecto tan importante como es el modo de color, PNG nace con la pretensión de ser el nuevo formato de imagen de intercambio en Internet.

PNG admite compresión con menos pérdidas de información, produce transparencias de fondo sin bordes irregulares y distintos niveles de intensidad, y soporta los modos RGB, escala de grises y color indexado sin canales alfa.

Este formato está siendo utilizado cada vez más para sustituir a GIF en gráficos para web, y cada vez más en imágenes con mayor calidad que antes eran comprimidas con JPEG.

Logros Tercer Periodo

TEMA
LOGROS
Diseño en Photoshop
1.  Reconoce las diferentes herramientas que componen el interfaz de Photoshop, para el diseño gráfico.
Diseño gráfico con Photoshop.
2.  Realiza logotipos, aplicando herramientas y efectos en Photoshop.
Proyecto diseño de página Web.
3.  Desarrolla un diseño de Pagina Web creando archivos html. Y manejo de un hosting gratuito.

lunes, 11 de junio de 2012

ACTIVIDAD “PRACTICA FIREWORDS CS4”

Para esta práctica tendremos en cuenta los siguientes parámetros:

1)   Abrir y cambiar color Lienzo.
2)   Importar una imagen a FWks.
3)   Insertar Pagina y crear texto.
4)   Direccionar y guardar practica como archivo HTML.

Una breve introducción sobre Fireworks.

Diseñe páginas Web completas en el potente entorno gráfico de Fireworks y exporte en un paso los diseños basados en CSS compatibles con los estándares para la Web, junto con las hojas de estilos externas. Empiece con uno de los seis diseños más comunes e integre gráficos de primer plano y de fondo con la detección automática de margen y relleno.

Incluya símbolos HTML sofisticados en los diseños de Fireworks para especificar cabeceras, vínculos y propiedades de formato y obtener un control CSS preciso.

Abrir y cambiar color Lienzo

Para esto tendremos en cuenta, el primer pantallazo que nos ofrece este editor de página web, en el cual tenemos las herramientas de abrir un documento ya existente o un documento en blanco, recordando el formato de archivo de los documentos en Fireworks (PNG).


1.     Imagen: Primer pantallazo Fireworks CS4

Posteriormente, al elegir la opción de documento de Fireworks (PNG), emergerá un cuadro de dialogo, el cual nos preguntara el tamaño del espacio de trabajo, en este caso para Fireworks es llamado Lienzo, además de esto también podemos escoger el color de lienzo.


2.     Imagen: Se recomienda las medidas que aparecen en este ejemplo (1200 x 650)

Además debes tener en cuenta la resolución del lienzo que se toma en pixeles por pulgada, recordando que un pixel es un cuadro de color que compone una imagen y entre mas pixeles por pulgada, el archivo de imagen será mucho mas pesado. Necesitamos un peso medio para nuestro archivo ya que entre mas pesado nuestro diseño tendremos problemas de carga de archivo y bloqueos del editor.

Después de determinar los parámetros de nuestro lienzo, visualizamos toda la composición grafica del editor de paginas web (Lienzo, herramientas, opciones barras de herramientas,…etc.), Podemos minimizar la visualización del lienzo a un 50% para un mejor trabajo y ver los limites en los que podemos trabajar.


3.     Imagen: Lienzo al 50%

Encontramos la herramienta con la cual podemos minimizar la visualización en el lado derecho del lienzo, las herramientas de una forma de columna vertical.


4.     Imagen: Herramientas de selección.


5.     Imagen: Herramientas mapa de Bit.


6.     Imagen: Herramientas Vector.


7.     Imagen: Herramientas Web.


8.     Imagen: Herramientas Colores


9.     Imágenes: Herramientas Ver.

Posteriormente de observar las herramientas que componen el plano grafico de Fireworks, encontraremos en la parte inferior de la pantalla de manera horizontal la herramienta para cambiar color de lienzo.


10.  Imagen: Pantalla completa.


11.  Imagen: Herramientas para selección de color de lienzo.

Importar una imagen a FWks

Ahora para importar una imagen a Fireworks, utilizaremos la barra de herramientas archivo y buscaremos la opción de importar, seleccionamos para que aparezca de la siguiente forma.


12.  Imagen: Aparece la opción de importar.

Posteriormente aparecerá el cuadro de dialogo importar, buscamos la carpeta de ubicación de nuestra imagen recordando cuales son los archivos compatibles con Fireworks (PNG, JPEG,…etc.).


13.  Imagen: Cuadro de dialogo importar imagen.

Seleccionamos la imagen a importar, pero esta no aparecerá de inmediato ya que el cursor cambiara de forma y al hacer clic izquierdo sostenido y crear un rectángulo en este espacio rectangular aparecerá, nuestra imagen en un recuadro azul con cuadros azules en sus vértices.


14.  Imagen: En esta aparece nuestra imagen importada.

Insertar Pagina y crear texto

Primero crearemos un texto simple y corto, para crear nuestra pagina de inicio, la cual tendrá los link que ya diseñamos en el cuaderno según la presentación que elaboramos con este fin. En este caso realizaremos un ejemplo corto como lo podemos apreciar en la imagen, con ayuda de la herramienta texto.


15.  Imagen: Podemos cambiar parámetros del texto con las herramientas de la parte inferior.

Para insertar una página nos acercamos al lado derecho de la pantalla y con clic derecho después de aparecer el menú desplegable seleccionamos la opción inserta página.


16.  Imagen: Encontramos las opciones para insertar pagina.

Después de insertar las paginas en este ejemplo tenemos las paginas Teoría, practicas, calificaciones, después de insertarlas colocaremos un pequeño texto y posteriormente le cambiaremos el nombre de cada una de las paginas con la herramienta cambiar pagina de la misma forma en la que insertamos pagina. Recordamos que siempre la página de inicio se debe asignar el nombre de index.

Direccionar y guardar practica como archivo HTML

Debemos entender que es direccionar, este termino lo manejaremos como la forma en la que el contenido de un archivo de pagina web es accesible para los usuarios. Teniendo esto en cuenta, utilizaremos las herramientas web que encontramos al lado izquierdo de la pantalla (Anteriormente explicada cada una de ellas) herramienta zona interactiva rectangular.


17.  Imagen: Herramienta zona interactiva rectangular (Cuadro rojo).

Después de seleccionar la herramienta zona interactiva rectangular, realizaremos rectángulos sobre el texto que pretendamos volver botones de entrada a diferentes paginas que conforman nuestro diseño (Paginas de contenido).


18.  Imagen: Vemos los rectángulos sobre el texto en nuestra pag. de inicio.

Para direccionar nuestra pagina, tendremos que realizarlo con las herramientas que vemos en la parte inferior dela pantalla, allí encontraremos el espacio vinculo; que es donde nosotros queremos enlazar ese clic, también encontraremos alt; que es la información que le proporcionaremos al usuario en el momento de manejar nuestra pagina, y por ultimo destino; que es simplemente donde se cargara la pestaña que cargaremos o una nueva pestaña, también tiene distintas opciones, la mas recomendada es self, que se cargara en la misma pestaña de visualización.


19.  Imagen: Se ven las opciones al momento de direccionar una página en Fireworks.

Debemos de direccionar cada una de los link de la pagina de inicio, sin olvidarnos de direccionar las otras paginas de contenido, dirigiéndolas hacia la pagina de inicio, colocando en vinculo index, alt Ir a inicio, destino self.

Por ultimo exportaremos nuestro diseño hacia un archivo del tipo HTML (HyperText Markup Language «lenguaje de marcado de hipertexto»), tendremos en cuenta que utilizaremos nuevamente la herramienta archivo y seleccionaremos la opción exportar.


20.  Imagen: Vemos la herramienta archivo y en un rectángulo rojo la herramienta exportar

Después de seleccionar exportar, se abrirá una ventana de exportación la cual nos permite realizar los parámetros de exportación, para nuestro diseño de página web, teniendo en cuenta el principal medida el espacio de colocar imágenes en subcarpeta, ya que de esta forma el archivo será visible en formato HTML.


21.  Imagen: Vemos ventana emergente exportar donde seleccionamos incluir áreas sin divisiones y colocar imágenes en subcarpeta.

Enseguida de seleccionar la exportación por ultimo damos clic en guardar, de inmediato nuestros archivos aparecerán con un icono de acuerdo del navegador en el que trabajemos, en este caso Firefox Mozilla.


22.  Imagen: Vemos carpeta de ubicación de nuestro diseño ya guardado.

Teniendo en cuenta que después de haber exportado nuestro diseño a archivos HTML, en esta visualización no es posible realizar cambios, pero en Fireworks si es posible con nuestro archivo PNG.

Para visualizar nuestro archivo de modo de pagina web simplemente hacemos doble clic sobre el archivo index.


23.  Imagen: Vemos diseño en forma de pagina web.

De tal forma que se abrirá una pestaña tal cual si nuestro diseño ya hubiese sido subido a internet, pero la dirección que aparece es la ubicación de nuestros archivos HTML en nuestro equipo.


24.  Imagen: Vemos dirección archivo HTML en nuestro equipo.

lunes, 21 de mayo de 2012

FIREWORS CS4

Esta es una pequeña introducción sobre el manejo del editor de paginas web Fireworks CS4.

Utilización de Fireworks

Es un programa versátil para crear, editar y optimizar gráficos Web. Permite crear y editar imágenes de mapa de bits y vectoriales, diseñar efectos Web, como rollovers y menús emergentes, recortar y optimizar elementos gráficos para reducir su tamaño de archivo y automatizar tareas repetitivas para ahorrar tiempo. Es posible exportar o guardar un documento como un archivo JPEG, un archivo GIF o un archivo de otro formato. Estos archivos pueden guardarse junto con archivos HTML que contengan tablas HTML y código JavaScript para facilitar su uso en Internet.

Para ver un tutorial de vídeo donde se presentan los conceptos básicos de Fireworks, visite


Interfaz de Fireworks.



Dibujar y editar objetos vectoriales y de mapas de bits

El panel Herramientas de Fireworks presenta diferentes secciones que contienen herramientas de dibujo y edición de vectores y mapas de bits. La herramienta seleccionada determina si el objeto creado es un vector o un mapa de bits. Una vez dibujado un objeto o texto, puede utilizar una gran variedad de herramientas, efectos, comandos y técnicas para realzar las imágenes o para crear botones de navegación interactivos.

También puede importar y editar imágenes en JPEG, GIF, PNG, PSD y muchos otros formatos de archivo.

Abrir un documento de Fireworks

Para abrir un archivo sin sobrescribir la versión anterior, seleccione Abrir como Sin título y después guarde el archivo con un nombre diferente.



Abrir un documento cerrado recientemente

1 Seleccione Archivo > Abrir reciente.
2 Seleccione un archivo en el submenú.


Abrir un archivo cerrado recientemente cuando no hay ningún archivo abierto

Haga clic en el nombre del archivo en la página de inicio.

Abrir imágenes creadas en otras aplicaciones

Es posible abrir archivos creados en aplicaciones o formatos de archivo diferentes como Photoshop, Adobe FreeHand, Adobe Illustrator, WBMP, EPS, JPEG, GIF y GIF animado.

Cuando se abre un archivo de formato distinto de PNG con Archivo > Abrir, se crea un nuevo documento PNG de Fireworks basado en el archivo abierto. Puede utilizar todas las características de Fireworks para editar la imagen. A continuación, puede seleccionar Guardar como para almacenar su trabajo como un nuevo archivo PNG de Fireworks (o con otro formato de archivo).

En ciertas ocasiones, puede guardar el archivo en su formato original. Si lo hace, la imagen se alisa en una única capa y el usuario no podrá editar las funciones específicas de Fireworks que agregó a la imagen.