Hi and low res Background images


  1. open a new file at 800px x 160px
  2. put vertical guides at 200px and 400px and 80px horizontal
  3. go to subtle patterns
  4. download tweed pattern from subtlepatterns.com
  5. select all tweed regular
  6. edit-define pattern
  7. go to working image
  8. new layer
  9. select all
  10. edit - fill - pattern
  11. choose tweed
  12. rename layer to regular pattern
  13. do the same for tweed2x
  14. rename layer to retina pattern
  15. Type "narrow low" into upper left, about 30pts, in new color to see easier
  16. Type "narrow high" into left, about 85pts
  17. Type wide high res into all, about 106pts
  18. Type wide low res into 2 top left areas, about 60pts
  19. export all 4 versions by selecting areas
  20. 200x80 for narrow lowres
  21. 400x80 for wide lowres(twice as big as lowres)
  22. 400x160 for narrow highres
  23. 800x160 for wide highres(twice as big as lowres)
  24. edit- copy merged, new file, paste, save for web


Extra notes

In Photoshop, check out right click on text layer and copy CSS
.Wide_low_res {
  font-size: 58px;
  font-family: "Myriad Pro";
  color: rgb( 155, 145, 179 );
  text-transform: uppercase;
  line-height: 0.517;
  text-align: left;
  position: absolute;
  left: 50.93px;
  top: 37.454px;
  z-index: 5;

Also check out generated assets under the file menu
name your layers like so, and photoshop will generate images based on the layers or groups

Rounded_rectangle_4.png8, Rounded_rectangle_4.png24, 200x200 Rounded_rectangle_4.jpg51%