Ads 468x60px

How To Design Interfaces In Photoshop - DailyBlogTips

How To Design Interfaces In Photoshop - DailyBlogTips

How To Design Interfaces In Photoshop

Posted: 21 May 2016 08:02 AM PDT

Do you want to design interfaces in Photoshop? Need a few extra design tips? Photoshop is a world known program which many use to manipulate photos and other content to generate improvements on the old material. Over the years Photoshop is used by a number of different people including, but not limited to, photographers and interface designers. While many tutorials work on helping photographers, not many help interface designers. For those who are looking to design interfaces in Photoshop, the following is a brief guide on some of the design tips you can use so you can reach your goals.

Tips On How To Make A Photoshop Interface

Step #1 – Dividing Your Canvas

The first step to creating a user interface is dividing the canvas into different main areas for the content to be placed. Depending on the type of interface you're creating it should include a vertical site navigation area and a horizontal sub navigation area. You should also create an area for article preview and another area for article tweeting or sharing to social media platforms.

Step #2 – Add Texture

The next thing you need to do is add texture to gain visual appeal. For app development, although most feature a smooth and glossy like appearance, it's best to add some texture by roughening the background areas. This can really add a nice visual impact without causing distraction for the viewer.

Step #3 – Block Main Content Areas

Blocking the main context areas with numerous colours is ideal for adjusting your app to different user tastes. This will give you an overall look at what the finished product will be. You can play around with the width of columns to make sure there's sufficient room for each logo in the left column, icons in the right column and enough room in the middle for the content.

Step #4 – Make Icon Frameworks

In order to make icon frameworks you will need to use some math skills. For example, if you have 7 different icons that need to be incorporated, you need to make sure they're all separately spaced accordingly to add a clean finish while leaving sufficient space of 50-75px at the bottom and top. The reason for this is it allows forsub-menus, settings and buttons to be added for social media integration, account login and setup, plus much more. To work out this space you canuse the following as an example:

Say the height is 768px tall. Subtract 100px from the menu bar from the top and bottom. This leaves 668px of space. Divide this number by 7 (the number of icons you have) and you will have 95.42px of space per one. Each icon should be 95px tall if you're filling the site with vertical icons.

Step #5 – Draw Out Your Guides

Draw your guides by using your ruler and pixels instead of inches. You can change to pixels by changing your ruler measurements when you right click the ruler yourself. Use the rule to draw out the top guide to leave menu space that was mentioned earlier.

Step #6 – Use Rectangle Template To Save Time

From the calculations we know each icon needs to be 95px. Use the 'marquee tool' and the 'top guide tool' to create a rectangle template so you can replicate it as needed. Duplicate your rectangular layer until you have the number of icons you need to arrange vertically. Also don't forget to organise your layers along the way to make everything less confusing and cluttered.

Step #7 – Import Logos

Logos can be imported using many files. Illustrator vector files can be imported as smart objects. To do this you simply open the illustrator file, select the logo, copy the selection, and switch to Photoshop. Go to Edit, thenPaste, this will paste the logo onto the layer you're working on. This can also be done with PNG files

Step #8 – Top Navigation

It's best to break up the navigation at the top of the page using shapelier tab menus. You can do this by creating a tab and select the rounded rectangular shape tool. You can edit the shape with the selection tool and pen tool until you have created the shape you want. Copy and paste the amount ofshapes you need to incorporate into your top navigation.

Step #9 – Break Up Your Content

When you feature a large amount of content, the user needs to know where it begins and where it ends. To break up your content simply use horizontal or vertical rules. You can also create a very light coloured background for each content piece to show where the end of the content is.

For text tabs use the text tool to select your font. Most times the best one to use is sans serif font as it shows up the best. Other choices are Helvetica, Arial, and Verdana.

Step #10 – Add Social Media

You can incorporate social media buttons by downloading free ones or by importing icons and pasting them to your application. Make sure they're spaced evenly apart and they're in the right column for better interface design.

Conclusion

As you can see there are many different things you need to remember when it comes to designing your interface in Photoshop. By implementing these techniques, you can create a great mock-up of your app interface quickly and efficiently. So have you made your interface design yet?

Nathan Strand is a Photoshop expert and specialist who loves to design and create many things on Photoshop. He works with an IT firm and helps customers create their own user interfaces through Photoshop and other program platforms. He has also worked with Tasarla Tasarlat in producing outstanding logo designs for many businesses.

Wanna learn how to make more money with your website? Check the Online Profits training program!

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)