Este documento explica la diferencia entre vectores y píxeles, los cuales son las dos formas básicas de representar imágenes digitales. Los píxeles son unidades individuales que componen una imagen, mientras que los vectores usan fórmulas matemáticas para dibujar líneas y curvas. Cada uno tiene ventajas y desventajas dependiendo del tipo de imagen y uso final. Es importante conocer ambos formatos para usar las herramientas digitales de manera más efectiva.

1. photoshop

2. www.izaskunsaez.es
@isaezdesign
www.linkedin.com/in/izaskunsaez

3. V
Vs
P

4. photoshop
Vectores
Píxeles
@isaezdesign

5. photoshop
Es necesario conocer la difrenecia entre Vectores y
Píxeles porque....:
1. Conocer las diferencias entre ambos
2. Conocer sus VENTAJAS y DESVENTAJAS
3. Los usar´éis de manera más eficiente.
4. Es mejor conocer qué software trabaja con pixel y
cual con vectores
5. Que no conocerlos bien puede derivar en errores
@isaezdesign

6. photoshop
Vectores
V
Píxeles
V
P
@isaezdesign
P

7. Píxeles
P
P

8. photoshop
¿Qué son los píxeles?
@isaezdesign

9. photoshop
Un pixel es:
Se trata de la unidad mínima que compone
una imagen
@isaezdesign

10. photoshop
@isaezdesign

11. photoshop
@isaezdesign

12. photoshop
@isaezdesign

13. photoshop
@isaezdesign

14. photoshop
Formatos
en píxeles
mas comunes
@isaezdesign

15. photoshop
JPG
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ícas
digitales
@isaezdesign

16. photoshop
Formato de compresión sin pérdida
PNG
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)
@isaezdesign

17. photoshop
Formato de compresión sin pérdida
hasta 256 colores (paleta restringida)
GIF
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.
@isaezdesign

18. photoshop
Formato estándar de Windows
BMP
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.
@isaezdesign

19. 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 determinará la calidad final del documento.
EDICIÓN PRECISA: Gracias a programas como photoshop podemos editar cada cuadradito de estos por lo que el abanico de posibilidades 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

20. 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 imagen del archivo y el peso, ya que si estamos trabajando en un archivo para web un peso elevado puede lastrar nuestra usabilidad.
@isaezdesign

21. Software de pago:
Photoshop
de Adobe
Corel
Draw!
Pixelmator
IOS
Software gratuito:
Gimp
Paint.Net
KRITA
Darktable

22. photoshop
Con programas tipo
photoshop podemos
hacer...
@isaezdesign

23. photoshop
fotomontaje y retoque
by Neal Banerjee

24. photoshop
Ilustración digital

25. photoshop
Diseño web y app
imagen extraída de Alfoart.com

26. photoshop
Creación de escenarios/personajes videojuegos

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

28. photoshop
@isaezdesign

29. photoshop
Vectores
V
V
@isaezdesign

30. ¿Qué son los vectores?

31. photoshop
Las imágenes vectoriales
NO se construyen a base de píxeles
sino de fórmulas matemáticas
que dibujan puntos, líneas y curvas
para crear imágenes.
@isaezdesign

32. photoshop
Formatos
vectoriales
mas comunes
@isaezdesign

33. photoshop
Archivos encapsulados PostScript
EPS
Enfocado a materiales impresos
Compatible entre Mac y PC
Problemas de exportación
En cierto desuso
@isaezdesign

34. photoshop
PDF
Posibilita el uso de vectores
Sigue siendo Editable (imagen y
texto)
Es Importante marcar en el programa que estemos usando “preservar
capacidad de edición...”
@isaezdesign

35. photoshop
Para que un PDF sea editable de nuevo con
Illustrator no olvidéis marcar esta casilla a la hora
de GUARDAR COMO

36. photoshop
Archivo propio de Photoshop
PSD
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
@isaezdesign

37. photoshop
Gráficos Vectoriales Escalables
SVG
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
@isaezdesign

38. 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 almacenarse mucha menos información y por lo tanto será más sencillo mover 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

