PSD to HTML Archives - Page 3 of 4

Responsive Design: Why You’re Doing It Wrong

Responsive design isn’t a fad that arose because of a cool CSS technique, it’s an answer to a problem. Always remember that and constantly ask yourself whether or not you’re really adequately addressing that problem. If you’re using copy and paste to insert your media query breakpoints, your solution might be flawed.

Let’s discuss why media queries exist and how we can leverage them to truly solve the quandary of the ubiquitous web. Let’s talk about why you should let your content determine the breakpoints of a layout, not hypothetical screen sizes.

This article is part of our series on “looking beyond desktop design”, brought to you in partnership with Heart Internet VPS.

The Idea Behind Media Queries

Responsive Design PSD to Responsive Screenshot

To begin this debate correctly, it’s necessary to discuss why media queries have suddenly become so popular. The answer is of course that “Responsive Design,” a term coined by Ethan Marcotte, is a fantastic way to address an ever-growing problem for web designers.

While everyone was ranting on and on about how the “mobile web” was going to overtake the traditional one, the revolution that took place was much more drastic: the web became ubiquitous.

This “problem” is great for the world as a whole, but a real headache for us. In the past decade, the worldwide web has transformed into something new. It’s no longer bound by the walls that we had previously established. I’ve said this before but it’s worth repeating. While everyone was ranting on and on about how the “mobile web” was going to overtake the traditional one, the revolution that took place was much more drastic: the web became ubiquitous.

At this point in time, we don’t access the web from a single point. We didn’t give up our laptops in favor of smartphones as “experts” predicted. Instead, the web is everywhere we are. It’s not only in our phones and computers, it’s in our tablets, iPods, gaming systems, televisions and even cars.

This trend will only continue as time goes on. Responsive design brings us past a season of creating separate mobile sites and into an era where we develop one site that evolves and adapts to the device that it’s being viewed on. Using media queries, we can present specific CSS to any number of different viewport sizes and make sure that everyone has the best possible experience.

The Problem With Responsive Design

The section above isn’t a semi-historical rant meant to fill space, it’s an important look at the goals that responsive design is meant to achieve. The question then becomes, does it meet these goals? Does responsive design adequately address the problem of ubiquity?

The answer is complicated, at best I can say, “it depends on how you do it.” That’s a confusing statement isn’t it? Responsive design is straightforward: use media queries to serve up custom CSS to different viewport sizes. This is how everyone approaches it right? So how can there be a right and wrong way?

The complexity arises when we begin to discuss a crucial part of this technique: which media queries should I use? Or put a different way, which “breakpoints” should I target for custom CSS? The current popular answer predictably starts with the best “mobile” devices around: the iPhone and iPad (cue angry Android user comments). From these archetypes we establish so-called “generic” smartphone and tablet sizes. Then we move up and address laptops and small desktops and finally large screens. A standard set of media queries, like this one from CSS-Tricks, typically has nine or ten pre-established breakpoints.

What if we focused on the needs of a specific design instead of a hypothetical device use case? What if we built layouts that simply worked everywhere?

To be fair, this system does work to a certain degree. We’ve all seen lots of great responsive sites built using a set similar to Coyier’s above. However, I can’t help but think that this is somehow repeating the same mistake that we made by designing “mobile sites” a few years ago. The entire focus here is on the device viewing the site. Before we even build the site, we have these breakpoints in mind.

But devices change. We’ve already established that the web is being connected to pretty much everything with a power switch, so why are we once again placing so much emphasis on currently common screen sizes? Is there a better alternative? What if we focused on the needs of a specific design instead of a hypothetical device use case? What if we built layouts that simply worked everywhere?

Content Focused Responsive Design

The aforementioned problems with pre-established media queries occurred to me only as I dug in and really started producing responsive work on my own. In theory, the standard suggestions are great but once you apply them to a complex design you’ll discover that those breakpoints don’t always cover it. The problem, as the Boston Globe designers found quickly found out once the site went live, is that issues arise “in the in-between” (for the record, that project is fantastic and any layout issues have largely been addressed). Things get messy when the design is at a size that you didn’t account for and you have to go in and patch the holes after the fact.

I say this as an avid Apple fanboy: stop designing websites for the iPhone.

My question is, why don’t we start there? Instead of going into a project with a set of devices, and consequently media queries, in mind, why don’t we let the design decide? Every web page layout has a point where the browser size lessens its integrity. Our job as designers, in light of the problem of ubiquity, should be to find that size and account for it, then lather, rinse and repeat until all of the weak points are accounted for.

I say this as an avid Apple fanboy: stop designing websites for the iPhone. Instead, design a website that maintains its integrity as its viewport size is reduced to any feasible state. Do keep specific devices in mind as a guide for your design (example: smaller devices tend to be touch-based, so make links large), but don’t put your blinders on and fail to look at the bigger picture: that your design should look good on any screen.

A New Workflow

So what does a content focused responsive design workflow look like? It’s simpler than you think. Obviously, you need a starting point of some kind. If you want to start mobile and go up, great. If you want to start large and come down, also great. I personally find it very difficult to really dig into a design and do it right if I’m starting at the mobile level, but there are many solid arguments for doing it this way.

Something magic happens when you follow this workflow.

Hypothetically, let’s say you started with a large, 1020px wide site. Check it out on the largest screen you can get your hands on and make sure it looks great. Now drag the window and make it smaller until the design gets ugly. There’s your first breakpoint. Set a media query for that point and fix everything that you need to address. Once you’re finished, grab that window and find the next point of ugliness. Repeat these steps until you’re satisfied with the range that you’ve accounted for.

But what about the iPad? What about the Kindle Fire or Samsung’s latest attempt at being relevant? Something magic happens when you follow this workflow. You just made it so that the layout looks good at just about any size. If you did it right, then when you pull it up on your phone or tablet, it’s going to look great.

Layout Only
Keep in mind this discussion refers to layout ratios only. You absolutely don’t get out of testing functionality on different browsers and devices. Responsive design does nothing to account for the fact that different browser engines interpret HTML, CSS and JavaScript differently.

Conclusion

To sum up, media queries and responsive design provide us with an incredibly powerful tool to account for the fact that websites are being viewed by all manner of screens and viewport sizes. However, once we start pegging our designs to a handful of devices, we’re right back where we started. Your goal instead should be to build a layout that’s so versatile that it can handle almost any viewport size thrown at it.

This is all nice in theory, but where’s the example? The jumping off point of this discussion came from a recent attempt of mine to build a responsive image gallery. Check out that article for a look at how a content focused responsive design workflow might look in the wild.

What Is HTML? Back to Basics

Since I have a background in print, I’m always eager to help designers from other areas get a start in web design and basic development. I know from experience that the transition is an extremely intimidating one that many people simply don’t think they can manage.

Fortunately, I can also attest to the fact that it’s probably not as difficult as you might imagine. In the world of hardcore coding, HTML and CSS rank pretty low on the barrier to entry scale.

Today we’re going to start a series that examines the basic building blocks of web development. HTML, CSS, JavaScript; if you’re a complete and utter beginner who might not even have a basic grasp of what these technologies are much less how to wield them, then this series is for you.

What Is HTML?

There are a million ways that I could start this discussion. We could go into the drivel of how HTML stands for Hypertext Markup Language or how it was invented in 1980 by physicist Tim Berners-Lee as a system for sharing documents, but you can get all that from Wikipedia. If you’re interested in the history of the World Wide Web, I highly recommend investigating the topic further, but that doesn’t help us much in our discussion of what HTML is today and how you’ll need to use it.

What you really need to understand is the conceptual purpose of HTML. What is it for? Why do you need it? How does it compare and relate to other technologies like CSS and JavaScript?

HTML: The Most Important Piece

Along these lines, HTML can be thought of as the fundamental building block of the web as you know it. There’s an underlying architecture of complicated technology that makes up “The Internet” but the good ol’ WWW is largely dependent on HTML.

In fact, technically, HTML is all you need to create a web page. A few extremely simple lines of HTML uploaded to a web server would constitute a web page, which is definitely not something that can be said for CSS and typically not something that can be said of JavaScript. The point here is that, while all of these technologies are closely related, HTML is the pivotal piece of the puzzle.

Now, before you get too excited, that doesn’t mean that you can get away with only learning HTML. You’d be hard pressed to find a modern web page that doesn’t utilize, at minimum, a combination of HTML and CSS.

Markup Languages

To truly understand what HTML is, you’ll need to understand what markup languages are and why they exist (I’m sneaking in that drivel after all).

Basically, the web is written in plain text. Now, by “plain text” I don’t just mean a lack of images, I mean a lack of rich formatting of any kind. Unlike in Microsoft Word where you can easily create bold italic text at any point size, writing code is more like using WriteRoom or IA Writer; all you get is plain old letters and symbols.

The Typewriter Metaphor

Imagine composing an essay on an antique typewriter, then handing that essay to someone so that they could enter it into a computer. Your typewriter doesn’t have any formatting features, but when your associate enters your essay into the modern word processor, you want it to have headers, bold text, italic text, bulleted lists and more. How would you tell that person where to implement these features?

The answer is of course that you would “mark up” your document and insert extra indicators of how you want the text to be formatted. These wouldn’t be present on the end result but are merely meant to tell the interpreter how to make everything look the way you intend. This is exactly how a markup language works. With HTML, this markup is accomplished through tags.

Tag, You’re It

As I write this article, I’m doing so in plain text HTML. This means when I want to bold something, I can’t simply hit a button. Instead, I insert a bold tag:

The last word will be in <b>bold</b>. 

See how I used “<b>” to indicate where the bolded text would begin? Also notice how I used “</b>” to indicate where the bolded text would end. To italicize something, I use the same technique.

<i>This is italicized.</i> This isn't.  

The bracketed portions are known as tags, and each set of tags has a starting and stopping point. With these, you tell the interpreter, in our case a web browser like Firefox, how you want the content to be formatted. When we place content between an opening and close tag, we typically say that we have “wrapped” it in a tag.

Example Tags

Now that you know what tags are, here are some more very basic examples of some HTML tags:

<p>paragraph</p>
<h1>header</h1> (h2, h3, h4, etc. create incrementally smaller headers)
<small>small text</small>

Links, Tags and Attributes

This is where the “Hypertext” in “Hypertext Markup Language” part comes in. One of the major parts about writing HTML, and indeed about using the web in general, is linking. That’s how it all works right? If there is a web page loaded into your browser and you want to get to another page, what do you do? Click a link! This system is fantastic for connecting all of the various bits and pieces of information stored on the web.

To link something in HTML, we of course use a tag. This tag is going to look a bit more complex than most though. Let’s look at an example that links to the Design Shack home page.

1	`Read <a` `href="http://designshack.net/">Design Shack</a> daily for awesome bits of design goodness.`

Here we have not just a tag but an attribute as well. The tag (<a></a>) tells the browser that there’s a link and the attribute (href) tells the browser where the link should go. The syntax for this type of structure is as follows:

