Skip to main content
Noble Desktop/2 min read

Video Tutorial: Secrets to Designing Hi‑Res Web Graphics (Exploring Modern Workflows)

What This Seminar Covers

1x vs 2x Graphics

Understand low-res and hi-res screens, and how to efficiently create both.

Reduce File Size 85%

Files exported from Photoshop, Illustrator, Sketch are bigger than they need to be.

Hi-Res Photo Trick

A simple secret that dramatically shrinks hi-res photo file size.

Real-Time Mobile Preview

Preview your designs on a phone or tablet as you work.

Master Web Design at Noble Desktop

Noble Desktop's Web Design Certificate teaches Figma, HTML, CSS, and responsive design.

We’ll explain 1x and 2x web graphics, and show you ways to create them quickly and efficiently in Photoshop, Illustrator, Sketch, and XD.

Download the PDF Reference Notes.

LEARN MORE:
Web Design Classes (attend in New York City or Live Online)
Web Design Books (eBook or Print)
Sketch Training
Photoshop for Web & UI Training
Adobe XD Training

If you design web graphics, this event will be invaluable for reasons you may not even realize until you attend. You’ll learn industry-leading tips and tricks many designers are not even aware of!

For today’s modern web, designers must create graphics for low and hi‑resolution (1x and 2x) screens. That creates complex issues we want to clarify for you. We’ll show you the best ways to create these graphics quickly and efficiently in the top design apps: Photoshop, Illustrator, and Sketch.

Here are some of the topics you’ll learn about:

  • Understanding 1x versus 2x (low and hi‑res) graphics: How they work and how to most efficiently create them.
  • Files exported from apps such as Photoshop, Illustrator, and Sketch are larger than they need to be! Learn how to further reduce the size of graphics by as much as 85% with no loss of quality.
  • A simple secret lets you dramatically shrink the file size of hi‑res photos.
  • How to preview your designs (in real time) on a smartphone or tablet as you design.
  • Real-world, practical recommendations on what pixel size and resolution you should design at (for Photoshop, Illustrator, and Sketch).
  • Designing at 1x or 2x affects how developers will turn your designs into code. So you’ll learn important issues that can arise, and how to speak to developers about them.