39. 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 hacer 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 requerirá más recursos del ordenador porque los datos que describen el gráfico vectorial deben ser procesados para formar la imagen
final. Si el volumen de datos es elevado se puede volver lenta la representación de la imagen en pantalla, incluso trabajando con imágenes pequeñas.
@isaezdesign

40. photoshop
Los vectores se utilizan
sobre todo para la
creación de:
@isaezdesign

41. photoshop
Logotipos
@isaezdesign

42. photoshop
Tipografías
Aa
@isaezdesign

43. photoshop
Gráficos de videojuegos
sobre todo para plataformas
móviles
@isaezdesign

44. photoshop
Ilustración digital
@isaezdesign

45. photoshop
Diseño de interfaces
@isaezdesign

46. photoshop
¿Qué programas
vectoriales hay?
@isaezdesign

47. Software de pago:
Illustrator,
de Adobe.
Corel
Draw!
Freehand
Macromedia
Software gratuito:
Skencil
Inkscape
Sketch
IOS

48. ¿Qué sucede si ampliamos
una imagen vectorial?

49. photoshop
pIO
os
bem
¡Pro
tar
por
a ex
SD!
aP
mos
¡Probe tar
r
a expo !
a PSD
#photoshopIO
@isaezdesign
¡Hola! Hi!
Kaixo!
¡Hola! Hi!
Kaixo! #p

50. photoshop
Fotografía y retoque,
diseño web/app, ilustración
ilustración, logotipos o marcas,
interfaces web/app...etc.
@isaezdesign

51. photoshop
¿Vectores en Photoshop?
¡Si!
@isaezdesign

52. photoshop
Creando vectores
directamente en photoshop
@isaezdesign

53. photoshop
Herramienta de photoshop para crear formas
basadas en píxeles
1
Herramienta de photoshop para crear formas
basadas en vectores
@isaezdesign
2

54. photoshop
EXPORTANDO
desde illustrator a
PSD
@isaezdesign

55. photoshop
PODEMOS
EXPORTAR
desde illustrator
a PSD
PEGAR
directamente
en Photoshop
@isaezdesign
Trabajar en photoshop
con
objetos inteligentes

56. photoshop
EXPORTANDO
desde illustrator
a PSD
@isaezdesign

57. photoshop
EXPORTA GRUPOS
CAPAS ANIDADAS
PODER EDITAR
TEXTO EN
PHOTOSHOP
SELECCIONAR CUANDO
TRABAJAMOS
CON CAPAS TRANSPARENTES
@isaezdesign

58. photoshop
Trabajar en photoshop
con
OBJETOS INTELIGENTES
@isaezdesign

59. photoshop
PUEDES:
• Realizar transformaciones
NO DESTRUCTIVAS
puedes cambiar escala, rotarla, deformarla sin perder calidad ni datos porque LAS TRANSFORMACIONES NO
AFECTAN AL ARCHIVO ORIGINAL
• TRABAJAR CON DATOS
VECTORIALES
• Aplicar FLITROS NO DESTRUCTIVOS que se pueden editar siempre
que se quiera
@isaezdesign

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

61. photoshop
El OBJETO INTELIGENTE permite:
Cambiar escala
Cambiar
Proporción
Perspectiva
Aplicar filtro
Máscaras
@isaezdesign

62. photoshop
Estas sí se pueden
usar
Estas no se pueden
usar
@isaezdesign
El OBJETO INTELIGENTE
no permite:
Usar las herramientas de
dibujo:
pinceles
retocar color

63. photoshop
Aún así
Píxel = fotografías/muy realista
gran detalle de color
pero pérdida de calidad al ampliar.
Vector = fuentes / logotipos/ilustraciones
escalables sin perder la calidad
pero de limitado detalle
@isaezdesign

64. photoshop
Por lo que
Píxel = fotografía/muy realista
PHOTOSHOP
Vector = fonts/logotipos/escalable
PROGRAMA VECTORIAL
@isaezdesign

65. Lo más adecuado
Es trabajar cada cosa con su programa
y modo adecuado, sin pelearse,
sino colaborando y conociendo todas
las herramientas disponibles.

66. Vectores
y
Píxeles
V
P
V
P

67. V
FIN
P

68. photoshop
@isaezdesign