<tag attribute="VALUE">Text, images, etc.</tag>

In our previous example, anything between the “a” tags becomes a link. So the words “Design Shack” would’ve been an active text link that, upon clicking, directed the user to the href URL, which was the Design Shack homepage.

Placing an image via HTML works much the same way. We use the “src” attribute to point the browser to the location of the image and the “alt” attribute for text that will appear in place of the image if it can’t be displayed. Notice the closing tag structure is a bit different this time with all the “img” info placed within a single tag.

<img src="images/thepicture.jpg" alt="alternative text">

You Can Read HTML!

If you’ve been reading along up to this point, the following should make perfect sense.

<h1>What is HTML?</h1>
<p>You've officially learned enough that you should be able to read basic <bold>HTML</bold> fairly easily. This text is marked up with all kinds of tags, but once you know what they all mean, it becomes fairly readable doesn't it?</p>
<p>Now that you know what HTML looks like, let's move on and discuss it from a more <em>conceptual</em> point of view. What purpose does it serve in the grand scheme of web design?</p>

HTML: The Skeleton of a Web Page

We now have a good idea of how HTML is a markup language and what that means. We know that it’s basically a way to give the browser plain text and have it output richly formatted and even active content that can be clicked on to some end. The last thing we need to understand is how it fits into the overall picture of a completed web page.

As we’ve seen in the examples above, HTML mostly relates to directly inputting content onto a page. The actual underlying structure of any web page is the kind of tagged statements we just learned about. Most text and links you see on any given page, as well as many of the images, are implemented directly with HTML.

HTML is Meant to Be Boring

As I said above, HTML is technically all you need for a web page. However, this HTML content by itself is quite plain. Notice that nowhere in the examples above have we told the page what background color we want to use, what size the text should be, which fonts to apply where, how wide certain portions should be and how they should line up, etc.

We’ve simply thrown in the content without any real thought towards what it will look like. Looking at any page on the web you can see that no one stops here. Each site has its own look and feel, its own color scheme, typography, layout, etc.

For example, imagine that your local news site picks up a story from the Associate Press. They could print the story verbatim and therefore have the same basic HTML structure for that content, yet it would likely look quite different from the version on the AP site. Why?

CSS is The Skin, Hair and Clothing

The answer is that modern HTML is not generally used to govern aesthetic style and layout. For this, we’ve adopted something called Cascading Style Sheets, or CSS.

The typical web developer workflow might be to insert all the various pure content first into an HTML document, then jump over to CSS and begin crafting that content to appear in a more visually pleasing and usable way. A year later the developer could come back and toss in a brand new CSS file that makes the website look completely different, all without touching the HTML.

JavaScript jumps into this game by taking a more active role in how the page behaves. Animations, form submissions, dynamic content, these are the domain of JavaScript. Lately CSS has been encroaching on this territory, but that’s a topic for another day.

What Is HTML5?

Before we wrap this up, you’re probably wondering what the heck all this HTML5 talk is about. HTML5 is exactly what it sounds like: the fifth major iteration of HTML.

Web technologies aren’t set in stone, they’re constantly evolving and expanding. Just like print designers generally have to keep up with the newest bells and whistles in the latest version of Photoshop, so web designers have to keep an eye out for changes in web standards.

HTML5 brings lots of new features to the table while cutting out some unnecessary fat from its previous installment. For instance, HTML5 developers have some new tags to work with that make the basic structure of a web page more logical.

For more on HTML5, check out our complete series on the topic:

Conclusion: More to Come!

This article was meant to give you a basic conceptual overview of HTML. If you started reading without a clue as to what HTML is and how it’s used, hopefully you now have a basic grasp of these concepts.

As we look to the future I’ll be expanding this topic and walking through the basic anatomy of an HTML document and then moving on to another important question: What is CSS?

Be sure to check back soon for more on these topics!

Image sources: xlibber, Ryan Amos, Dave Parker

Career Options: 10+ Types of Graphic Design Jobs to Consider

So you want to be a graphic designer? What does that mean exactly? What types of jobs are available? It turns out deciding to be a designer is a pretty vague choice that often requires some more direction and career evolution before you really land yourself in a meaningful career.

Today we’ll explore the underlying structure of the graphic design industry and take a brief look at some different design jobs and career paths that you can and should explore. Whether you’ve been a designer for ten minutes or ten years, this article could help you find your place in the industry.

A Word About Semantics

The following descriptions represent, at best, industry norms largely based on my own experience. The truth is, there are no real restrictions or guidelines in place for labeling a design job and frankly, employers often get it very wrong.

I’ve seen “front-end” design jobs with years of hardcore coding knowledge requirements, “senior” design jobs that are in reality quite low level, and companies calling for expertise in UX without even knowing what it is. The simple truth is, you can’t always judge a job by its title but will have to look at its requisites and expected daily activities to be sure.

Levels

Before we get into specific areas of the industry, you should familiarize yourself with some of the basic levels that you can expect to be placed at in any given specialty. Whether you’re in package design or UI, you’ll find that there’s a hierarchy to climb your way up if you want to reach the top and make the big bucks.

Mac Operator/Entry Level Designer

Mac Operator (sometimes written “MAC Operator”) is a term that you almost never hear in web design but appears frequently in the print industry. Other terms like “Mac specialist,” “artworker,” “entry level designer,” or even simply “graphic designer” are often equivalent.

Though the use of the term varies considerably, most often you’ll find that a Mac Operator is someone who, quite frankly, can use a Mac for what is was once widely known for: desktop publishing. Mac Operators can, at the very least, use page layout software (Quark, InDesign, etc.) with a high level of proficiency.

“Mac Operators can, at the very least, use page layout software (Quark, InDesign, etc.) with a high level of proficiency.”

Mac Operators are often not usually in a position to display much, if any, creative prowess. Instead their roles are restricted to converting existing low-resolution artwork or sketches from designers to a print-ready layered file or to make minor changes to preexisting work created by someone else.

As an example, I worked for a marketing company who would have designers come up with a first round of artwork, which would be sent off for approval. If the piece came back with copy changes and other slight suggestions, it would go to the Mac Operators to be tweaked. If however, it required major design changes, it would go back to the higher level designers. In smaller companies this is obviously done all by one person but larger companies want to make sure they’re paying high level designers to do high level work, not copy changes.

Mid-Level Designer

This takes almost no explanation and is pretty much exactly what it sounds like. As a mid-level designer, you’re neither at the bottom or the top. You have a few years of experience, often anywhere from 3-7, that has earned you a reasonable pay bump and the freedom to actually engage in custom design projects from the ground up whether as a team member or solo designer.

“These are the meat of the industry and tend to be the guys and girls who produce the largest volume of work.”

Advertising agencies, marketing companies, dedicated design firms, these are filled with midlevel designers. These are the meat of the industry and tend to be the guys and girls who produce the largest volume of work, which is then passed up the line for approval and suggestions. The pay varies widely, the hours can be crazy; this is the stereotypical graphic design job.

Senior Designer

Senior designer is a pretty vague title as far as duties go. It’s typically gauged more by experience than duties, with those designers who have 6+ years of experience having a much better chance at landing a senior design position.

A very typical example of a design team will have one or two senior designers, with a handful of low to mid level designers. The senior designers are often the voices to listen to, the experienced few whose opinions carry more weight and paychecks slightly higher numbers, without necessarily being “the boss.”

“The senior designers are often the voices to listen to, the experienced few whose opinions carry more weight and paychecks slightly higher numbers.”

The senior designer is often the one who reports to the creative director and goes through status updates on various projects, lessons learned on past projects, etc. Direction from the creative director is often filtered through this person to the team.

Again though, expect senior designer jobs to be all over the place. Often it only refers to the years of experience you have. You could easily find yourself with a “senior designer” position in a company where you’re the only designer!

Art/Creative Director

These are the Don Drapers of the world. While everyone else sits in a cubicle, the Creative Director sits in an office. For the most part, Creative Directors started at the bottom and worked their way up through 10+ years of experience.

“While everyone else sits in a cubicle, the Creative Director sits in an office.”

A typical Creative Director might actually do more managing than actual full on design work. Good Creative Directors know how to maximize the potential of their teams. All major work is filtered through them and they have the ultimate say on the direction of the creative, specific artwork used, how the tasks are split up and more.

They also manage a good deal of the client relations. Meetings, planning, phone calls, emails, lunches, dinners, long flights and presentations fill the time of the Art/Creative Director, which some love while others long for the days when they could spend their time in front of Photoshop.

The Creative Director position is a precarious one. Often, they get the praise when a project goes right, even if they haven’t really designed a single thing. Similarly, when projects go horribly wrong, they take the blame, even to the risk of their own jobs. They’ll pass both praise and castigation on to their team, but ultimately it’s their heads that often rest on the chopping block.

Areas of Design

Now that we’ve made it through basic hierarchy, it’s time to examine some different directions your career could take in terms of emphasis. There are a million different types of designers and this list is not meant to be exhaustive but to provide a brief overview of the most popular titles.

I’ve split the jobs between the web and print industries. The two are conveniently categorized as separate, but the reality is that you can easily find overlap in the real world. The smaller the firm, the more likely they are to have one person who makes the coffee, designs the packaging and codes the website. Larger firms tend to specialize more and allow employees to settle into a niche.

Print

If you’re going into design, there’s no reason to only consider the digital world. Before you pursue this path, take a look at our recent article, Are Print Designers Doomed? An Important Look at the Facts. This outlines the very real trend of the decreasing availability of print jobs in light of the simple fact that print designers will definitely still continue to play important roles in society for all of the foreseeable future.

Package Design

Package designers are exactly what they sound like, they design the boxes, bottles, cans, bags and cartons that fill every shelf in every store. A package designer could focus primarily on label artwork (canned goods and cereal boxes are pretty set in shape and size) but they could just as easily be asked to come up with ideas for custom containers. Shampoo bottles are an example of a product with a container that is often heavily customized by each major brand.

“These designers have an amazing sort of anonymous fame.”

These designers have an amazing sort of anonymous fame. Their work is everywhere: in our stores, all over our kitchens and bathrooms, even in our dark, abandoned backyard sheds. Every product you’ve ever purchased that came in any sort of container was largely a work of a packaging designer.

If you can spend hours comparing peanut butter labels and dog food photography, then packaging design might be right up your alley. If you have a taste for 3D modeling, physical container design is definitely a field to explore.

Advertising/Marketing

These jobs exist in both the print and digital categories with more and more dollars being directed away from print and towards digital every year. I merely placed it in the print category because that’s where these industries were born (along with radio and television).

Advertising and marketing are two very closely intertwined but distinct categories of design. Some firms specialize in one over the other, some do both. As a designer with a job in advertising, you might do a little marketing and vice versa. However, in my experience with a marketing firm, the two areas were very distinct. Here’s how it worked where I was:

