imagenes.notebook

1

January08,2013

dic614:13

ImgenesTema 5

Sonia Lafuente Martnez

dic614:14

Tipos de formatos de imgenes digitales

BMP (Mapa de bits)

Ventajas

Calidad de imgen ntida y clara No hay distorsin a la hora de hacer zoom

JPEG (Joint Photographic Experts Group)

Ventajas

Formato ms conocido. La mayora de imgenes en internet son de este tipo

Desventajas

Es pesado --> No recomendable para pginas webs

Desventajas

La calidad de la imagen se pierde y su nitidez tambin porque es un formato de compresin

imagenes.notebook

2

January08,2013

dic614:36

PNG (Portable Network Graphic)

Ventajas

Parecido al BMP pero menos pesado Maneja la transparencia Se recomienda para imgenes compuestas.

GIF (Graphics Interchange Format)

Ventajas

Maneja transpareciaSe ven en todos los navegadoresSe pueden crear GIFS animados

Desventajas

Algunos navegadores antiguos de internet no visualizan estas imgenes.

Tipos de formatos de imgenes digitales

dic615:05

1.Como consigue el formato JPG reducir el peso de una imagen?

2. Cul es el uso general del formato JPG?

3. Tiene prdidas el formato GIF?

4. Cita los usos del formato GIF.

5. Qu formatos soportan trasparencia?

6. Por qu crees que el formato BMP apenas se usa?

7. Cules son las ventajas del formato PNG?

Ejercicios de formatos

imagenes.notebook

3

January08,2013

dic615:05

Ejercicios de formatos1. Como consigue el formato JPG reducir el peso de una imagen?

Dividiendo la imagen y comprimindola por separado.

2. Cul es el uso general del formato JPG?

Se usa como formato estndar en las pginas web.

3. Tiene prdidas el formato GIF?

No tiene prdidas.

4. Cita los usos del formato GIF.

Se puede poner el fondo transparente y hacer gif animados.

dic615:05

Ejercicios de formatos

5. Qu formatos soportan trasparencia?

GIF y PNG.

6. Por qu crees que el formato BMP apenas se usa?

Porque pesa mucho.

7. Cules son las ventajas del formato PNG?

Que se pueden poner los colores transparentes, no tiene prdidas y ocupa poco.

imagenes.notebook

4

January08,2013

dic615:05

Ejercicios de formatos para casaDeberabrirseelarchivoroyrob06.bmpconelprograma"Gimp".Paraaccederalarchivodeberdescomprimirselacarpeta.

1.SeguardarelarchivoconformatoJPG(Archivo,Guardarcomo...),manteniendoelmismonombreyenlamismacarpetaqueanteriormente.Seemplearndiferentesgradosdecompresin,0,3,6,9,12encadacasoalnombredelarchivoseleaadirelindicativodelgradodecompresin(0,3,6,9,12).

2.Trascerrarlaimagenanterior(obsrvesequetienelaextensinJPG),seabrirdenuevolainicial(royrob06.bmp)paraguardarlaconformatoGIF.

3.Unavezmssecerrarlaimagenanteriorparaabrir,denuevo,ejm05_GX.bmp.EstavezseguardarenformatoPNG.

dic615:05

Ejercicios de formatos para casaAhorarespondealassiguientespreguntas:

1.Cuntoocupaelarchivoobjetodelejercicio(KB.)?

2.AlguardarelarchivoenformatoJPG,cuntoocupa?(KB)

3.AlguardarelarchivoenformatoGIF,cuntoocupa?(KB)

4.AlguardarelarchivoenformatoPNG,cuntoocupa?(KB)

5.Quformatoofreceunamayorcalidadglobal?(puederealizarseunzoomparacomparar)

6.Quformatoofreceunamenorcalidadglobal?(puederealizarseunzoomparacomparar)

7.Quformatoofreceunamejorrelacincalidad/tamao?(puederealizarseunzoomparacomparar)

imagenes.notebook

5

January08,2013

dic615:54

Anotaeltamaodelaimagen1.jpg_____x_______

Anotaeltamaodelaimagenqueapareceenlacabeceradelwordpress_____x_______

Manejar Cabeceras

dic615:54

Finalmenteescalalaimagen1altamaodelaimagendelacabeceraparapoderlaacoplaralli.

1.AbrolaimagenconelGIMP.

Archivo>Abrir

2.Pulsobotnderechosobrelaimagen>Imagen>Escalarimagen

3.Escribolasmedidas940x198.

4.Guardolaimagen.

PulsoArchivo>Exportar

Seleccionodondelaquieroguardaryenquformato.Elegirguardarlafotoenwamp>www>wordpress>wpcontent>themes>twentyten>images>headers

Manejar Cabeceras

imagenes.notebook

