imágenes - informaticaabece.files.wordpress.com · •la mayoría de imágenes en internet son de...
Post on 21-Sep-2018
218 Views
Preview:
TRANSCRIPT
-
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
top related