Advertising and Branding
The advertising firm or in-house department was often concerned primarily with branding and the public image of a product or company. These designers created the personality of the brand: its logo, characters and mascots, typography, colors, messaging, goals, drive, etc. This carried over to general advertising activities such as television commercials, radio spots, print ads and web banners all aimed primarily at communicating the brand’s existence and personality.

“Advertising can and does completely shape the way consumers perceive a brand.”

Advertising can and does completely shape the way consumers perceive a brand. One example that comes to mind is Herbal Essences shampoo. Years ago this brand was a fairly sensual brand obviously targeted at middle age and older females: the commercials depicted women of this age undergoing an orgasm-like experience upon using the shampoo (ridiculous but true). These days however, everything from the package design to the commercials obviously target a much younger audience and focus on youthful fun rather than mature sensuality. The shampoo inside the bottle is exactly the same, but the advertising folks have dramatically changed the perception of the product.

Marketing
Along these same lines, marketing leverages the existing brand design: logos, packaging, targeting, personality, etc. in a more sales-focused arena. Marketing designers create coupons, in-store promotional materials and engage other short-term projects meant to achieve incremental lift, which is to say tactics such as a holiday sale where purchase is hopefully increased.

“The advertising people develop who the brand is while the marketing people are tasked with getting it in the hands of as many people as possible.”

The advertising people develop who the brand is while the marketing people are tasked with getting it in the hands of as many people as possible. Sales numbers, quarterly earnings, brand partnerships; this is the world of the marketing department, all of which is translated to real materials that must be created and designed for print and digital distribution.

For instance, every scrap of junk mail that comes out of your mailbox and into your recycling bin is designed by a designer in marketing. Don’t bash it, I used to be that very guy and absolutely loved my job! It was always fun to receive, and subsequently toss, my own direct mail materials.

Print Publication Designer

The publication industry was historically one of the heaviest hitters as far as the number of designers employed, though this number has reduced dramatically with the rise of the web. Magazines and newspapers were the Internet of yesterday and are still a large part of every day information consumption for many people.

“This is definitely a field that can only exist through the hard work of talented designers.”

Every single page in these daily, weekly, monthly, bi-monthly and annual publications has to be designed, compiled and organized by teams of Mac Operators, Graphic Designers and Creative Directors. Take a look at the number of pages in any magazine, then take a look at the magazine section of your local bookstore to see how many there are and you’ll see that this is definitely a field that can only exist through the hard work of talented designers.

Devices like the iPad are creating an interesting overlap of print design techniques and digital technology. Some online publications are moving from the familiar blog format to a more magazine-like experience with individual pages that can be turned via gestures. This is a natural evolution for these types of designers and should hopefully help alleviate disappearing jobs.

Logo Design

It’s hard to believe that some people can make a full time living solely through logo design but it does in fact happen. It’s more typical for a company to provide a full range of marketing/advertising/branding services, but logo specialists are on the rise and are quite a talented group. If you’re good with a pencil and tend to be more of an artist than a designer, logo design is a perfect field for to pursue.

Once again, though logo design comes from the print world, these days tons of companies exist only in the digital realm and still require the same service.

Digital

Now that we’ve looked at some areas of print design and even some that exist in both print and web, let’s look at those jobs that primarily exist as a response to the popularity of the Internet in the past two decades or so.

Front End Web Designer

Front end web designers create the web as you know it. Each individual site and page has a “front end” and a “back end”. Though the back end can require some sort of design if it also has users, this is often a more focused on development and coding, so the front end is where most of the actual design emphasis is placed. To put it differently, developers make the websites work while front-end designers make them pretty .

“At the most basic level, front end web designers spend their time creating comps in Photoshop or Fireworks.”

Front end designers can be expected to have a range of different skills. At the most basic level, front end web designers spend their time creating comps in Photoshop or Fireworks. These comps are then passed on to developers and turned into live, working designs.

More and more though you see the job requirements of front end designers including basic development capabilities. There’s a raging conceptual debate over whether or not designers have any business coding, but the reality is that employers are beginning to require knowledge of at least HTML and CSS before considering you as a candidate. Even if you won’t actually be engaging in those activities, designers who understand the underlying structure and capabilities of the web are valuable assets. Following this same line of thought, front end development tends to be HTML, CSS and JavaScript while backend development involve heavier hitters like PHP

Designer/Developer

At the other end of the spectrum sits the designer/developer. These individuals aren’t satisfied with merely handling the front end aesthetic but push themselves further and become fully competent in HTML and CSS. Some go even further than that and pick up JavaScript, PHP, Ruby and other prominent web technologies.

Again, let the debate rage on about whether or not one person should really hand all of these duties but the reality is that there are a million people with skill sets this extensive and they are excellent candidates as far as employers are concerned.

UI Designer (User Interface Designer)

As the web and even desktop computer environments become more ingrained into our daily lives, the role of the UI designer becomes more and more important. In many ways a sub-segment of front-end design, UI design relates specifically to the design and in many cases actual hand-coded development of application and website interfaces.

For example, if you need a personal website to show off your work, you might hire a general web designer or firm to design and code the whole thing. However, if you want to create a productivity application with custom buttons, fields, navigation, typography and other design elements, then you would hire a UI designer.

UX Designer (User Experience Designer)

There is a lot of confusion surrounding this particular field and to what extent, if any, it overlaps other areas of design. In general, the user experience designer is primarily concerned with low fidelity design, meaning the end product of the UX designer can be fairly far from the finished, more aesthetically developed version of the design.

A project in its initial stages is often placed in the hands of a UX expert or team, who will outline, sketch and wireframe the basic workflow or “experience” of the user. The job doesn’t stop there though and continues through to the ultimate completion of the design in various roles that are complementary to the other types of designers on the project.

“A project in its initial stages is often placed in the hands of a UX expert or team, who will outline, sketch and wireframe the basic workflow or ‘experience’ of the user”

This is crucial in applications, e-commerce sites and other large web and software projects. It’s important to note that UI design is an aspect, but by no means the whole, of UX. Areas such as research, usability and A/B split testing all fall into the area of UX on some level.

UI vs. UX
The differences between UI and UX are often disputed. In “The Difference Between UI and UX“, our own Shawn Borsky defined UI design as specifically the design of input/output controls and anything else that allows the user to interact with the system while UX is more of the sum of all the parts and the impact it has on the user.

Others however, state that the difference between the two lies more in the difference between design and development, meaning it’s a matter of the difference between a UX Designer and the UI Developer. UXMatters.com defines a UX Designer as “one who designs the user experience” (which includes research, testing, etc.) and a UI Developer as “One who builds user interfaces that support the exchange of information between an application’s users and its back-end processes and databases.”

Obviously, the two different perspectives are quite similar and together give you a good idea of the overall difference between the two areas. As a crude rule of thumb, I always say that a UI guy designs the button but the UX guy tells him where to put it.

Other Considerations

Beyond the general hierarchy of design jobs and the specific areas of focus, there are a couple of more topics of which to take note.

Places to Work

One major concern is where you work, which has a huge impact on the definition of the titles above. As I mentioned, smaller companies tend to have fewer people perform more varied tasks while larger companies focus employees toward narrower tasks. In fact, it’s not really the size of the company that counts but the size of the design or creative department. Some employers are dedicated design firms and therefore tend to pay closer attention to these definitions and roles. Others are companies that have nothing to do with design but have an in-house design team that can range dramatically in size. For instance, in Phoenix where I live, Fender Guitars employs quite a few graphic designers.

There’s also the self-employed/freelancer route where you have the freedom to decide what type of designer you are and can even change that distinction from day to day. Want to try focusing on logos for a year? Go for it! Want to bill yourself as a UX expert? No one is stopping you. Freelancing isn’t for everyone but countless designers swear they would never do it any other way.

How Much Will You Make?

The all important question! Don’t feel bad if money is a primary concern for how you pick a job. People can go on and on about loving what you do and doing what you love but ultimately you need a paycheck and almost no one can argue that big checks are better than small ones on payday.

If, like me, you’re quite interested in this topic, check out our recent article, How Much Money Do Designers Make?

Conclusion

The point of this article is to get you thinking about all the different types of designer you could be. Sometimes we get stuck in a professional rut and, while we can’t imagine being anything but designers, we long for a new area of emphasis. If you’re starting to hate your job, the solution to professional contentment could be above. Maybe you’re struggling with UI design when you really would prefer packaging or are sick of advertising and would be more suited to focus on publication or web design. I encourage you to explore each area that interests you and put some hard thought into whether or not you’d be happier in that position.

Leave a comment below and let us know what type of designer you are and what type of company you work for. Are you a freelancer who does all of the jobs listed above or do you work for a Fortune 500 company focusing on one or two of these areas? We want to know!

50 Awesome Portfolios From Female Designers and Illustrators

Think that design is a man’s world? Think again. Today we’ve got over 50 stunning portfolios from extremely talented female designers hailing from all over the planet.

Why All Girls?

Let’s say you’re a female designer looking to build an online portfolio and you want to get some inspiration from what other female designers have done. Where would you look? A recent survey from A List Apart of over 26,000 web designers revealed that nearly 83% were male. This becomes quite evident when you start browsing through the plethora of portfolio roundups on design blogs, they’re typically all from guys! This post is meant to serve as inspiration for all the ladies out there looking to build a name in this industry.

The portfolios below absolutely blew me away in terms of talent on display. One reoccurring theme that simply can’t be ignored is how many female designers happen to be extremely gifted illustrators. I’m not sure if girls are more inclined to be artistically talented or not but this ratio seems to be much lower among males.

It doesn’t stop there though, you’ll see a strong display of proficiency in HTML, CSS, JavaScript, design theory and every other relevant skill to web design. Man or woman, this post should inspire you to be a better designer.

The Portfolios

Winnie Ho

“Hi, I’m Winnie, and this is my site. I live in Edmonton. I was born in Hong Kong. I love online gaming and creating web apps. I’m happiest when I’m playing games, designing, or building something that didn’t exist before.”

Tanya Merone

“I am a Graphic Designer based in New York, specializing in User Interface Design and Development. I build clean, appealing, and functional interfaces which comply with the latest web standards. But that’s just a part of it. Design is my life. It’s my five-star spa. It’s my roller-coaster. It’s something I do before going to bed, and something I can’t wait to do in the mornings. Without it, my world would be black and white.”

Meagan Fisher

“Raised in Florida, a new New Yorker via Boston. When not making websites, I try to write and speak about making websites.”

Veerle Pieters

“I’m a graphic/web designer living in Belgium. My personal journal reflects my journeys through design, the web, and life, and I share them here with you.”

Jessica Hische

“Jessica Hische is a letterer, illustrator and designer working in Brooklyn. You may already be familiar with one of her side projects such as Daily Drop Cap or her Should I Work for Free? flowchart. If not, howdy and pleasure to meet you!”

Sarah Parmenter