6

January08,2013

dic615:54

Subimos la nueva imagen para verla en nuestra pgina

Manejar Cabeceras

dic615:54

Archivo>Nuevoylepongodemedidas940x198,esdecirwidth:940yheight:198

Manejar Cabeceras

imagenes.notebook

7

January08,2013

dic615:54

Ejercicio1:Realizalasiguientecabecera

Ejercicio2:Modifcalaparaquequedeas.PISTA:Cambiaeltipodetipografa

Manejar Cabeceras

dic615:05

Nociones bsicas: Quitar ojos rojos

1.- Abrir la imagen con el GIMP2.- Seleccionar el rea de los ojos3.- Filtros-->Realza --> Quitar ojos rojos

imagenes.notebook

8

January08,2013

dic615:54

Nociones bsicas: Quitar fondos

1.AbrimoslaimagenconelGIMPArchivo>Abrir

2.AadimosCanalAlfaPulsamossobrelacapaquecontienelaimagenelbotnderecho>AadirCanalAlfa

3.EliminamoselfondoSeleccionolavaritamgica>Pulsoenelfondodelaimagen>PulsoSuprimir

dic615:54

Nociones bsicas: Quitar fondos

1.Aadounanuevacapaconelcolorquequieraquetenga.

imagenes.notebook

9

January08,2013

dic615:54

Nociones bsicas: Difuminar bordes

1.AbrimoslaimagenconelGIMPArchivo>Abrir

2.SeleccionarFiltros>Decorativos>Difuminarbordes

dic615:54

Nociones bsicas: Pasar imagen a Blanco y Negro

1.AbrimoslaimagenconelGIMPArchivo>Abrir

2.SeleccionarImagen>Modo>EscalasdeGrises

imagenes.notebook

10

January08,2013

dic615:54

Nociones bsicas: Alteracin de los parmetros

1.AbrimoslaimagenconelGIMPArchivo>Abrir

2.SeleccionaHerramientas>Herramientasdecolor>TonoySaturacin

Tono: Es lo que define un color. Un objeto de color rojo tiene tono rojo.

Luminosidad: Grado de claridad u oscuridad de un color.

Si mezclamos un color con blanco --> + luminosidad Si mezclamos un color con negro --> - luminosidad

Saturacin: Pureza de un color.

Si mezclamos un color puro con otros colores --> - saturacin

dic615:54

Nociones bsicas: Modificando imgenes

1.- Abrimos imagen "nia_bebiendo.jpg"2.- Pulsamos sobre la lupa y aumentamos la pintada de la pared.3.- Pulsamos sobre el icono de "Herramienta de clonado". (Para pintar usando patrones o regiones de la imagen)4.- Pulsamos Ctrl y pulsamos una vez el botn izquierdo del ratn en cualquier punto cercano a la pintada para copiar dicha regin5.- Pulsar sobre la pintada que queremos borrar con el botn izquierdo

imagenes.notebook

11

January08,2013

dic615:54

Nociones bsicas: Retocando imgenes I

1.Seleccionarelicono"Tijerasdeseleccin"2.Pulsarsobreelcontornodelania.3.Cerrarlaseleccin(Cuantomscercaestenlospuntosmejorcalidad)4.Pulsarsobreelcentrodelaseleccinyesperaraquenossalgalaseleccinconuncontornodiscontinuo.5.Cortarlaimagen

dic615:54

Nociones bsicas: Retocando imgenes II

6.Abrimoslanuevaimagen"playa_malaga"7.Pegamoslaseleccinsobrelaimagen8.Porltimoaplicamosunfiltrodeluz.Filtros>LucesySombras>Destellosdelente

imagenes.notebook

12

January08,2013

dic615:54

Crear botones

Archivo>Crear>Botones

Botnconlasesquinasredondeadas

Botnredondeado

Botnsimplebiselado

Escalarimagenparaaumentareltamaodelbotn:

Imagen>Escalar

dic615:54

Crear logotipos predefinidos

Archivo>Crear>Logotipos

ElegimosporelejemploCromar.

Entextoponemoselnombredelaempresa.Luegopulsaraceptar.

imagenes.notebook

13

January08,2013

dic615:54

Modificar logotipos predefinidos

Modificoelcolordefondodellogo.

1.Seleccionolacapadefondo.2.Cambioelcolor3.Seleccionoelcubodepintura4.Pulsosobreelrectangulo.

dic615:54

1.Archivo>Nuevo2.Opcionesavanzadas>Rellenarcontransparencia

3.SeleccindeherramientaElptica

4.Hagoelcirculo5.LedoycolorBlancoqueserelborde

Crear un logo

imagenes.notebook

14

January08,2013

dic100:45

6.Pulsosobreelcrculo.

