hangout photoshopio vector_pixel
DESCRIPTION
Si quieres entender la diferencia entre píxels y vectores no te pierdas esta presentación.TRANSCRIPT
![Page 1: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/1.jpg)
photoshop
![Page 2: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/2.jpg)
www.izaskunsaez.es
@isaezdesign
www.linkedin.com/in/izaskunsaez
![Page 3: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/3.jpg)
VsV P
![Page 4: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/4.jpg)
@isaezdesign
photoshop
PíxelesVectores
![Page 5: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/5.jpg)
@isaezdesign
photoshop
Es necesario conocer la difrenecia entre Vectores y Píxeles porque....:
1. Conocer las diferencias entre ambos2. Conocer sus VENTAJAS y DESVENTAJAS3. Los usar´éis de manera más eficiente.4. Es mejor conocer qué software trabaja con pixel y
cual con vectores5. Que no conocerlos bien puede derivar en errores
![Page 6: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/6.jpg)
@isaezdesign
photoshop
PíxelesVectores
VPV P
![Page 7: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/7.jpg)
Píxeles
P P
![Page 8: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/8.jpg)
@isaezdesign
photoshop
¿Qué son los píxeles?
![Page 9: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/9.jpg)
@isaezdesign
photoshop
Un pixel es:
Se trata de la unidad mínima que compone una imagen
![Page 10: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/10.jpg)
@isaezdesign
photoshop
![Page 11: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/11.jpg)
@isaezdesign
photoshop
![Page 12: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/12.jpg)
@isaezdesign
photoshop
![Page 13: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/13.jpg)
@isaezdesign
photoshop
![Page 14: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/14.jpg)
@isaezdesign
photoshop
Formatosen píxeles
mas comunes
![Page 15: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/15.jpg)
@isaezdesign
photoshop
Formato de compresión con pérdida para reducir el peso del archivo final
La pérdida de calidad es acumulativa si se comprime y descomprime varias veces
Si queremos calidad el archivo pesará
No admite transparencia (canal Alfa)
El más común en cámaras fotografícasdigitales
JPG
![Page 16: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/16.jpg)
@isaezdesign
photoshop
Formato de compresión sin pérdida
Excelente compresión
Mejor calidad que el GIF y aunque mayor peso: Hay de 8 y 24 bits
Respeta mejor que el GIF la calidad de la imagen
Ideal para web
Soporta transparencia (canal alfa)
PNG
![Page 17: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/17.jpg)
@isaezdesign
photoshop
Formato de compresión sin pérdidahasta 256 colores (paleta restringida)
Soportan animaciones
Soportan transparencias (canal Alfa)
Ventaja: Poco peso por lo que es ideal para web
Desventaja: No lo uses para fotografía por su escasa calidad.
GIF
![Page 18: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/18.jpg)
@isaezdesign
photoshop
Formato estándar de Windows
No suelen comprimirse por lo que no sufre pérdida de calidad
Ventaja: guarda mucha infomación de la imagen
Desventaja: peso/tamaño del archivo muy grande.
Por su peso no se usa mucho.
BMP
![Page 19: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/19.jpg)
@isaezdesign
photoshop
PROS DE IMÁGENES BASADAS EN PÍXELES:
RIQUEZA DE DETALLES: esto nos lo da la resolución, ¿os suena lo de píxeles por pulgada? (ppp), esto nos dice qué cantidad de píxeles hay en una pulgada y esto nos dirá por tanto la resolución y determi-nará la calidad final del documento.
EDICIÓN PRECISA: Gracias a programas como photoshop pode-mos editar cada cuadradito de estos por lo que el abanico de posibi-lidades es muy grande y los resultados que se pueden obtener muy variados. Pero deberemos ser precavidos y conservar siempre el archivo/imagen original para poder volver a él.
![Page 20: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/20.jpg)
@isaezdesign
photoshop
CONTRAS DE IMÁGENES BASADAS EN PÍXELES:
PIXELADO: hay que trabajar a la resolución/ tamaño de salidad final para evitar la pérdida de calidad en el escalado.
PESO DEL ARCHIVO ALTO: habrá que controlar la calidad de ima-gen del archivo y el peso, ya que si estamos trabajando en un archi-vo para web un peso elevado puede lastrar nuestra usabilidad.
![Page 21: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/21.jpg)
Photoshop de Adobe
Corel Draw!
PixelmatorIOS
Gimp Paint.Net KRITA Darktable
Software de pago:
Software gratuito:
![Page 22: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/22.jpg)
@isaezdesign
photoshop
Con programas tipophotoshop podemos
hacer...
![Page 23: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/23.jpg)
photoshopfotomontaje y retoque
by Neal Banerjee
![Page 24: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/24.jpg)
photoshop Ilustración digital
![Page 25: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/25.jpg)
photoshop
Diseño web y app
imagen extraída de Alfoart.com
![Page 26: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/26.jpg)
photoshop
Creación de escenarios/personajes videojuegos
![Page 27: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/27.jpg)
¿Qué sucede si ampliamos una imagen basada en píxeles?
![Page 28: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/28.jpg)
@isaezdesign
photoshop
![Page 29: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/29.jpg)
@isaezdesign
photoshop
Vectores
V V
![Page 30: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/30.jpg)
¿Qué son los vectores?
![Page 31: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/31.jpg)
@isaezdesign
photoshop
Las imágenes vectorialesNO se construyen a base de píxeles
sino de fórmulas matemáticasque dibujan puntos, líneas y curvas
para crear imágenes.
![Page 32: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/32.jpg)
@isaezdesign
photoshop
Formatosvectoriales
mas comunes
![Page 33: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/33.jpg)
@isaezdesign
photoshop
Archivos encapsulados PostScript
Enfocado a materiales impresos
Compatible entre Mac y PC
Problemas de exportación
En cierto desuso
EPS
![Page 34: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/34.jpg)
@isaezdesign
photoshop
Posibilita el uso de vectores
Sigue siendo Editable (imagen y texto)
Es Importante marcar en el progra-ma que estemos usando “preservar capacidad de edición...”
![Page 35: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/35.jpg)
photoshopPara que un PDF sea editable de nuevo con
Illustrator no olvidéis marcar esta casilla a la hora de GUARDAR COMO
![Page 36: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/36.jpg)
@isaezdesign
photoshop
Archivo propio de Photoshop
Posibilita el uso de vectores
Sigue siendo Editable(capas, imagen y texto)
Podemos guardarlo desde photoshop y también desde illustrator para seguir trabajándolo en photoshop
PSD
![Page 37: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/37.jpg)
@isaezdesign
photoshop
Gráficos Vectoriales Escalables
Implementándo sus uso en DISEÑO WEB para retina y responsive
Son independientes de resolución de la pantalla
Puedes abrirlo en muchos programas de edición vectorial en tre los de software libre el más popular es el Inskcape
SVG
![Page 38: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/38.jpg)
@isaezdesign
photoshop
PROS DE IMÁGENES BASADAS EN VECTORES:
ESCALABLE HASTA EL INFINITO... Y MÁS ALLÁ: gracias a que los vectores no trabajan con píxeles y por lo tanto no dependen de la resolución se PUEDEN ESCALAR sin ningún problema.
MENOR PESO DEL DOCUMENTO: El tamaño final del documento en vectores será menor que uno de píxeles ya que tiene que almace-narse mucha menos información y por lo tanto será más sencillo mo-ver un archivo vectorial.
EDITABLE: los archivos guardados como vectoriales conservan siempre la capacidad de edición sin pérdida de calidad, consevando las formas originales y pudiendo modificar los objetos que contiene.
![Page 39: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/39.jpg)
@isaezdesign
photoshop
CONTRAS DE IMÁGENES BASADAS EN VECTORES:
DETALLES LIMITADOS: en general no son adecuados para crear imágenes super complejas y ultra detalladas 8aunque se pueda ha-cer con mucha paciencia) de manera que no podremos igualar al detalle de una imagen fotográfica.
Aunque pesan poco, si se trata de un archivo muy complejo re-querirá más recursos del ordenador porque los datos que descri-ben el gráfico vectorial deben ser procesados para formar la imagen final. Si el volumen de datos es elevado se puede volver lenta la re-presentación de la imagen en pantalla, incluso trabajando con imáge-nes pequeñas.
![Page 40: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/40.jpg)
@isaezdesign
photoshop
Los vectores se utilizan sobre todo para la
creación de:
![Page 41: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/41.jpg)
@isaezdesign
photoshop
Logotipos
![Page 42: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/42.jpg)
@isaezdesign
photoshop
Tipografías
Aa
![Page 43: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/43.jpg)
@isaezdesign
photoshop
Gráficos de videojuegossobre todo para plataformas
móviles
![Page 44: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/44.jpg)
@isaezdesign
photoshop
Ilustración digital
![Page 45: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/45.jpg)
@isaezdesign
photoshop
Diseño de interfaces
![Page 46: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/46.jpg)
@isaezdesign
photoshop
¿Qué programasvectoriales hay?
![Page 47: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/47.jpg)
Illustrator, de Adobe.
Corel Draw!
FreehandMacromedia
SketchIOS
Skencil Inkscape
Software de pago:
Software gratuito:
![Page 48: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/48.jpg)
¿Qué sucede si ampliamos una imagen vectorial?
![Page 49: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/49.jpg)
@isaezdesign
photoshop
¡Hola!Ka�o!¡Probemos
a exportar
a PSD!
Hi!
#photoshopIO ¡Hola!Ka�o!¡Probemos
a exportar
a PSD!
Hi!
#photoshopIO¡Hola!Ka�o!¡Probemos
a exportar
a PSD!
Hi!
#photoshopIO
![Page 50: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/50.jpg)
@isaezdesign
photoshop
Fotografía y retoque,diseño web/app, ilustración
ilustración, logotipos o marcas,interfaces web/app...etc.
![Page 51: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/51.jpg)
@isaezdesign
photoshop
¿Vectores en Photoshop?
¡Si!
![Page 52: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/52.jpg)
@isaezdesign
photoshop
Creando vectoresdirectamente en photoshop
![Page 53: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/53.jpg)
@isaezdesign
photoshopHerramienta de photoshop para crear formas basadas en píxeles
Herramienta de photoshop para crear formas basadas en vectores
1 2
![Page 54: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/54.jpg)
@isaezdesign
photoshop
EXPORTANDOdesde illustrator a
PSD
![Page 55: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/55.jpg)
@isaezdesign
photoshop
EXPORTARdesde illustrator
a PSD
PEGARdirectamenteen Photoshop
Trabajar en photoshop con
objetos inteligentes
PODEMOS
![Page 56: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/56.jpg)
@isaezdesign
photoshop EXPORTANDOdesde illustrator
a PSD
![Page 57: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/57.jpg)
@isaezdesign
photoshop
EXPORTA GRUPOSCAPAS ANIDADAS
SELECCIONAR CUANDOTRABAJAMOS
CON CAPAS TRANSPARENTES
PODER EDITARTEXTO EN
PHOTOSHOP
![Page 58: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/58.jpg)
@isaezdesign
photoshop
Trabajar en photoshopcon
OBJETOS INTELIGENTES
![Page 59: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/59.jpg)
@isaezdesign
photoshop
PUEDES:
• Realizar transformaciones NO DESTRUCTIVAS puedes cambiar escala, rotarla, defor-marla sin perder calidad ni datos por-que LAS TRANSFORMACIONES NO AFECTAN AL ARCHIVO ORIGINAL
• TRABAJAR CON DATOS VECTORIALES
• Aplicar FLITROS NO DESTRUCTI-VOS que se pueden editar siempre que se quiera
![Page 60: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/60.jpg)
@isaezdesign
photoshop
El OBJETO INTELIGENTE permite que SIEMPRE
tengas el archivo original para poder retocarlo:
- No perdemos información-Flujo de trabajo más ágil
![Page 61: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/61.jpg)
@isaezdesign
photoshop
El OBJETO INTELIGENTE permite:
Cambiar escalaCambiar
ProporciónPerspectivaAplicar filtro
Máscaras
![Page 62: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/62.jpg)
El OBJETO INTELIGENTE no permite:
Usar las herramientas de dibujo:pincelesretocar color
Estas sí se pueden usar
Estas no se pueden usar
@isaezdesign
photoshop
![Page 63: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/63.jpg)
@isaezdesign
photoshop
Aún así
Píxel = fotografías/muy realistagran detalle de color
pero pérdida de calidad al ampliar.
Vector = fuentes / logotipos/ilustraciones escalables sin perder la calidad
pero de limitado detalle
![Page 64: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/64.jpg)
@isaezdesign
photoshop
Por lo que
Píxel = fotografía/muy realistaPHOTOSHOP
Vector = fonts/logotipos/escalablePROGRAMA VECTORIAL
![Page 65: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/65.jpg)
Lo más adecuado
Es trabajar cada cosa con su programa y modo adecuado, sin pelearse,
sino colaborando y conociendo todas las herramientas disponibles.
![Page 66: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/66.jpg)
VV
PP
Vectoresy
Píxeles
![Page 67: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/67.jpg)
V PFIN
![Page 68: Hangout photoshopio vector_pixel](https://reader033.vdocuments.site/reader033/viewer/2022052301/556f1c2ed8b42ac8048b51e6/html5/thumbnails/68.jpg)
photoshop
@isaezdesign