Web and Mobile UI Design: Top Photoshop Tricks, Fast and Easy!
When comes about designing a web application or mobile application user interface, it can get very messy once you start to work with a large number of objects and layers, however there are some tips that can come in very handy and master your skills as a Photoshop ninja. Lets take a look at some of these that have helped me during my web and mobile app design projects.
How to Select More Objects in an Easy Way
Most of us have problems in selecting a lot of objects together. What we usually do is click one by one on an object (holding shift, control or the command key) and most of the times we are not able to select all the objects and it also takes up a lot of time.
Let’s see how we can easily select more objects in this step by step exercise.
First of all let’s try using <control + press left click> and drag over all the items that you need to select.
As we can see in image above, after selecting the particular text and images, the layers are also selected in the layer tab (on the right side of screen).
Select just the text and avoid the other objects, using the feature in new Photoshop for text, shapes, images etc.
If you think you selected extra items, just press shift and click on that item to de-select
How to Move Objects from One File to Another in an Easy Way
In Photoshop when you're dragging an element from one file to another and usually when dropping it, the elements on the canvas are not in the same position as they were on the other file. So what you want to do is keep the same position in pixels for maintaining the grid of your design. This is particularly difficult when you are designing a mobile app or making mockups of a web design.
Let’s see how we can do achieve that in this step by step exercise.
We can select the layers and all folders and then right click on that. There we can find one option called duplicate (folder or layer) depending on if we selected the layer or the folder. When we select the duplicate option, a window appears on our screen with some features.
One option on that window is to duplicate that selected folder or layer in to another open Photoshop document and the second option is to open it in a new document.
The important feature of this option is when you duplicate any layer or folder, its goes to another document or new document in the same exact place. This helps us to make constant designs for web and mobile app.
Some Extra Bites of Photoshop to Work Faster and More Efficiently
How to control opacity and fill color of layers in an easy way
To control the opacity in a fast and an easy way you just need press the button from number 1 to 0 and to control the fill color of an object just press shift + number (1 to 0)
How to select your locked layer
An easy shortcut to select a locked layer within your document when the object you're trying to select is a shape object is to do the following: Select the white pointer tool (A) and then click on the locked object that you're trying to select. You will notice than when it's a shape object, the white select tool will activate the shape object as if it was not locked.
About the Author
Rishwan Muneer Butt is an UX/UI Designer with 4 years of experience working in electronic media, print, web, desktop and mobile applications. He holds a degree in graphic design from Karachi University, Pakistan. He currently works as a UI/UX Designer at iTexico for web and mobile applications.
Post Your Comment Here