7.Seleccionar>Encoger(shrink)yelijo7

8.Pulsosobreelcrculo9.EscribotextoSTconuntamaogrande10.LoguardocomounPNGexportandolo

Crear Logo

dic100:56

Crear Logo

imagenes.notebook

15

January08,2013

dic615:54

Texto adornado

Creaunaimagenconfondoblancoytamao300x200pxeles. Utilizaeltipodeletraquetegusta,contamaode100pxelesyenrojoescribeelnombredetuempresa. Duplicaeltextoypintalonegro. AplicaelfiltrodeDesenfoquegaussianoalacapadetextorojo. Mueveeltextoennegroabajoparaqueseveacomounrelieve.

dic615:54

Texto con borde

Seleccionaremoslaherramientadetexto. Pulsosobrelacapadeltextoyseleccionocrearunarutaapartirdeltexto. Lacapatransparentelacolocamosdebajodelacapadetexto. SeleccionamosMen>Seleccionar>APartirdeunaRuta. SeleccionamosMenu>Seleccionar>Agrandar[Grow] Elegimos3pxelesdeanchura Elijouncoloryrellenoelbordeconelcubodepintura.

imagenes.notebook

16

January08,2013

dic615:54

Realizar Fotomontaje

Abrimoslacapadeosopolar. Conlaherramientadetijerasdeseleccinrecortarelosodelaformamsprecisa. Copiarlaseleccinypegarlaenunanuevacapaconfondotransparente.Abrimoslacapadelapasareladeplaya. Creamosunanuevacapatransparenteypegamosenellalaseleccindeloso. EscalamoslacapaflotantePulsandobotnderecho>Escalarcapaymovemoselosohastacolocarloenlaposicincorrectayconeltamaoadecuado. SeleccionamoslacapadondeestaelosoFiltros>Lucesysombras>Sombraarrojada.conopacidaddel60%ypermitiendoelredimensionado.

dic615:54

Imagen con animacin

Abrimoslafotodelaflor,seleccionamoslaflor,lacopiamosylapegamos. Escalamoslaimagena200x200 Vamosduplicandocapasyencadacapaquitamosunptalo.(losborramosconlagoma) Dejamostodasvisiblesyguardamoslaimagencomo.gif Tendremosqueguardarlaopcinde"guardarcomoanimacin"conunretardoentrefotogramasde400yconlaopcin"uncuadroporcapa(reemplazar)".

Ejemplosdegifs:imageneso.blogspot.com.es/2011/02/animacionesgifconphotoshop33deeso.html?m=1

imagenes.notebook

17

January08,2013

dic615:54

Ejercicio: Composicin libre

Utilizandolastcnicasaprendidaseneltemaelaboracontresimgenesfotomontajesdetemticalibreapartirdeunaovariasimgenesdigitales(quepuedesconseguirenInternet).

Guardalasimgenesoriginalesyelresultadodeltrabajoparasucorreccin.

dic615:54

Prototipado: Cacoo

Registrarse en la aplicacin de Cacoo:

https://cacoo.com

Para ello es posible utilizar el email y la contrasea de Google o de Facebook. Si no se tiene habr que crearse una cuenta en Cacoo.

https://cacoo.com

imagenes.notebook

18

January08,2013

dic615:54

Prototipado: Cacoo

Seleccionamos de las plantillas las de la carpeta "Web". Elegimos Wireframe donde se encuentran los paneles.Elijo un Panel que ser el cuadro de la pgina web y lo arrastro hacia la zona blanca.

dic615:54

Prototipado: Cacoo

Alcuadroblancoledoylasmedidasdeunapginawebnormal.Parasaberlasmedidasdeunawebcorrientepuedohacerunacapturadepantalladelawebyvercuantoanchoyaltotienen.Pongo1000pxdeanchoy700pxdealto.

Siquieroquelapginawebtengacolordefondoloselecciono.

Loidealesqueseablancaodeuntonoclaro.

https://cacoo.com

imagenes.notebook

19

January08,2013

dic615:54

Prototipado: Cacoo

Insertamos la cabecera que hemos creado previamente. Pulsamos la opcin "Insertar una imagen desde su computadora".

Ajustamoslacabeceraalazonasuperiordelcuadroquehemoscreadoquerepresentalaweb.

dic615:54

Prototipado: Cacoo

Inserta todos los elementos dejando un prototipo de web como el siguiente:

Adjuntos

Prototipo

SMART Notebook

Pgina 1Pgina 2Pgina 3Pgina 4Pgina 5Pgina 6Pgina 7Pgina 8Pgina 9Pgina 10Pgina 11Pgina 12Pgina 13Pgina 14Pgina 15Pgina 16Pgina 17Pgina 18Pgina 19Pgina de adjuntos 1