![]() Many of these tags are specifically used for web typography such as, , and so on. HTML (HyperText Markup Language) has many different tags which help browsers interpret the content of a page. ![]() Please check this article How to Establish a Modular Typographic Scale by Ian Yates to better understand the science and importance of web typography. Now we need to establish a hierarchy for our typography. We'll use same size and style titles for future titles to keep consistency. I've set the foreground color to black #000000 then using the Horizontal Type Tool (T) and the previously mentioned Open Sans font with Light option and 55px size entered the title of the section. Bear in mind that you should be careful if using more than two different fonts for your projects as things can get messy quickly. Open Sans has plenty of variants, so for this UI kit I will be using just the one font. It's stylish enough for headings, but also practical enough for body copy on the web. Open Sans is a modern typeface which comes in many different weights and has a professional, yet welcoming look. Open up the Typography group, pick the Horizontal Type Tool (T) and select the Open Sans font. I've set the foreground color to #e9eeef and hit Alt+Backspace for the background. For this tutorial let's use subtle light grey - a neutral color but strong enough to give your app a personality. Background and typography need to maintain reasonable contrast levels to be readable. First of all we need to set up the perfect environment for our type a background that is neutral and easy on the eye. Defining TypographyĪs Oliver Reichenstein famously stated " Web Design is 95% Typography", so you need to get it right. For quick creation of a group just click the icon. To create groups go to Layer > New > Group… and give each one a title as mentioned. Let’s create six layer groups named Typography, Buttons, Forms, Avatars, Images and Colors. In a working environment we'll need this UI kit to be used many times as a reference point and development asset, so you need to keep it organised (developers will thank you). Sticking to Photoshop etiquette we'll keep things organized and easy to navigate and edit. Tip: You could also use the GuideGuide Photoshop plugin to make this process even quicker. Note: Guidelines used for this tutorial: vertical at 100px, 600px and 1100px. I usually choose 1000px as a website starting width so let's keep our UI kit within these dimensions. Go to View > New Guide… and set some guidelines. I don't always use a grid, but setting some constraints will ensure neatness and consistency. Let’s set some guides so our UI kit is organized and aligned. You're free to use a canvas of whatever dimensions you prefer - the web is not fixed width, after all. Open up Photoshop and begin by creating a new document ( File > New…) using the settings shown below. ![]()
0 Comments
Leave a Reply. |