As a graphic designer you’re probably aware of the ever-evolving relationship between design and technology. This is especially true for those focusing on web design. In this industry, we need to have a basic understanding of how our carefully crafted mockups become live web pages. When we understand the basics of this process (and it’s limitations), we are able to accurately communicate with developers and get pixel-perfect websites. This doesn’t mean you need to know how to code a website from top to bottom (although it would be great!), this just means you need to understand the essentials.
In this post, we’re going to start with a very basic introduction to HTML. You’ll learn how to slice a web design in Photoshop and format HTML with CSS. What exactly is HTML? design_taco Burrito photo by Stephan Mosel Almost everything you see while browsing the Internet is a Hyper Text Markup Language (HTML) document. Hypertext is text that references and links to other text on your screen, making it possible for you to access content with a simple click. Markup language is a set of tags background remove service that are enclosing in brackets. These HTML tags usually come in pairs: <start tag> : also known as an opening tag </end tag> : also known as a closing tag, and includes a forward slash / When you enclose content between these 2 tags, the whole thing is called an element: <p> This is a paragraph </p> Viewers will not see the tags when this language is translated to the web — they will only see the content enclosed between them. HTML 5, the current version of HTML, contains around 100 tags with attributes that change their function or look.
You only need to know 30 to 40 of these tags to start understanding and creating HTML. Take a look at them, and notice how they are grouped by function. Let’s get visual and see this in action. Slicing images in Photoshop Before coding, we need to decide which sections of the website should incorporate images and which can be coded. Let’s use Photoshop’s Slice tool (hidden under the Crop tool submenu) and section off areas like the burrito photo, and Joan’s tacos. JICO_BLOG2_624 Now, we need to Export our slices — Go to File > Save for Web (Alt+Shift+Ctrl+S). When a particular slice is selected, you can set its Export options on the right side of the window (JPG, PNG, etc. If you double-click on a specific slice, you will see the Slice Options window pop up — this allows you to name specific slice files.