“Sarah lives in Leigh-on-Sea, in Essex, about 40 minutes outside London, with her husband and little dog, Alfie. Sarah was sat infront of an Atari by her Dad at the age of 3 and always knew her career would involve a computer, somehow. At the age of 14, Sarah started dabbling in web design. At 19 she decided to pursue this as her full time career and started her studio ‘You Know Who’ and hasn’t looked back since. Now 27, Sarah has been lucky enough to work with some great remote colleagues and peers over the years and even luckier to call some of them great friends.”

Tanya Maifat

“I am a freelance designer and digital/game artist. I enjoy designing game graphics, icons, teasers and tiny beautiful & smart illustrations for your websites and other projects.”

Tina Roth Eisenberg

“I grew up in Speicher (AR), Switzerland, influenced by renowned Swiss design and a lot of fresh mountain air. In 1999, after completing my design studies in Geneva and Munich, I crossed the Atlantic and began designing in New York. Since then, I have worked at several prominent NYC design firms, including Thinkmap, where I served as Design Director and helped design the award-winning Visual Thesaurus. I now run my own studio, swissmiss, with recent clients including the Museum of Modern Art and the Food Network. My aesthetics reveal my Swiss roots – I am a firm believer in white space and clean, elegant design.”

Jina Bolton

“Jina is a user experience designer at Engine Yard. Previously, she worked as a visual interaction designer and front-end web developer for super rad companies including Crush + Lovely and Apple, Inc. She enjoys creating beautiful experiences, and then she likes writing and speaking about it.”

Shyama Golden

“I’m basically a one woman shop for art and design, though I do hire a couple of brilliant interface designers and developers at times. As a child, I learned how to write code because I figured one day this internet thing would help me share my art with nice people all over the world.”

Hillary Hopper

“I am a creative. I can never seem to stop creating anything. There is always an idea, new picture, or some business idea running through my head. I can’t help but see a picture before I see words on it. I am drawn to color and the beauty around me. I have always been drawn to art and design. Growing up I was constantly in my sketch book or having some kind of craft happening on the dining room table.”

Allison House

“My background in user interface design is accented by a multi-disciplinary skillset that includes visual design, UX methods, content strategy and project management. The result is beautiful, well-planned websites that are intuitive, engaging, and persuasive.”

Natalie Nash

“My name is Natalie Nash, but I also go by my pseudonym, Pinky von Pout. I am 29 years old and I am a Graphic Designer. I have been married for 5 years, and live in a small Welsh town with my Husband, Jeremy and our three terriers: Sam, Jake and Tim.”

Janna Hagan

“My name is Janna Hagan and I am 19 year old web designer originally from the beautiful province of Alberta. I am currently in my second year of Web Design & Development at Durham College in Oshawa, Ontario. I am a hard working individual with a great attention to detail. I enjoy new and challenging projects that push me to learn more in the great field of web design. Throughout college, I have gained great time managment skills that allow me to work on multiple projects at once.”

Allison Nold

“As a professional graphic and web designer, I bring a range of art and design disciplines to every project I work on. From brand strategy and user interface design to creative writing and front-end development, my work exemplifies an appreciation for complete brand experiences.”

Iris Sousa

“I provide UI design & products for web, desktop & mobile applications.”

Dana Tanamachi

“Dana Tanamachi is a graphic designer and custom chalk letterer living in Brooklyn, New York.
She currently works at Louise Fili Ltd.”

Naomi Atkinson

“An English Designer and Illustrator, passionate about the web.”

Claire Coullon

“A freelance graphic designer specialising in typography, I work primarily with logo design, custom & hand drawn lettering and expressive typography. I also love print related work, especially book design & writing. Originally from France and currently living in Prague, Czech Republic, I co-run Op45 Creative Design Agency.”

Adelle Charles

“A designer and entrepreneur at heart, Adelle Charles currently acts as Chief Creative Officer at Fuel Brand Inc. where she oversees all creative and strategic direction for the company. She is a known twitter addict with a geeky love for typography and Starbucks. Charles has a Bachelor of Fine Arts degree in Graphic Design from RIT and has won various awards for her past work in television.”

Erica Schoonmaker

“I’m a graphic designer and native New Yorker currently living in San Francisco, CA. I love paper and books just as much as I love the internet and enjoy designing all types of projects across both web and print mediums.”

Samantha Warren

“I love fusing smart concepts with creative, standards-based, accessible web design. I know that listening, understanding business and user experience goals, and adhering to standards are keys to well-executed design online.”

Lindsay Burtner

“I’m a Rochester Institute of Technology New Media Design & Imaging 2009 Alumni. I worked at MODE in Charlotte, NC as an Interactive Designer/Developer.”

Heath Waller

“I discovered my passion for web design quite by accident. The experience of teaching myself about this field has been both challenging and extremely rewarding. I wake up excited about continuing to grow in this rapidly-evolving industry.”

Larissa Meek

“I have over 9 years of experience designing for the web and consider myself a standards enthusiast with a passion for visual design. I am well versed in design trends and usability with a strong handle on CSS and HTML. As an ACD at AgencyNet, I’ve had the pleasure to work on a multitude of diverse brands such as Fuse, Oxygen Networks, Bacardi, Ruby Tuesday, iN Demand, Howard Stern, Warner Brothers and many more.”

Sara White

“Sara is a twenty-four year old living in the rainy yet beautiful city of Victoria, Canada. She has a degree in business but chose to ignore the corporate world and pursue her passion, design, instead. She’s currently the Creative Director at MetaLab and likes to spend her free time in the kitchen, dabbling in interior design, and occasionally taking pictures.”

Geri Coady

“I’m Geri Coady — a Designer, Illustrator and Photographer working in St. John’s, Newfoundland — the oldest and most Easterly city in North America. Art, illustration, web design, graphic design, photography, typography, printing, advertising — how can I choose just one? My wide interest means I’m never bored — just the way I like it. I’m currently working as a Senior Designer at a local advertising agency where every day brings a new challenge.”

Denise Chandler

“Hi, my name is Denise and I specialize in designing and building websites for small businesses and personal use.”

Meg Hunt

“Hi! My name is Meg. I’m a self-professed jack of all trades, but currently work as an illustrator. My goal is to fill the world with my creations, and make people happy in the process. I want to explore and try new things; it’s my goal to branch out beyond editorial and into the living breathing world we inhabit. One day I would like to illustrate gift cards and childrens’ books and stationery and textiles and packaging and oh, all sorts of things. What do you say?”

Laura Kalbag

“I’m Laura Kalbag and I design web sites. Sometimes I do design for other digital media and print, but I find web design inspiring, exciting, and I’ll go on about it for hours.”

Inayaili de León

“Hi! My name is Inayaili de León and I’m a web designer. That means I make websites both beautiful and easy to use—I can make a lot of amorphous content look clean and easy to understand. I also take a lot of pleasure in coding mine and other people’s designs to make them work online.”

Beth Dean

“I’m a user experience designer specializing in billing and payments for transactional sites, and mobile design.”

Sneh Roy

“I am Sneh. I Design. I am the co-founder of LBOI, a design studio in Sydney, Australia. I love creating logos and wacky characters the most. I also design and develop websites, create original content for the web, blog about design here on LBOI and about food on Gel’s Kitchen. I also write design related articles for other websites and blogs.”

Kelli Anderson

“Hi. I’m an artist/designer and tinkerer who is always experimenting with new means of making images and experiences. I draw, photograph, cut, print, code, and create a variety of designed things for myself and others. ”

Andrea Garza

Sarah Kaiser

“Currently I am a fourth year New Media Design student with Rochester Institute of Technology. I’m passionate about design, illustration, 3d and motion and possess some skills in development, print and web as well.”

Amber Weinberg

“Specializing in the development of HTML5, CSS3 and WordPress using valid and semantic coding practices.
I also make apps for fun and write a blog.”

Valerie Jar

“I’m a 24-year-old designer/illustrator located in Salt Lake City. Currently, I’m working at StruckAxiom. I’m inspired by art deco, vintage signs, hand-lettering, tattoo art and people. Art and bikes are two of my favorite things. I love the hidden symbolism and meanings behind common objects and everyday things, and oftentimes, that fascination will play a role in my design and illustration.”

Megan Kirby

“Art director and graphic designer specializing in luxury brand development with multidisciplinary experience refining the brand story with illustration, print and interactive design.”

Erika Van Der Bent

“Erika van der Bent, Freelance Designer for online / digital media , age 27.
Born and raised in The Netherlands. Started to discover the world of webdesign when I was 12 and I felt in love. Over the years I have worked for and with several different web-design companies.
A beautiful interface makes me happy!”

Susan Murphy

“Once upon there was a freckly Irish girl name Sue. She studied Visual Communications in Dublin, is currently studying for a Masters in the USA and will soon be moving to work in the Netherlands. Never defined by a place or a thing, she always aims to try and be a master of all trades, a jack of none. ”

Dever Thomas

“Dever Thomas is an aspiring graphic designer, illustrator, creative person, and soon-to-be graduate of Indiana University.”

Melissa Pohl

“Like many designers, I grew up with a passion for drawing and artistic pursuits of all kinds. After high school, this love of creating lead me in various directions which included becoming a tattoo artist, hair-stylist, and painter. As soon as I was introduced to the world of digital graphics however, I fell in love.”

Laura Javier

“I’ve got one foot in the world of print, one foot in the world of pixels, and a love for both. I’m graduating this spring with a degree in Communication Design, a sense of humor, and a mission to find some amazing people to work with.”

Emma Taylor

“A creative freelance web and graphic designer based on the sunny island of Cyprus. With an ultimate passion for website design and development, branding and advertising material. Focusing on designing simple, clean attractive websites that fully comply with today’s web standards for wonderful clients across the globe.”

Christina Fowler

“Who is she? She’s the descendant of generations of magic designers (since 2008). And she’s no ordinary woman. She’s girly. Full of personality. A good communicator. And – more.”

Abigail (Ruby Too)

“I work full-time in ‘Ye Olde Web Towne’ at Harmonix. I do some visual design but I spend most of my days knee-deep in CSS & HTML (and learning JavaScript). I get to work with some of the most talented and entertaining people I’ve ever come across. I love my job.”

Ciara panacchia

“My name is Ciara (pronounced Kee-rah). I come from a small town in Ireland called Carlow, but found a place to call home in U.S. when I moved to Illinois in 2005. Although my love of the Arts started at a very early age (since I could hold a pencil), I have been a dedicated student of design since 1998, I don’t think it is something you ever stop learning.”

Heather Grossman

“I’ve been a web designer for more than a decade. I’ve learned many things about web design since starting out in this industry, and the things I’ve learned have helped me develop processes that benefit everyone involved in the projects I work on.”

Susie Ghahremani

“Susie Ghahremani is a 2002 graduate of the Rhode Island School of Design (RISD) with a BFA in Illustration. Her artwork combines her love of nature, animals, music and patterns. Born and raised in Chicago, Susie now happily spends her time painting, drawing, crafting and tending to her pet finches and cat in San Diego, CA. ”

