DesignM.ag » Photoshop http://designm.ag Articles and Resources for Web Designers Fri, 21 Nov 2014 15:32:44 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.3 Pixel-Perfect Design using Photoshop on a Retina Displayhttp://designm.ag/photoshop-2/pixel-design-issue-photoshop-retina/ http://designm.ag/photoshop-2/pixel-design-issue-photoshop-retina/#comments Tue, 02 Sep 2014 14:29:27 +0000 http://designm.ag/?p=85234

Advertise here with BSA


I recently purchased a MacBook Pro with the infamous retina screen display. Everything does look beautiful and there is a noticeable difference in comparison to non-retina icons. However I noticed a problem using Photoshop that others in the web design field have also likely noticed.

Every new document is shown at half-size while the document view claims to be 100%.

Anyone running CS5 or below should not find this to be much of a problem. But CS6 and CC have been updated to include retina-based icons and interfaces. This creates a pixel-dense display in Photoshop(and other Adobe programs) where new documents appear twice as small instead of "regular size". Another way to put this is @1x images will appear tiny because retina Photoshop only uses @2x documents.


Advertise here with BSA

]]>

Advertise here with BSA


I recently purchased a MacBook Pro with the infamous retina screen display. Everything does look beautiful and there is a noticeable difference in comparison to non-retina icons. However I noticed a problem using Photoshop that others in the web design field have also likely noticed.

Every new document is shown at half-size while the document view claims to be 100%.

Anyone running CS5 or below should not find this to be much of a problem. But CS6 and CC have been updated to include retina-based icons and interfaces. This creates a pixel-dense display in Photoshop(and other Adobe programs) where new documents appear twice as small instead of “regular size”. Another way to put this is @1x images will appear tiny because retina Photoshop only uses @2x documents.

I’d like to provide an overview of how this affects web design vs other areas of design like photo editing or vector work. I also have a workaround solution for anyone struggling with this problem on a retina display.

So What’s the Deal?

When Apple started releasing MacBooks with retina displays it became the new standard for their laptops. This meant app developers had to redesign their icons to larger specifications and, if necessary, update the interface too. Adobe already released Creative Suite 6 and eventually put out an update for retina users.

A typical MacBook resolution is 1440×900 but with the retina display more pixels can be fitted into the same physical space. Adobe’s update now works nicely with the retina 2880×1800 dimensions. With some programs like Dreamweaver or Illustrator this wouldn’t be a problem – actually it looks amazing!

But with Photoshop there is a slight problem. Photoshop is a pixel-based program which means you’re designing graphics in a pixel grid. When copying a “regular” 400×300 image you’ll see it in Photoshop at 100% zoom 200×150. 200% zoom will show you the actual 400×300 pixel image, which should be 100% zoom. Keep in mind that PPI does not matter, only the document dimensions.

photoshop cs6 retina display resized images

I want to clarify that I simply adore the retina interface in the updated Adobe products. The older icons look okay but you can tell a major difference between the two versions. The toolbars look nicer, fonts look nicer, every panel and every icon just looks sharper and cleaner on a retina display. The biggest problem comes down to working directly with pixels.

Differences in Web Design

Consider how it would work to draw a small vector icon with the pen tool. Or consider opening a new document to perform a digital painting with your tablet where the pixel locations don’t matter as much. In these circumstances it really doesn’t matter if Photoshop squeezes twice as many pixels into the screen because the end result isn’t dependant on exact pixel locations.

However I should note that your vector icon or painting will look bigger on a regular monitor. It isn’t actually bigger, the retina display just makes it look smaller.

At this point you should be able to understand why this is detrimental to web designers. If we need a rectangle to outline a 1000px layout this shape needs to display exactly as a user would see it. The web browser is responsible for automatically retina-izing background colors and fonts. Photoshop will not do this so each new shape layer needs to be an exact perfect size.

Many support threads have been made about this, with almost everyone dismissing it as a non-issue. The problem is summed up nicely by this post:

View > 100% means that one image pixel will be represented by one screen pixel and that means that on a screen with smaller pixels this will naturally result in a smaller display of an image of certain pixel dimensions.

