Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Hangout photoshopio vector_pixel

707 Aufrufe

Veröffentlicht am

Si quieres entender la diferencia entre píxels y vectores no te pierdas esta presentación.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

Hangout photoshopio vector_pixel

  1. 1. photoshop
  2. 2. www.izaskunsaez.es @isaezdesign www.linkedin.com/in/izaskunsaez
  3. 3. V Vs P
  4. 4. photoshop Vectores Píxeles @isaezdesign
  5. 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. 6. photoshop Vectores V Píxeles V P @isaezdesign P
  7. 7. Píxeles P P
  8. 8. photoshop ¿Qué son los píxeles? @isaezdesign
  9. 9. photoshop Un pixel es: Se trata de la unidad mínima que compone una imagen @isaezdesign
  10. 10. photoshop @isaezdesign
  11. 11. photoshop @isaezdesign
  12. 12. photoshop @isaezdesign
  13. 13. photoshop @isaezdesign
  14. 14. photoshop Formatos en píxeles mas comunes @isaezdesign
  15. 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. 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. 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. 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. 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. 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. 21. Software de pago: Photoshop de Adobe Corel Draw! Pixelmator IOS Software gratuito: Gimp Paint.Net KRITA Darktable
  22. 22. photoshop Con programas tipo photoshop podemos hacer... @isaezdesign
  23. 23. photoshop fotomontaje y retoque by Neal Banerjee
  24. 24. photoshop Ilustración digital
  25. 25. photoshop Diseño web y app imagen extraída de Alfoart.com
  26. 26. photoshop Creación de escenarios/personajes videojuegos
  27. 27. ¿Qué sucede si ampliamos una imagen basada en píxeles?
  28. 28. photoshop @isaezdesign
  29. 29. photoshop Vectores V V @isaezdesign
  30. 30. ¿Qué son los vectores?
  31. 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. 32. photoshop Formatos vectoriales mas comunes @isaezdesign
  33. 33. photoshop Archivos encapsulados PostScript EPS Enfocado a materiales impresos Compatible entre Mac y PC Problemas de exportación En cierto desuso @isaezdesign
  34. 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. 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. 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. 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. 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. 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. 40. photoshop Los vectores se utilizan sobre todo para la creación de: @isaezdesign
  41. 41. photoshop Logotipos @isaezdesign
  42. 42. photoshop Tipografías Aa @isaezdesign
  43. 43. photoshop Gráficos de videojuegos sobre todo para plataformas móviles @isaezdesign
  44. 44. photoshop Ilustración digital @isaezdesign
  45. 45. photoshop Diseño de interfaces @isaezdesign
  46. 46. photoshop ¿Qué programas vectoriales hay? @isaezdesign
  47. 47. Software de pago: Illustrator, de Adobe. Corel Draw! Freehand Macromedia Software gratuito: Skencil Inkscape Sketch IOS
  48. 48. ¿Qué sucede si ampliamos una imagen vectorial?
  49. 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. 50. photoshop Fotografía y retoque, diseño web/app, ilustración ilustración, logotipos o marcas, interfaces web/app...etc. @isaezdesign
  51. 51. photoshop ¿Vectores en Photoshop? ¡Si! @isaezdesign
  52. 52. photoshop Creando vectores directamente en photoshop @isaezdesign
  53. 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. 54. photoshop EXPORTANDO desde illustrator a PSD @isaezdesign
  55. 55. photoshop PODEMOS EXPORTAR desde illustrator a PSD PEGAR directamente en Photoshop @isaezdesign Trabajar en photoshop con objetos inteligentes
  56. 56. photoshop EXPORTANDO desde illustrator a PSD @isaezdesign
  57. 57. photoshop EXPORTA GRUPOS CAPAS ANIDADAS PODER EDITAR TEXTO EN PHOTOSHOP SELECCIONAR CUANDO TRABAJAMOS CON CAPAS TRANSPARENTES @isaezdesign
  58. 58. photoshop Trabajar en photoshop con OBJETOS INTELIGENTES @isaezdesign
  59. 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. 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. 61. photoshop El OBJETO INTELIGENTE permite: Cambiar escala Cambiar Proporción Perspectiva Aplicar filtro Máscaras @isaezdesign
  62. 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. 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. 64. photoshop Por lo que Píxel = fotografía/muy realista PHOTOSHOP Vector = fonts/logotipos/escalable PROGRAMA VECTORIAL @isaezdesign
  65. 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. 66. Vectores y Píxeles V P V P
  67. 67. V FIN P
  68. 68. photoshop @isaezdesign

×