Melissa Washin

“I am a designer and developer who builds websites and creates print materials for small businesses and agencies.”

Aubrey Klein

“Hi, I’m Aubrey, a graphic designer living in Dallas, TX. I specialize in web, illustration, tweeting and thing-making.”

Bianca Mangels

“My name is Bianca and I’m a Screen and Web Designer from Frankfurt (Germany). I love design in every form and I can’t get enough inspiration.”

Courtney Joy

“I currently work full-time for a creative firm in Dallas called Vintage 56. We offer services in graphic design, audio engineering, video production and web development. My role, as the graphic designer, includes branding/logo marks, business cards, stationeries, brochures, occasional web UI, product packaging and keynote presentations.”

Show Us Yours!

This post doesn’t even scratch the surface of extremely talented females in the design industry. If you’re one of them, leave a comment below with a link to your portfolio so we can check it out!

How to Make Slicing Suck Less: Tips and Tricks for Slicing a PSD

I have a dirty little secret, I hate slicing Photoshop files. By that I don’t mean that I hate turning PSD comps into websites, I mean that I hate Photoshop’s slicing tools. The whole process makes my PSD look busy, cluttered and overly complicated so I usually skip it altogether and instead opt to manually crop and save out images individually as needed.

In order to fight this tendency and attempt to see the true usefulness of Photoshop’s slicing tools, I embarked on a mission to learn all the intricacies of how slicing works. Below is a collection of tips and tricks that resulted from this journey. Hopefully, you’ll learn a thing or two you never knew!

There are Three Types of Slices in Photoshop

Three types of slices!? This was one of the most interesting and surprising things that I learned. Having not really experimented with the slicing features too much, I just figured there was only one way to go about it. I was wrong.

The three different kinds of slices are User Slices, Auto Slices and Layer Based Slices. To begin, let’s talk about the two you’re probably familiar with: User Slices and Auto Slices. These are very closely related, in fact, one creates the other.

As you know, to slice a PSD you start by grabbing the Slice Tool (C) and drawing a box around the area that you want to export as a standalone image. By adding slices to all the areas of your comp that you want to do this to, you can quickly and easily optimize and export several images at once.

What I’ve done here is draw a box around the logo at the top of the page. This one action created both a User Slice and several Auto Slices. When you create a slice, Photoshop assumes that your end goal is to turn the entire PSD into a series of slices. I personally think this assumption is quite annoying, and we’ll discuss later how to get around it. For now, just know that because of this assumption, Photoshop extends the edges of your slice all the way across the PSD, thereby creating several other sections automatically. This is illustrated in the image above.

Tricks for Working with User and Auto Slices

While we’re on the topic of User and Auto Slices, let’s go over some of the obvious and not-so-obvious features so that you can really get a feel for what tools and options you have at your disposal.

Moving and Editing Slices

Once you’ve made a slice, you should see controls similar to that for a Free Transform that will allow you to move and edit it. You can also use the Slice Select Tool to ensure that you’re only editing current slices and not creating new ones. This tool is found under the Slice Tool in the fly out menu.

Converting Auto Slices to User Slices

Throughout the entire slicing process, Auto Slices are continually created and updated and they stay distinct from user slices. Later, we’ll look at how to export them as files or ignore them when exporting, but for now let’s take a look at how to turn an Auto Slice into a User Slice.

The process is extremely simple. First, you have to select the auto Slice using the Slice Select Tool. Next, select the Auto Slice that you want to convert and hit the “Promote” button near the top.

That’s it! Now the Auto Slice should change color, indicating that it is now a User Slice. Now you’ll have greater control over its size and how it exports.

Auto-Dividing Slices

When you have a series of objects that are distributed horizontally, vertically or even in a grid, you don’t have to take the time to go through and make a slice around each individual unit. Instead, you can make one slice that covers all of the objects and tell Photoshop to do the rest.

To do this, first make your big slice by drawing a box around all of the objects. Then, with the Slice Select Tool enabled, click the “Divide” button at the top of the page.

This should bring up the “Divide Slice” dialog box shown above. Using this window you can quickly insert extra vertical and horizontal slices. If they don’t align right, you can adjust them manually after hitting the “OK button.”

Slices from Guides

Many of you are probably much more comfortable working with guides than slices inside of Photoshop. The reality is that they both work very similar, but the guides system admittedly feels a bit smoother.

If this is how you roll, this fits perfectly into an easy workflow for creating slices. Simply drag out guides to slice up your PSD and ignore the slicing tools altogether. Then, once you’re all finished, select the Slice Tool and hit the “Slices from Guides” button at the top.

Naming Slices

One of the annoying things that will bug you the first time you work with slices is that when you export them, the resulting files all come up with big ugly names that aren’t at all meaningful. To fix this, you need to make sure you’ve gone in and named each slice appropriately. Whatever name you assign will then be carried over as the file name upon export.

To name a slice, simply double-click on its contents with the Slice Tool selected. This will bring up the dialog below.

Notice that you have several options here, including setting the color for the slice, manually inputting the dimensions and assigning a name. There’s also a bunch of HTML stuff like URL, Target, etc. It turns out, Photoshop can take your sliced PSD and output it as a web page. Some bash this functionality because the default settings create a table-based layout, however you can switch these to utilize CSS.

Now, don’t get too excited. Even with the CSS options selected, Photoshop is still pretty rotten at building a website for you. You’re much better off doing it by hand or at least taking it over to Dreamweaver, which means you should ignore all these other options completely.

Layer Based Slices and Why They’re Better

One of the main features that made slicing suck a lot less for me is Layer Based Slices. These are a particular brand of User Slices that are superior in several ways.

As the name implies, these slices are not based on a box that you draw manually but instead automatically adhere to a layer’s bounds. To create a Layer Based Slice, select a layer in the Layers Palette, then go to the menu and select Layer>New Layer Based Slice. Note that this even works if you have multiple layers selected, each layer will simply be turned into its own slice!

Obviously, in order for this to work properly, you have to be really be good about how you structure your layers. You should be building your mockups as fully layered and organized files anyway so this shouldn’t be a problem.

The Advantage

One of the main reasons that normal slices are so lame is that it creates a lot of extra work if you want to go back and tweak your designs. After you shuffle the artwork around, you have to then go back and move all your slices to align with the new layout. This annoyance is why I always just manually save out the individual pieces through cropping.

However, Layer Based Slices are actually quite intelligent. When you move around your layers, your slices automatically follow. If you add an effect that changes the bounds, such as an Outer Glow, the slice expands to include it. If you transform the layer to 30% of its original size, again the slice updates automatically!

Obviously, there’s a clear argument here for using Layer Based Slices whenever possible as it saves you an incredible amount of time in the inevitable re-design stage.

Killing the Clutter

Another of my biggest annoyances with slicing is that it can create a really cluttered looking PSD. This is mostly do to the Auto Slicing side effect.

As an example, take a look at the image below (it’s a bit over-simplified here but you get the point). Here I only really only wanted to create three slices, but Photoshop has automatically gone in and turned it into twelve slices!

I don’t know about you, but I don’t build webpages as one big collection of images all crammed together. So I simply don’t want all these extra slices! I’m not going to export these areas into images, so all they’re doing is adding noise to my interface. When I see a document like this, the slices cease to be a meaningful tool for me.

To fix this, we can grab the Slice Select Tool and hit the “Hide Auto Slices” button at the top of the screen. This does exactly what the name implies, ditches all of those nasty Auto Slices from view.

Look how much simpler our document becomes! The few slices that we used are clearly identifiable and therefore retain their usefulness. In my opinion, this method of viewing your slices is greatly preferred. This is one of those cases where Photoshop simply tries too hard to predict my preferred workflow and ends up overdoing the features.

Exporting Slices

This is where the usefulness of slicing really comes into play. Without slicing, you have to save out each portion of your comp one at a time. The workflow would be something like the following: make a selection, crop, optimize in Save for Web, save, undo crop, and repeat. That’s a lot of unnecessary steps! Let’s see how it works with slicing.

After you’ve finally figured out all the ins and outs of slicing and have your PSD ready to go, it’s time to go to the File menu and select “Save for Web and Devices.” You’re probably familiar with this dialog already but it’s a bit different when you have slices in your document.

If you have any slices, the preview of your document in this window shows all of them (unfortunately, this includes those annoying Auto Slices). From here you can simply click to select each slice and optimize the settings for each individually. This includes file type, quality, etc. So in one session, you can set up an export of three JPGs and a PNG, each at a quality that you deem appropriate.

Once you’ve adjusted everything to your liking, hit the “Save” button. A dialog should pop up that allows you to choose a folder to place all of the images in. Remember that we already set up the naming convention so just leave that as is. The key here is to make sure that you’re only exporting either “All User Slices” or “Selected Slices”.

Depending on your desired workflow, either of these options works great. The default option is simply “All Slices”, which will include not only your User and Layer Based Slices, but also the completely useless Auto Slices that you’ll just have to throw in away anyway. Save yourself the trouble and ditch these here before the actual save takes place.

Conclusion

We went over a lot of pretty technical Photoshop stuff today so I’ll try to sum it up nicely. First, slicing a PSD can really feel like a clunky process if you don’t know what you’re doing. Make sure you really look around in Photoshop and experiment with the tips above to ensure that you’re making the most of the tools available to you.

Secondly, remember that there are three types of slices: Auto Slices, User Slices and Layer Based Slices. Auto Slices are pretty lame and are more of an unfortunate side effect to slicing than a helpful feature. You don’t have to agree with me on this, but if you do, hide them so they’re not so distracting. User Slices are simply those that you intentionally create. You can adjust them with the Slice Select Tool and name them by double-clicking on the contents. Layer Based Slices are just like User Slices, only they are much smarter because they automatically adhere to a given layer’s bounds. You can move, resize and add effects to a layer and the slice will continually update on its own.

Finally, when exporting a document with slices, choose the Save for Web command and optimize each slice as its own file. Also make sure to only export the User Slices or Selected Slices, otherwise all of the Auto Slices created by Photoshop will fill up you images folder.

This is probably way more than you ever wanted to know about slicing in Photoshop, but hopefully this has helped you spot the inefficiencies in the system so that you can adjust and still take advantage of this useful set of tools without being hampered by its awkwardness.

Leave a comment below and tell us how you slice a PSD. The workflow that I’ve set up here is just one of many possible solutions and I’m anxious to hear and learn from yours!

Looking for a reliable PSD to HTML development company? We have all that it takes to create beautiful, responsive markups that render perfectly across platforms and devices.

Reach out to us to discuss your project and get back an immaculately coded HTML template in just a few hours!

Frequently Asked Questions

What is PSD slicing and why is it important in web design?