So how are we told to fix this? An irresponsibly pompous answer states “what’s wrong with 200%?”

Well Mr. Noel Carboni, the problem is most people don’t want to rearrange their workflow and make 200% their new default document view just because Apple forces everyone to use retina screens. Retina Photoshop is not an improvement for web design. Perhaps for mobile app design, maybe icon design, and certainly vector design, but not pixel-based work.

Switching your workflow to 200% zoom is a weak and tiresome solution.

A Designer’s Solution

If you’re frustrated with Retina Photoshop forcing 1px to display smaller in PS than it would in a browser, you are not the problem. Adobe & Adobe’s support is the problem for laughing this off like it’s a joke.

What should happen is that Adobe should release an update which retains the Photoshop retina interface, icons, and other tidbits, without forcing new documents to adhere by these same pixel rules. A simple checkbox in the preferences panel could switch between retina-based document views and non-retina document views.

If there’s “nothing wrong with 200%” then why not give us the option to label that zoom as 100%? Then 200% can be called what it really is on every other monitor – 300%. Unfortunately I seriously doubt Adobe is rushing to fix this anytime soon.

The best solution I have found is to run Photoshop in low resolution mode. After hours of searching I found this in another support thread coincidentally also arguing against Noel Carboni on this very topic. Here are the steps to get low-res mode:

  1. CTRL+click Photoshop icon > Options > Show in Finder
  2. Quit out of Photoshop
  3. CTRL+click the Photoshop.app in Finder and select “Get Info”
  4. Check the box “Open in Low Resolution”

low resolution mac osx info menu photoshop

Now when you re-launch Photoshop all the interface elements will appear blurry. But every new document will display at a pixel-perfect 1:1 ratio without getting fixed into the retina grid.

The only other solution is to design all your websites @2x, so a 1000px website layout becomes a wider 2000px PSD document. A header bar which spans the entire webpage 1000×50 will become 2000×100. I prefer using low-res mode over this method because not every site I design needs retina support.

Just a quick Google search will prove I’m not the only one to feel that this is a legitimate problem. For anyone who stumbles onto this article I truly hope one of these solutions can work for you. I love web design so I regularly switch between low-res and hi-res mode when I’m doing pixel work vs. general design or photo editing.

If you have a better solution please let us know in the comments section. Also if you know anyone else struggling with this problem be sure to share the advice!


Advertise here with BSA

]]>
http://designm.ag/photoshop-2/pixel-design-issue-photoshop-retina/feed/ 0
Tips for Building Clean Website PSD Mockups in Photoshophttp://designm.ag/photoshop-2/building-clean-website-psd-mockups/ http://designm.ag/photoshop-2/building-clean-website-psd-mockups/#comments Mon, 12 May 2014 14:58:39 +0000 http://designm.ag/?p=84414

Advertise here with BSA


If you're a web or graphics designer then you should know about that oh-so-adorable design suite Adobe Photoshop. Folks who have been using the software for years can vouch that it's quite difficult to master. There are so many techniques for creating UI elements, website layouts, icons, and other digital graphics. It's crucial that you learn how to organize these assets into a complete, unified design.

adobe photoshop blue icon app redesign

In this article I'd like to cover methods of organizing PSD files in Photoshop. Whether you're a one-man team or working in a large studio setting, it always helps to stay organized. These tips may appear like common-sense ideas but so many designers overlook this systematic and detailed approach.


Advertise here with BSA

]]>

Advertise here with BSA


If you’re a web or graphics designer then you should know about that oh-so-adorable design suite Adobe Photoshop. Folks who have been using the software for years can vouch that it’s quite difficult to master. There are so many techniques for creating UI elements, website layouts, icons, and other digital graphics. It’s crucial that you learn how to organize these assets into a complete, unified design.

adobe photoshop blue icon app redesign

In this article I’d like to cover methods of organizing PSD files in Photoshop. Whether you’re a one-man team or working in a large studio setting, it always helps to stay organized. These tips may appear like common-sense ideas but so many designers overlook this systematic and detailed approach.

Consistent File Delivery

If you’ve been comfortable working as a one-man operation you may have developed your own sense of file organization. This is great if everything is still easy to locate when passed onto a 3rd party. But never expect others to just understand your line of thinking.

