Нарезка графики для разработчиков: проблемы ресайза (Resonator.cc)

  • Published on
    15-Aug-2015

  • View
    1.183

  • Download
    0

Embed Size (px)

Transcript

  1. 1. :
  2. 2. UX/UI , My.Com / Mail.Ru @skrpkn Android- , Avito.ru @30PP0
  3. 3. www.resonator.cc @resonator_cc
  4. 4. 0.
  5. 5. 1. 2.
  6. 6. 1. 2.
  7. 7. 1. 2. 3.
  8. 8. 1. 2. 3.
  9. 9. Name Density Scale Factor LDPI 120 100140 0.75x MDPI 160 140200 1x TVDPI 213 1.33x HDPI 240 200280 1.5x XHDPI 320 280400 2x XXHDPI 480 400560 3x XXXHDPI 640 560720 4x Android
  10. 10. Name Density Scale Factor non-Retina @1x 163 1x Retina @2x 326 2x Retina HD @3x 489 3x iOS
  11. 11. Windows for Phones Web Name Scale Factor WVGA 1x WXGA 1.6x 720p 1.5x 1080p 2.25x Name Scale Factor non-Retina @1x 1x Retina @2x 2x
  12. 12. Android vs. iOS MDPI 160 140200 1x HDPI 240 200280 1.5x XHDPI 320 280400 2x XXHDPI 480 400560 3x XXXHDPI 640 560720 4x non-Retina 163 1x Retina 326 2x Retina HD 489 3x
  13. 13. iOS Android
  14. 14. Nexus 5 4.95 1920x1080 px 445 dpi XXHDPI 3x
  15. 15. I. XXHDPI
  16. 16. 1.1 XXHDPI
  17. 17. Name Scale Factor LDPI 3/4x 75% MDPI 1x 100% HDPI 1 1/2x 150% XHDPI 2x 200% XXHDPI 3x 300% XXXHDPI 4x 400% Android
  18. 18. Name Scale Factor LDPI 3/4x 75% MDPI 1x 100% HDPI 1 1/2x 150% XHDPI 2x 200% XXHDPI 3x 300% XXXHDPI 4x 400% Android
  19. 19. Name Scale Factor LDPI 1/4x 25% MDPI 1/3x 33.33333% HDPI 1/2x 50% XHDPI 2/3x 66.66667% XXHDPI 1x 100% XXXHDPI 1 1/3x 133.33333% Android
  20. 20. XXHDPI XXHDPI, (, ..) 6 px.
  21. 21. 72x72 px LDPI 18 MDPI 24 HDPI 36 XHDPI 48 XXHDPI 72 XXXHDPI 96
  22. 22. 72x72 px LDPI 18 MDPI 24 HDPI 36 XHDPI 48 XXHDPI 72 XXXHDPI 96 80x80 px LDPI 20 MDPI 26.67 HDPI 40 XHDPI 53.33 XXHDPI 80 XXXHDPI 106.67
  23. 23. 1.2 XXHDPI Photoshop CC 2014
  24. 24. 1. 2.
  25. 25. 1. 1. 2. Image Size 3. 4. png Slice Tool 5.
  26. 26. 1. Marc Edwards, - Bjango www.bjango.com/articles/appdesignworkow/
  27. 27. 1. - !
  28. 28. 2. 1. (PNG Express ..) 2. Photoshop Generator
  29. 29. 2. - !
  30. 30. 1. 2.
  31. 31. . XXHDPI
  32. 32. : 1. PNG Express, $ 2. Photoshop Generator,
  33. 33. :
  34. 34. : 72x72 px, 96x96 px, 6 px, 5 px Vector Stroke, Solid Shape
  35. 35. XXXHDPI PNG Express Photoshop Generator
  36. 36. XXXHDPI PNG Express Photoshop Generator
  37. 37. XXHDPI 16.2% PNG Express Photoshop Generator
  38. 38. XXHDPI 16.2% PNG Express Photoshop Generator
  39. 39. XHDPI 21.0% PNG Express Photoshop Generator
  40. 40. XHDPI 21.0% PNG Express Photoshop Generator
  41. 41. HDPI 40.4% PNG Express Photoshop Generator
  42. 42. HDPI 40.4% PNG Express Photoshop Generator
  43. 43. MDPI 15.6% PNG Express Photoshop Generator
  44. 44. MDPI 15.6% PNG Express Photoshop Generator
  45. 45. HDPI 40.4% PNG Express Photoshop Generator
  46. 46. HDPI 40.4% PNG Express Photoshop Generator
  47. 47. PS XXHDPI 1. 2. 12 px, - : a. b.
  48. 48. PS XXHDPI Photoshop Generator: , .
  49. 49. PS XXHDPI XXHDPI 0
  50. 50. ;(
  51. 51. II. MDPI
  52. 52. Name Scale Factor LDPI 3/4x 75% MDPI 1x 100% HDPI 1 1/2x 150% XHDPI 2x 200% XXHDPI 3x 300% XXXHDPI 4x 400% Android
  53. 53. 2.1 MDPI
  54. 54. Name Scale Factor LDPI 3/4x 75% MDPI 1x 100% HDPI 1 1/2x 150% XHDPI 2x 200% XXHDPI 3x 300% XXXHDPI 4x 400% Android
  55. 55. MDPI MDPI, (, ..) 2 px.
  56. 56. 24x24 px LDPI 18 MDPI 24 HDPI 36 XHDPI 48 XXHDPI 72 XXXHDPI 96 25x25 px LDPI 18.75 MDPI 25 HDPI 37.5 XHDPI 50 XXHDPI 75 XXXHDPI 100
  57. 57. 2.2 MDPI Photoshop CC 2014
  58. 58. . MDPI
  59. 59. : 1. PNG Express, $ 2. Photoshop Generator,
  60. 60. 24x24 px, 32x32 px, 2 px Vector Stroke, Solid Shape :
  61. 61. HDPI 40.2% PNG Express Photoshop Generator
  62. 62. HDPI 40.2% PNG Express Photoshop Generator
  63. 63. HDPI 40.2% PNG Express Photoshop Generator
  64. 64. HDPI 40.2% PNG Express Photoshop Generator
  65. 65. PS MDPI 1. 2. 12 px, - : a. b.
  66. 66. PS MDPI HDPI
  67. 67. III. Android Studio
  68. 68. XXXHDPI PNG Express Photoshop Generator
  69. 69. One more thing
  70. 70. Resonator: Resize Test : Android 2.3.3
  71. 71. AndroidStudio 1. 2. 12 px, - : a. b.
  72. 72.
  73. 73. www.resonator.cc @resonator_cc
  74. 74. Resonator 1. 2. Image Size 3. 4. png 5.
  75. 75. Resonator 1. 2. Image Size 3. 4. png 5.
  76. 76. Resonator Demo
  77. 77. Photoshop CC 2014 Sketch 3 Coming soon
  78. 78.
  79. 79.