PSD slicing is the process of dividing a Photoshop Document (PSD) into smaller image files that can be used on a website. It is important in web design because it allows designers to create visually appealing, custom web designs that load quickly and efficiently. By slicing a PSD, designers can extract images and graphics, optimize them for the web, and create a website that accurately reflects their design vision.

Can you explain the difference between raster and vector slicing?

Raster slicing and vector slicing are two different techniques used to create images for websites. Raster slicing involves dividing a bitmap image (such as a photograph or scanned image) into smaller pieces, while vector slicing involves dividing a vector image (such as a logo or illustration) into smaller pieces. Raster images are made up of individual pixels, so when they are resized, they can lose quality and become pixelated.

Vector images, on the other hand, are made up of shapes and paths, so they can be resized without losing quality. As a result, vector slicing is typically preferred for creating images that need to be resized frequently (such as icons or logos), while raster slicing is more commonly used for photographs and other images that do not require resizing.

What are some best practices for optimizing sliced images for web use?

Optimizing sliced images for web use involves reducing their file size without compromising their quality. Some best practices for optimizing sliced images for the web include:

Using the appropriate file format (JPEG, PNG, GIF) for the type of image
reducing the image size to the smallest dimensions possible.
Using compression techniques to reduce file size without losing quality
Minimizing the number of colors used in the image.
Removing any unnecessary metadata or hidden layers in the image
using CSS techniques like sprites and lazy loading to reduce the number of HTTP requests.

By following these best practices, sliced images can be optimized for the web, resulting in faster loading times and a better user experience.

What are some common mistakes to avoid when slicing PSD files for web design?

There are several common mistakes to avoid when slicing PSD files for web design, including:

Not organizing layers properly, which can lead to confusion and errors during slicing.
Saving images in the wrong file format or at the wrong resolution, which can affect image quality and load times.
Failing to account for different screen sizes and resolutions, which can lead to inconsistencies in the final design.
Neglecting to optimize images for the web, which can result in slow loading times and a poor user experience.
Forgetting to test the sliced images on different devices and browsers to ensure that they display correctly.

By avoiding these common mistakes, designers can ensure that their sliced images are optimized for the web and accurately reflect their design vision.

Can you provide some tips for slicing images with transparency or complex backgrounds?

When slicing images with transparency or complex backgrounds, it is important to pay attention to the details and take extra care to ensure that the final image looks good on the web. Here are some tips for slicing images with transparency or complex backgrounds:

Use the right file format for the type of image (PNG is often a good choice for images with transparency).
Carefully select the area of the image to slice, paying attention to the edges and any areas of transparency.
Consider using a layer mask or alpha channel to isolate the area of the image that you want to slice.
Use anti-aliasing to smooth the edges of the sliced image and avoid jagged edges or pixelation.
Test the sliced image on different backgrounds to make sure that it looks good and blends seamlessly into the design.

By following these tips, designers can create high-quality sliced images with transparency or complex backgrounds that accurately reflect their design vision.

Are there any limitations or considerations to keep in mind when slicing PSD files for email templates or other non-web applications?

Yes, there are several limitations and considerations to keep in mind when slicing PSD files for email templates or other non-web applications. For example, email clients often have limited support for certain HTML and CSS elements, which can affect how the sliced images are displayed.

Additionally, email templates typically have stricter size limitations than web pages, so designers need to be mindful of the file size of the sliced images.

It is also important to consider the aspect ratio of the sliced images and make sure that they look good on a variety of devices and screen sizes. By keeping these limitations and considerations in mind, designers can create effective sliced images for email templates and other non-web applications.

Effortless Full Screen Background Images With jQuery

Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.

We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build. Let’s get started!

Demo

Just so you can get a feel for what we’re building, check out the demo below. To see the jQuery in action, resize the browser window and watch how the image adapts dynamically.

View the demo

Now that you’ve seen how it works, let’s build it!

Step 1: Grab Fullscreenr

The first thing you’re going to want to do is go to the Fullsreenr website and download a copy. Grab the JS files and throw them into a folder with a basic website framework: html, css and images folder.

Step 2: Start the HTML

To begin the HTML, thrown in the code for an empty page and add the references for the stylesheet and the two JavaScript files.

<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript codes -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>

Step 2: Select a Background Image

Before we insert the code for placing our background image, we’ll need to know the size. Which of course means we need to find an image.

I grabbed the image below by Faisal.Saeed on Flickr Creative Commons. It’s an awesome snowy mountain scene that should make the perfect setting for our site.

Next, I sized the image so that it would be 907px by 680px. These are the dimensions that we’ll use in our next step.

Step 3: Insert the Fullscreenr Snippet

In the demo files of the Fullscreenr download, you should find the following JavaScript snippet to enable the plugin. I’ve customized it a bit with the image dimensions specified above.

<script type="text/javascript">  
    var FullscreenrOptions = {  width: 907, height: 680, bgID: '#bgimg' };
    jQuery.fn.fullscreenr(FullscreenrOptions);
</script>

All you have to do for your own version is change the hight and width to match that of your own image.

Step 4: Body HTML

Next up, there is a chunk of HTML in the demo page that you’ll need to grab. The structure may seem a little funky but really all the developer has done is applied the background image to the body and created a basic container (realBody) for you to then add all the rest of your content to. If you don’t like the div ID names used by the developer, feel free to change them to something more conventional.

<!-- This is the background image -->
<img id="bgimg" src="img/mountains-907x680.jpg">
<!-- Here the "real" body starts, where you can put your website -->
<div id="realBody">
    
<!-- Here the "real" body ends, do not place content outside this div unless you know what you are doing -->
</div>

As you can see, all we’ve done here is throw in the background image.

Step 5: Add the CSS

Finally, throw in the CSS below to make everything work properly. This is necessary to make sure your content will scroll correctly and stay positioned properly in the stack.

body {
    overflow:hidden; 
    padding:0;margin:0;
    height:100%;width:100%;
}
#bgimg {
    position:absolute;
    z-index: -1;
}
#realBody{
    position:absolute;
    z-index: 5; 
    overflow:auto; 
    height:100%;width:100%;
    background: url('../img/raster.png');
}

And with that, you’re done! You should now have a background image that dynamically scales with the browser window. The transition is super smooth and works brilliantly.

The plugin comes with an dotted pattern image overlay, shown below in a zoomed-in view. If you don’t like this effect, simply leave it out!

If you’d like, you can stop here and proceed with your own design. If you’re interested on where to go from here, I’ll finish up with some fun design.

Step 6: Add a Background Div and Header

Now that we’ve got our background image, we want to center a div over the top of it and give it a background fill. We’ll also give it a basic header that I thought seemed appropriate given the snowy background image.

<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
    </div>
</div>

Next we’ll style these two elements with CSS (insert this in addition to the CSS above).

#container {
    width: 800px;
    height: 1000px;
    margin: auto;
    margin-top: 60px;
    padding-top: 10px;
    background:rgba(0,0,0,.8);
    
}
#container h1 {
    color:#fff;
    font-family: 'KitchenpoliceRegular', sans-serif;
    font-size:60px;
    font-weight: normal;
    text-decoration:none;
    text-align:center;
}
@font-face {
    font-family: 'KitchenpoliceRegular';
    src: url('KITCHENPOLICE-webfont.eot');
    src: local('‚ò∫'), url('KITCHENPOLICE-webfont.woff') format('woff'), url('KITCHENPOLICE-webfont.ttf') format('truetype'), url('KITCHENPOLICE-webfont.svg#webfontCRDciSXC') format('svg');
    font-weight: normal;
    font-style: normal;
}

This is a big chunk of code but it’s all super basic. First, we gave the container a height and width, then set the margins to auto. This gives us a vertical strip that automatically stays centered on the page. The background color for the container has been applied using rgba. This will give us a nice transparent container that lets some of that nice background image show through.

Next, we used applied some basic styles to the header and customized the font using @font-face. I used a font called Kitchen Police and an @font-face kit from FontSquirrel.

At this point, your page should look like the image below.

Step 7: Add a Header Image

The next step is extremely easy. All you have to do is toss in an image that’s the same width as the container (800px).

<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
    </div>
</div>

And with that your image should fall right into place without any extra styling.

Step 8: Add Some Text

In this step we’re going to add some basic filler text to the page and in the next we’ll add a grid of images. Since the text will hypothetically tie into the images, we’ll throw it all into a “grid” div.

<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="exampleDiv">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
        
        <div id="grid">
            <h2>Good Times on Hoth:</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        
    </div>
</div>

To style the text, we’ll first add a little margin to the top of the div. Then we apply basic color, size, and positioning to both the h2 tag and the paragraph tag. Notice I used some more @font-face goodness, this time with Lobster.

#grid {
    margin-top: 20px;
}
#grid h2{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    font-size: 30px;
    font-family: 'Lobster', sans-serif;
    margin-bottom: 3px;
    font-weight: normal;
}
#grid p{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    margin-bottom: 3px;
    font-size: 12px;
    font-family: helvetica, sans-serif;
    margin-top: 0px;
    width: 650px;
    line-height: 18px;
}
@font-face {
    font-family: 'Lobster';
    src: url('Lobster_1.3-webfont.eot');
    src: local('‚ò∫'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
    font-weight: normal;
    font-style: normal;
}

This should give you a nicely style block of text similar to that in the image below. Now we can move onto the final step!

Step 9: Add the Gallery

To finish the page up, we’ll toss in a simple image gallery that is basically just a grid of nine JPGs. To give the photographers credit, I’ve linked each to the original source images on Flickr.

<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
        
        <div id="grid">
            <h2>Good Times on Hoth:</h2>
            <p>Lorem ipsum dolor sit...</p>
            <a href="http://ow.ly/35afM"><img src="img/hoth1.jpg"></a>
            <a href="http://ow.ly/35ah9"><img src="img/hoth2.jpg"></a>
            <a href="http://ow.ly/35aim"><img src="img/hoth3.jpg"></a>
            <a href="http://ow.ly/35ajg"><img src="img/hoth4.jpg"></a>
            <a href="http://ow.ly/35ajY"><img src="img/hoth5.jpg"></a>
            <a href="http://ow.ly/35alw"><img src="img/hoth6.jpg"></a>
        </div>
        
    </div>
</div>

As the final piece of the puzzle, we’ll toss in some margins and borders to make the image grid look nice and styled.

#grid img {
    margin: 20px 10px 20px 10px;
    border: 3px solid #000;
}
#grid a:hover img{
    border: 3px solid #fff;
}

That should space everything and and finish up your page! Feel free to keep going and add in a navigation section, footer, sidebar and whatever else you can think of!

Conclusion

jQuery and the Fullscreenr plugin present the easiest and best-looking solution I’ve found for scaleable background images. If you’d rather try the same effect with CSS, check out Chris Coyier’s methods on CSS-Tricks. Chris presents three possible alternatives, the last of which uses pure CSS and works much better than other CSS attempts I’ve seen.

As always, thanks for reading. If you liked the article give us a tweet, digg or any other social shout out you can come up with!