When finishing up a PSD file and delivering it to someone else you want to be as precise as possible. Files should be named based on their relation to the interface. If you need to keep separate versions it would be best to separate those into folders(v1, v2) with the final version being labeled as such.

screenshot os x psd file organization

Also it’s not necessary to include the date in your filename because Windows Explorer & OS X Finder can give you info about when the file was last modified. If you need the date for some other reason it’s perfectly acceptable – just try to keep filenames as small as possible.

I would recommend splitting UI designs into separate PSDs based on their purpose. So you may have 1 primary PSD for the website and internal pages, then another PSD for the mobile responsive site and those pages. Then a 3rd PSD might contain individual UI elements like form inputs, buttons, select menus, and other common pieces of the interface.

The main goal is to be consistent with your delivery. Keeping all your graphics organized in a similar pattern helps you quickly locate items as needed. This also maintains a level of understanding between other designers or developers.

Starting from Scratch

We all need to start somewhere and this can be a daunting task. I’d recommend always using a grid when designing your mockups – whether for websites, mobile apps, or a combination of the two.

Grids help you get a better sense of vertical and horizontal spacing between elements. It also helps you adjust proper font sizes and line heights for blocks of text. GuideGuide is a PS extension for CS5 and CS6. You can generate custom guides for any layout you need with ease.

adobe photoshop guideguide extension screenshot

Using a fluid-based grid system also helps you scale each design from wide monitors down to smartphone screens. As I mentioned earlier it may be easiest to save these files as separate PSD documents. But using the same grid system helps with consistency and fluid design patterns.

You might also try looking into layer comps for web design interfaces. These work much like InDesign for master pages which build upon internal pages. You can design multiple layer comps which relate to different pages on the website. Each page most likely has the same header and footer, maybe even the same content structure. But each page will probably use very different internal elements and blocks of text.

Clean Layers

Every designer will bring this up so I won’t go crazy about layer structure. But it is very important that you name layers beyond the Photoshop defaults. The tiny layer thumbnail is not always enough to provide a guess as to what the layer contains. And why should you toil away designing a fantastic layout only to leave the layer structure a mess?

Layer groups will be your best friend here. Build parent groups to house smaller groups – a header group may contain a logo group, search bar group, and navigation group. This may seem confusing or nitpicky but it’s surprisingly versatile.

The reason it may seem annoying is if you were to create more elements, add more buttons or boxes into the layout. Then you’d be scanning all the groups to make sure your new layer is in the proper order. But coming from a developer’s perspective there is little need to change or update anything beyond basic elements Developers just want an easy-to-skim PSD file with everything labeled nice and neat.

I suggest playing with different ideas to find a layer structure that works best for you.

Triple-Check your Work

This might go without saying but I’m gonna say it anyways: don’t expect to get it right the first try! Or even the second try for that matter. Sometimes we feel the creative juices flowing and just want to keep moving. But this is how spelling mistakes or slight alignment errors get saved into the final mockup.

It’s never a bad idea to let someone else take a look at your designs to gather some feedback. If the project is under NDA then you may only be able to share with your client. But you don’t always need someone else to proofread your design skills. Just take a break from the computer and go do something else. Get your mind clear and really try to distance yourself from the work(at least 30-60 mins).

When you come back to Photoshop any glaringly ridiculous mistakes will be glaring right back at you. It’ll be quite obvious what needs to be changed, be it a color scheme or some heading text. Just try to avoid creating your mockup and calling it finished without a second look.

Further Reading

I’ve put together a handful of articles which directly relate to Photoshop organization for web design. If you have the time read through any of these topics which catch your interest.

Closing

It’s never an easy goal to stay organized. How many of our houses look like a bombshell? But the easiest route is not always the best route when it comes to website design.

Whether you’re new to Photoshop or have been using the software for years, these organizational structures will help out your workflow. It takes a bit of adjustment but you’ll thank yourself in the future. Along with these ideas feel free to share your own organizational techniques in the post comments.


Advertise here with BSA

]]>
http://designm.ag/photoshop-2/building-clean-website-psd-mockups/feed/ 0