hangout photoshopio vector_pixel

photoshop

www.izaskunsaez.es

@isaezdesign

www.linkedin.com/in/izaskunsaez

VsV P

@isaezdesign

photoshop

PíxelesVectores

@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

@isaezdesign

photoshop

PíxelesVectores

VPV P

Píxeles

P P

@isaezdesign

photoshop

¿Qué son los píxeles?

@isaezdesign

photoshop

Un pixel es:

Se trata de la unidad mínima que compone una imagen

@isaezdesign

photoshop

@isaezdesign

photoshop

@isaezdesign

photoshop

@isaezdesign

photoshop

@isaezdesign

photoshop

Formatosen píxeles

mas comunes

@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

@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

@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

@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

@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.

@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.

Photoshop de Adobe

Corel Draw!

PixelmatorIOS

Gimp Paint.Net KRITA Darktable

Software de pago:

Software gratuito:

@isaezdesign

photoshop

Con programas tipophotoshop podemos

hacer...

photoshopfotomontaje y retoque

by Neal Banerjee

photoshop Ilustración digital

photoshop

Diseño web y app

imagen extraída de Alfoart.com

photoshop

Creación de escenarios/personajes videojuegos

¿Qué sucede si ampliamos una imagen basada en píxeles?

@isaezdesign

photoshop

@isaezdesign

photoshop

Vectores

V V

¿Qué son los vectores?

@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.

@isaezdesign

photoshop

Formatosvectoriales

mas comunes

@isaezdesign

photoshop

Archivos encapsulados PostScript

Enfocado a materiales impresos

Compatible entre Mac y PC

Problemas de exportación

En cierto desuso

EPS

@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...”

PDF

photoshopPara que un PDF sea editable de nuevo con

Illustrator no olvidéis marcar esta casilla a la hora de GUARDAR COMO

@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

@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

@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.

@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.

@isaezdesign

photoshop

Los vectores se utilizan sobre todo para la

creación de:

@isaezdesign

photoshop

Logotipos

@isaezdesign

photoshop

Tipografías

Aa

@isaezdesign

photoshop

Gráficos de videojuegossobre todo para plataformas

móviles

@isaezdesign

photoshop

Ilustración digital

@isaezdesign

photoshop

Diseño de interfaces

@isaezdesign

photoshop

¿Qué programasvectoriales hay?

Illustrator, de Adobe.

Corel Draw!

FreehandMacromedia

SketchIOS

Skencil Inkscape

Software de pago:

Software gratuito:

¿Qué sucede si ampliamos una imagen vectorial?

@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

@isaezdesign

photoshop

Fotografía y retoque,diseño web/app, ilustración

ilustración, logotipos o marcas,interfaces web/app...etc.

@isaezdesign

photoshop

¿Vectores en Photoshop?

¡Si!

@isaezdesign

photoshop

Creando vectoresdirectamente en photoshop

@isaezdesign

photoshopHerramienta de photoshop para crear formas basadas en píxeles

Herramienta de photoshop para crear formas basadas en vectores

1 2

@isaezdesign

photoshop

EXPORTANDOdesde illustrator a

PSD

@isaezdesign

photoshop

EXPORTARdesde illustrator

a PSD

PEGARdirectamenteen Photoshop

Trabajar en photoshop con

objetos inteligentes

PODEMOS

@isaezdesign

photoshop EXPORTANDOdesde illustrator

a PSD

@isaezdesign

photoshop

EXPORTA GRUPOSCAPAS ANIDADAS

SELECCIONAR CUANDOTRABAJAMOS

CON CAPAS TRANSPARENTES

PODER EDITARTEXTO EN

PHOTOSHOP

@isaezdesign

photoshop

Trabajar en photoshopcon

OBJETOS INTELIGENTES

@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

@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

@isaezdesign

photoshop

El OBJETO INTELIGENTE permite:

Cambiar escalaCambiar

ProporciónPerspectivaAplicar filtro

Máscaras

El OBJETO INTELIGENTE no permite:

Usar las herramientas de dibujo:pincelesretocar color

Estas sí se pueden usar

Estas no se pueden usar

@isaezdesign

photoshop

@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

@isaezdesign

photoshop

Por lo que

Píxel = fotografía/muy realistaPHOTOSHOP

Vector = fonts/logotipos/escalablePROGRAMA VECTORIAL

Lo más adecuado

Es trabajar cada cosa con su programa y modo adecuado, sin pelearse,

sino colaborando y conociendo todas las herramientas disponibles.

VV

PP

Vectoresy

Píxeles

V PFIN

photoshop

@isaezdesign