10 Tips for Designing HTML Emails

Love ‘em or hate ‘em, HTML emails are a wildly popular marketing tool and you will almost definitely come across clients that want you to build them.

If you don’t know anything about HTML emails, they’re annoying to develop and break all the rules you’ve ever learned as a web designer, but being able to code them is a valuable skill to possess. Today we’ll look at ten quick and easy tips to get beginners started on the road to creating beautiful and functional emails.

#1 Use Tables

Wait what? Didn’t we abandon non-semantic table-based designs ages ago? Yep, and now you get to experience the joy all over again. Unfortunately, most email clients don’t support a plain old CSS layout like you’re used to. Instead, it’s back to the 90s and familiarizing yourself with cellspacing.

If you’re unfamiliar with table-based layouts, here’s a simple example.

	<table cellspacing="0" cellpadding="10" border="0"> <tbody><tr> <td width="100"></td> <td width="200"></td> </tr> </tbody></table>

Table Tools

If you want an easy way to build the basic structure of an HTML table, check out the free generators below.

TABLEIZER!: Converts spreadsheet data to HTML tables.
Quackit Table Generator
Accesify Table Builder

#2 Use Inline CSS

HTML emails do support limited CSS, but you can’t use an external style sheet. Instead, you use inline CSS to style the various elements in the tables.

	<p style="background: #cccccc; color: white;">Some text goes here.</p>

The snippet above shows you the basic syntax for inline CSS. As you can see, the code is essentially the same, you just embed it right into the code of your HTML rather than linking to another document.

Inline CSS Tools

If you’re more comfortable using an external stylesheet during development, just use one of the tools below to convert it to inline styling once you’re finished.

Premailer: Converts CSS to inline styles and checks your code against email standards
HTML Inline Styler: Converts CSS rules into inline style attributes

#3 Nest Your Tables

Another quirk regarding email clients is that they are quite inconsistent when it comes to interpreting margins and padding. To overcome this problem, use nested tables whenever possible. The code is a little messier but you’ll have much greater compliance across the board.

To “nest” a table simply means to place one table inside of another. You can nest multiple tables, just be wary of overnesting and creating a huge mess. Some email clients start to get buggy around eight nests, but you should be able to come in far below this number for most of your designs.

#4 Watch Your Width

Several email clients are fairly limited in their width. For instance, consider the online Gmail client. Building a normal size webpage and then displaying it in the tiny Gmail window will force the user into awkward horizontal scrolling.

There are too many possible clients and screen sizes to code for every scenario so the consensus among the web community is usually just to keep your emails fairly narrow. As a rule of thumb, try to stay under 600 pixels wide in every email design you create.

#5 Be Careful With Images

There are several complications to consider when using images in HTML email. First, some clients don’t support background images, others do support them but will often have them turned off by default. This is by no means an argument that you shouldn’t use images in your design. The strongest selling point of HTML emails is that they surpass the quality and possibilities of the rich text already available in most email clients. Eliminating images altogether can really reduce the benefits.

Instead of completely abandoning images, just make sure that your message works fine without them. Use background colors as a fallback so any text will remain readable and test your layout with images disabled.

Another thing you have to be aware of with images is that you can’t (or at least, shouldn’t) embed them into the email. Instead, you’ll have to host them long-term on a reliable server and then link to them in your code.

Finally, make sure you watch your load times. People are used to clicking on an email and seeing the contents, not waiting for images to load. If you make me endure long load times, I’ll hit delete faster than you can explain why it’ll be worth the wait.

#6 Allow Easy Unsubscribing

HTML emails are most often part of a stream of newsletters subscribed to by a user. Many times users sign up for a service and don’t even realize it means they’ll be receiving a newsletter. Other times they consciously decide to sign up but change their mind later.

In either case, unsubscribing should be a painless process that virtually anyone viewing the email should be able to figure out. To accomplish this, include an unsubscribe link and make sure it’s easy to spot. Designers and marketers who attempt to hide this link lack integrity and respect for their audience.

If the person doesn’t want your email, they’re not reading it anyway. There’s no value in sending 10,000 emails to spam folders all over the world. It’s far better to know that those receiving your newsletter are actually interested.

#7 Consider Your Content Carefully

Marketers and business owners often see an email newsletter as the sole source of consistent contact with their customer base. They are therefore often tempted to fill it with as much content and information as possible. As a designer, help them resist this urge by designing a template that showcases a little information extremely well rather than a lot of information very poorly.

The key here is quality over quantity. No on will read a thousand word marketing email. You have, at the very best, 3-5 seconds to grab the average reader’s attention before they hit delete. Accomplish this with fast loading, attractive visuals, concise copy and clear descriptive headers.

#8 Include Other Viewing Options

In addition to including an unsubscribe option, you should present at least two alternate ways to view the email for anyone not receiving their preferred experience. For the minimalists, a simple text version is best. There are plenty of people out there who think that email should stay simple and simply don’t want to see your fancy-pants attention grabbing graphics.

At the opposite end of the spectrum are users who do want the full rich experience but are being held back by a buggy email client. For these users include a fairly prominent link (often at the top) that allows them to view the email in a browser. Because browsers are infinitely better for displaying HTML and CSS, you can even beef up the browser-based version by coding it more like you would a normal web page (or simply have the browser display the original version).

#9 Test Thoroughly

When designing a web page, one of the most annoying processes you have to go through is cross-browser testing. This process usually involves testing for Webkit, Mozilla, IE and maybe even Opera if you’re really dedicated. If you can believe it, designing for email clients is even worse!

There are upwards of 30 popular email clients, each with their own standards and varying support for different commands. To begin, test in the email clients that you have handy. Sign up for accounts with popular webmail clients like Gmail, AOL and Yahoo. Also make sure to test out the default apps for both Macs and PCs.

Obviously, you can’t test every client. If you’ve got the budget, sign up for a month of a service like Litmus during the testing phase. This will allow you to quickly get a preview of the finished product on 33 different email clients and is one of the best ways to ensure that everyone is covered.

During the design stage, be sure to check out The Email Standards Project. This is one of the single best sources available for detailed reports regarding what is and isn’t supported by various email clients.

#10 Use a Template

The best way that I’ve found to begin the process of designing your first HTML email is to grab a template. Even if you have a very specific design in mind, modifying a professionally developed template rather than starting from scratch can save you countless hours in troubleshooting time.

This will also give you a good look into how other developers structure and style their tables. Just remember that if you’re going to redistribute or sell an email template as stock art, you shouldn’t be stealing from someone else’s work! In these cases, you’ll want to really know what you’re doing and develop your own structure from the ground up.

Free Email Templates

Fortunately, you don’t have to pay a dime to snag some quality free templates from which to start your design process. Most of the premium email services offer free downloads to get you started, often with no signup required. Check out the resources below:

Conclusion

To sum up, when designing email templates, start with a good basic template, code like your dad did a decade ago, keep your content both conceptually and physically lean (less than 600 pixels wide), make it easy to unsubscribe and see alternate versions, and test like crazy.

Leave a comment below and let us know if you found the article helpful. Also be sure to share any bits of wisdom you’ve picked up along the way for designing HTML emails.

30 Free Video Tutorials for Learning Web Design

Getting started in web design can be quite difficult. For readers, there are tons of great free tutorials online. However, some people find visual instruction to be more effective for their learning style.

Instructional videos are an incredibly rich learning tool and could be just what you need to finally learn web development properly. We’ve compiled a list of over 30 excellent screencasts for beginners across a number of web technologies and disciplines.

NetTuts

NetTuts is one of the best providers out there for free content related to learning web design. They have a wealth of articles and video tutorials for learners at all levels. Here are a few for beginners in HTML5, CSS3 and JavaScript.

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

“This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.”

How to Make All Browsers Render HTML5 Mark-up Correctly: Screencast

“HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5’s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.”

How to Build a Lava-Lamp Style Navigation Menu

“One of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.”

JavaScript from Null: Video Series

“This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.”

How to Convert a PSD to XHTML

“I continue to be amazed by how well Collis’s “Build a Sleek Portfolio Site From Scratch” tutorial continues to perform. It’s been months, yet it still posts strong numbers every week. Considering that fact, I decided to create a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.”

Slice and Dice that PSD

“In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.”

Doctype TV

The guys at Doctype put out frequent screencasts on subjects ranging all over the web design spectrum. Below you’ll find videos to get you started on Ajax, grid-based design, CSS3 columns and building your first jQuery plugin.

Grid Based Design and AJAX 101

“Nick gives an overview of grid based design and Jim breaks down the basics of AJAX.”

CSS3 Columns and jQuery Plugins

“Nick deconstructs CSS multi-column layouts and Jim shows you step-by-step how to create your very own jQuery plugin.”

TutVid

TutVid is a web design tutorial site that offers free instructional videos. You can also buy a given video to receive a higher resolution downloadable version along with any associated project files. Below we’ll look at a few of the available Dreamweaver tutorials.

Dreamweaver CS4: Styling Tags with CSS

“Learn all about styling tags and how to write CSS code in Dreamweaver. By the end of this tutorial you will have a good understanding of how to write CSS, how CSS works, and how you can write your CSS code in Dreamweaver.”

14 Steps: How to Use Divs

“We will take a look at a whole bunch of the things you want to be sure to know when starting to use Divs. Learn all about placing and using Divs as well as styling them with CSS in Dreamweaver!”

Create a Basic XML Document

“In this video we will quickly run over XML, what it is, and what it is used for. We will then sit down and write out our very first XML document just a simple list of six people. We will use Dreamweaver, but really any text editor is fine. We will cover creating writing the actual language, adding attributes, as well as how we create our own tags and just some basics to get you going writing your own XML document.”

Create a Full CSS Website

“In this video we will start with a folder of images and in about 30 minutes construct a very simple 2 column layout using CSS to style our page! We will learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! Start learning to harness the raw power of Cascading Style Sheets to create, layout, and style your web pages today!”

Themeforest

Themeforest is an Envato marketplace that sells website templates of various types (HTML, WordPress, Joomla, etc.). The site also has a blog that posts some really helpful content from time to time. Check out the screencasts on PHP and jQuery below.

Diving into PHP Video Series (11 Parts)

“Today marks the beginning of a brand new series that will show you EXACTLY how to get started with PHP. Just as with the “jQuery for Absolute Beginners” series, we’ll start from scratch and slowly work our way up to some more advanced topics. ”

jQuery for Absolute Beginners

“Starting today, I’m launching a daily video series that will teach you PRECISELY how to use the jQuery library in your own projects. We’ll start out by downloading the framework, creating our first function, examining syntax, and more. Every day, I’ll post a five-ten minute “training regimen” that expands on what you’ve already learned. So there’s no reason to fight it anymore! Learn this dang thing and start earning more money on ThemeForest.net with your new-found skills.”

CSS Tricks

