{"id":599,"date":"2015-10-07T14:29:54","date_gmt":"2015-10-07T11:29:54","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=599"},"modified":"2023-08-17T15:24:11","modified_gmt":"2023-08-17T15:24:11","slug":"how-to-effectively-resize-mockups-for-different-screen-sizes-in-photoshop","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/how-to-effectively-resize-mockups-for-different-screen-sizes-in-photoshop\/","title":{"rendered":"How to Effectively Resize Mockups for Different Screen Sizes in Photoshop"},"content":{"rendered":"

One of the most common problems in the design of applications and its further transition to the development stage is the requirement of app adaptation to different sizes and resolutions. It takes a certain part of the time devoted to designing, and although in big companies the team can include the special person assigned to accomplish this type of stuff, in most cases this task rests on the designer’s shoulders.<\/span><\/p>\n

As our UX\/UI designer Konst says, it is impossible to consider yourself a UX specialist until your own work process is as efficient as possible. This particular thought makes him constantly explore and study new ways and tricks of optimizing his work and increasing its quality. While many companies and individual designers are moving to work with more modern and specialized software for UI\/UX design such as Sketch, there still are a lot of them who work with Photoshop. Moreover, as we have already mentioned before in our previous post<\/a>, the more tools you can use, the more flexible you are in solving tasks as different tools and soft are efficient for different problems.<\/span><\/p>\n

One of the ways of optimization for his own design process, which Konst found for himself, enables the designer to significantly reduce the time needed for adaptation. Certainly, it is not a silver bullet, but it can be useful for those who have to adapt their designs to many resolutions.<\/span><\/p>\n

\"tubik-studio-designer\"<\/p>\n

Tubik designer Konst \u00a0working on the project<\/em><\/p>\n

 <\/p>\n

In substance, this method applies drawing in 1x in points with further pixel auto-scaling according to the set density of dpi\/ppi.<\/span><\/p>\n

Besides general benefits, there are also the following positive points of the method:<\/span>
\n 1) It enables a designer to use the indices of the points directly both for margins and types (that is by no means unimportant)<\/span>
\n 2) It isn’t necessary to scale the design manually in the process of adaptation to a new resolution.<\/span>
\n 3) It isn’t necessary to scale types visually.<\/span><\/p>\n

 <\/p>\n

So, let’s get started investigating the process itself.<\/span><\/p>\n

 <\/p>\n

First of all, the most important thing is to customize the file of your project correctly. The most important aspect at this stage is the size of the operating zone of the project and the resolution pixel\/inch.<\/span><\/p>\n

 <\/p>\n

The definition of a point is more or less clear for everybody who worked on the design for iOS. However, the meaning of resolution should be discussed in more detail.<\/span><\/p>\n

 <\/p>\n

Both in web design and design of mobile applications, the resolution of 72 dpi is the equivalent of 1x resolution. It became custom on the basis that this is a standard resolution for the creation of a new file and in this resolution, 1 pixel equals 1 point. Explaining the method, the designer didn’t stop on the position of standard resolution in detail providing the link to the detailed Guide on DPI<\/a>.<\/span><\/p>\n

 <\/p>\n

In the given case, the project we are creating is the one for iPhone 6 with a screen resolution of 750*1334 pixels, 2x Retina screen, in other words, 375*667 points. While the resolution in pixels can differ, a point is a constant measure and its actual presentation directly depends on the resolution parameter. In our case, we set 144 dpi that is equal to 2x modificator in the design of an application for iOS. So, now our 1 point is not 1 pixel but 4 pixels. It happens because the point contains more pixels with increasing resolution and now it takes the space of 2 x 2 pixels.<\/span><\/p>\n

 <\/p>\n

Then we can start drawing. It’s important to consider here the following nuances:<\/span><\/p>\n