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

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

Gain valuable insights on creating web graphics for low and high-resolution screens using top design apps: Photoshop, Illustrator, and Sketch. Moreover, learn how to efficiently shrink file sizes without losing quality and understand the technical aspects that affect how developers turn your designs into code.

Key Insights

  • Learn to understand the difference between 1x (low-resolution) and 2x (high-resolution) graphics, how they work, and the most efficient ways to create them.
  • Understand that files exported from apps like Photoshop, Illustrator, and Sketch can be larger than necessary. Learn methods to reduce graphic sizes by up to 85% with no loss in quality.
  • Discover a simple trick that allows you to significantly shrink the file size of high-resolution photos.
  • Master the technique of previewing your designs in real-time on a smartphone or tablet as you design.
  • Get practical, real-world recommendations on the ideal pixel size and resolution to design at for Photoshop, Illustrator, and Sketch.
  • Learn how designing at 1x or 2x can influence how developers will turn your designs into code, understand potential issues, and learn how to effectively communicate with developers about these issues.

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.

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.

Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

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.

Topics

Learn more in these courses

Back to Blog
Yelp Facebook LinkedIn YouTube Twitter Instagram