Chris Coyier over at CSS Tricks pushes out a steady stream of incredibly educational video tutorials. His site currently has 84 free to download screencasts that cover various HTML, CSS and JavaScript techniques and tips. Below we’ll look at six that should be helpful to beginners.

Converting a Photoshop Mockup (part 1 of 3)

“In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time.”

CSS Formatting

“Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it’s harder to browse attributes. You can also choose how you want to group your CSS statements.”

Converting a Photoshop Mockup: Part Two, Episode One

“There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time.”

Designing for WordPress: Part One

“In part one, we will be downloading and installing WordPress. Then we will install the “Starkers” theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it’s more trouble than it’s worth! In part two, we will go over the theory behind designing for WordPress and how it’s much like “working modularly” and actually get started designing. In part three, we will finish up the design and start in with some more advanced functionality.”

HTML & CSS – The VERY Basics

“This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don’t need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser to preview them during development. You can think of HTML as the content of your website: a bunch of text and references to images wrapped in tags. CSS is the design of your website. It targets the tags you wrote in your HTML and applies the style. Keeping these two things separate is key to quality web design.”

Building a Website: HTML/CSS Conversion

“In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file and writing the HTML and CSS we need to get the job done. Much of the work isn’t actually “slicing” the Photoshop file, but looking closely at it and trying to mimic what is done there with correct markup and CSS techniques.”

Victoria Web

Victoria web is a sort of online web school currently in beta. They have a small handful of free video tutorials for web developers.

Getting Started With PHP

“Looking to begin learning and creating PHP applications? This video demonstrates tools used by industry professionals in order to get their applications up and running quickly and effectively.”

jQuery Introduction

“Introduction to the jQuery JavaScript framework. You will learn how to use CSS selectors in order to modify DOM objects, sliding them in and out of view, fading, and creating custom animations.”

Entire Web Design

“Learn to create this entire dealership website from start to finish. Covering various techniques such as layer masks, clipping masks, reflections, shadowing, and more.”

ShowMeDo

ShowMeDo is a source for instructional videos on working with open-source technology and software.

The basics of Javascript

“In this video I show the basics of Javascript. The <script> tag begins in between the tag. It could also be in between the <body> tag. That is why we call the message() function from within the onload attribute in the <body> tag (That is, when the page loads). Outputing simple text on the html page and alert boxes, defining a function and an if/else clause, gives us an immediate and general feel of what Javascript is.”

Python from zero

“This series of videos is a very basic approach to python programming for beginners. In the hopes that the audience will stay tunned until the pygame tutorials, which will show how to make simple 2D games with no prior knowledge of computer graphics.”

Other Sources

The videos below are from scattered sources around the web. It’s always good to learn from as many separate sources as possible to make sure you’re getting a thorough education.

Creating a WordPress Template – Part 1 of 3

“An in-depth three part walk through for creating your first WordPress theme.”

Modify WordPress Theme – Video Tutorial

“This is the 3rd video of Advanced WordPress Video Tutorials. This video tutorial is showing how to work with some WordPress theme codes, that is how to add autoresponder code to the blog sidebar, how to put banner in the single post and similar things.”

How to make a wordpress plugin

“A short video tutorial on how to make a wordpress plugin.”

Creating a Website: From Start to Finish

A three part series that takes you from designing a website in Photoshop all the way through coding in HTML and CSS.

jQuery Online Movie Tutorial by John Resig

“John Resig, creator of jQuery javascript library, has posted an online video about how to make an accordion style menu using jQuery. Pretty basic stuff… but a good intro to jQuery if you’re new to this.”

Conclusion

With all the free resources above, I hope you’re running out of excuses for not being able to code sites by hand. It’s time to jump in a get your feet wet. Merely following along with the videos above will teach you loads and will get you well on your way to becoming a full-fledged web developer.

Know of any more free video tutorials? Leave a link in the comments below.

30 Gorgeous and Versatile CSS Menus

Sometimes the navigation menu can be one of trickiest parts of the design process. This single area can set the tone for the usability of the entire site. When you turn your PSDs into HTML, make sure your navigation is legit!

Sometimes the navigation menu can be one of trickiest parts of the design process. This single area can set the tone for the usability of the entire site.

Today we’ll look at 30 inspiring examples of good menu design. Though many are pure CSS, others add in some images and/or JavaScript to increase the aesthetic and functionality.

Delving Deeper

It’s always more helpful to get a feel for the process of the development than to merely see an image, so in this section we’ll briefly discuss the aesthetic of each menu and how the developer accomplished the effect. This way you can gain inspiration into how to use new methods to create your own unique menus.

Silk Tide

This is one of the most minimal menus on the list. It’s basically just plain text with an extended blue box rollover but it’s really easy to implement and results in a nice effect.

Glenn Sorrentino

This example uses CSS borders on the top and bottom of the menu that increase in thickness when you hover over them.

Strutta

If you have a textured background, consider using transparency in your menu to increase the aesthetic. This could easily be done with RGBa in CSS3.

Elbow Park

Another example of transparency in the navigation area. This one uses a similar effect to the first example with the selection box extending up to the top of the page. This increases visibility and makes for a more seamless design.

Thoughtbot

As you rollover these buttons the background changes to a brighter red. This combined with the glossy look (accomplished with a transparent PNG) creates the illusion of the area lighting up.

Toffee Nut Design

This beautiful example uses CSS sprites for the navigation. The entire menu is one PNG showing each of the tabs in three states: off, on, and on+selected.

Safarista

Here we see each section of the navigation as a hybrid of image and text. The icon, gradient and smaller background make each section’s image while the larger text is styled HTML with a underline hover effect.

David Jonsson

Another simple hover effect that bleeds to the top. This one had hidden icons that only display when you mouse over. A nice effect!

Asvalia

I really like the colors and the crooked text on this menu. The glowing rollovers are perfect.

Bonsai Studios

This one is an extremely simple vertical menu with transparency and a darkening hover. It gets the job done, looks great and can be built in minutes.

Great Expectations Church

Another vertical navigation menu. This one implements some basic but attractive icons and a background GIF with a gradient for the hover.

Ryan Couser

This one uses some simple sprites to accomplish the hover. Each icon is an image with both the on and off states.

Kk Media

Here we see a vertical menu with more detailed icons. Each link is an HTML list item with a simple background image applied in CSS.

Bite Club

I really loved this navigation bar. The brightness really grabs your attention and the reversal of the colors makes a perfect rollover. This also uses a sprite for each menu item, each with three states.

Capital City Equipment Company

I though the house shaped navigation selection was clever on this one. The text in each link is part of the image, if you replicate something like this it would be simple just to use live text over the background image instead.

Strawberry Leisure

This dropdown menu uses a small repeating transparent PNG to pull of the reduced opacity effect. Again, we can look forward to this being much easier in the near future with RGBa when more browsers get on board.

Artificial Studio

Yep you guessed it, more image sprites (sensing a trend here?). The big buttons and excellent gradients make for a beautiful navigation area.

Cognigen

This was by far one of the most original concepts I came across in my search. To pull of the unique 3D effect, the designer has used a whopping four states for each button that change depending on whether the button is selected, hovered over, or has an adjacent selection.

More CSS Menu Goodness

Now that we’ve discussed quite a few great examples, here are a bunch more to check out. Use your browser’s inspect feature to check out the code and images behind any that you like!

Manndible Cafe

Code Greene

Opera

Mac Rabbit

Clark Builders

Mr. B and Friends

Subvert

The Swish Life

Mystery Tin

LiveResto

FeelSocial

Gowalla

NZ Festival

Download Prebuilt Menus!

Need a good starting point for your own CSS menus? Check out these great free resources.

Now Show Us Yours

Do you have a CSS menu that you’re particularly proud of? Use the comments below and leave a link so we can see. Also let us know which of the examples above you liked best.

20 Simple jQuery Tricks

jQuery has quickly made it’s way into nearly every web developer’s bag of tricks. The simplicity with which jQuery allows us to handle complicated events and perform smooth animations makes it the perfect tool for both beginners and experienced developers to add professional flair to their sites.

Here are 20 simple jQuery tricks to get you on your way to JavaScript bliss. The keyword here is “simple” so even if you’ve never used jQuery before, this is the perfect place to start!

Beginner Tutorials

Just to get you started off right, here are the beginner tutorials straight from jQuery.com.

#1 – jQuery Rounded Corners

A short post from “15 Days of jQuery” on using the wrap, prepend, and append functions to create a rounded corner effect.

#2 – Image Cross Fade Transition

3 Simple methods of cross fading one image into another using jQuery and CSS.

#3 – Fading Menu – Replacing Content

Chris Coyier provides some of the best free content out there for learning web design. Here’s one of many jQuery tutorials on his site.

#4 – Sexy Drop Down Menu w/ jQuery & CSS

Learn to create a slick, animated UI for your site with this step by step tutorial.

#5 – Tabbed Content Area using CSS & jQuery

An oldie but goodie, this was one of the first tutorials ever posted on NetTuts. This is where I first learned about jQuery!

#6 – jQuery Twitter Ticker

Learn how to use both the Twitter API and jQuery to create a great looking Twitter ticker.

#7 – Vertically Scrolling Menu

This article shows you how to create a really smooth, vertically scrolling menu. A great tutorial despite the fact that the author seemed to think it was a horizontally scrolling menu!

#8 – Easy Display Switch with CSS and jQuery

Mimic Abduzeedo’s new site and to create a switch for changing your content from list view to grid view.

#9 – Simple Toggle with CSS & jQuery

A great beginner’s tutorial describing how to use the toggle feature.

#10 – WordPress & jQuery Contact Form without a Plugin

A well written, in-depth look at creating a WordPress form without the need of an additional plugin.

#11 – jQuery Sequential List

Use jQuery to take the monotony out of coding sequential items.

#12 – Create a Fancy Share Box

Having social media share links on your site has quickly become a standard for most blogs. Use this tutorial to make yours standout.

#13 – Create a Slick and Accessible Slideshow Using jQuery

Use this stunning content slider to put a ton of content in a small space.

#14 – Using jQuery for Background Image Animations

Create eye-catching background animations with only a few lines of code.

#15 – Animated Menus Using jQuery

Similar in concept to #14 but with a subtler, more sophisticated effect.

#16 – “Outside the Box” Navigation with jQuery

An amazing technique for creating website navigation that mimics the OS X dock.

#17 – How to implement a news ticker with jQuery and ten lines of code

A quick and easy news ticker from Antonio Lupetti.

#18 – Create a Stunning Popup with jQuery

This tutorial shows you how to create a popup window and fade out the background.

#19 – jQUery Feed Menus

Learn to create simple and effective RSS feed menus like those in Safari.

#20 – Create a Funky Parallax Background Effect

This tutorials walks you through creating an incredibly unique sliding 3D background effect.

That’s All Folks

That concludes our roundup of simple jQuery tricks. Now go and use these techniques to create some amazing effects on your site. Leave a comment using the field below to share your favorite jQuery tricks and tutorials.