Do We Still Slice PSDs?

The other day a friend of mine said something that caught my attention, “I’m trying to learn how to slice a PSD.” It’s a simple enough statement. As soon as he said it, I knew exactly what he was talking about, and yet, there was something in there that didn’t quite set right.

 

screenshot

The other day a friend of mine said something that caught my attention, “I’m trying to learn how to slice a PSD.” It’s a simple enough statement. As soon as he said it, I knew exactly what he was talking about, and yet, there was something in there that didn’t quite set right.

Upon seeing my hesitation my friend responded with a question, “Do we still slice PSDs?” Great question! For beginners, jargon isn’t merely jargon, it implies a process and suggests a method of action. For this reason, it’s often helpful for more advanced developers to define their terms in a way that is meaningful to others. Today we’ll dive into the theory behind the process of converting a PSD to to a web page and end with a discussion on the ups and downs of designing in the browser.

 

Our Sample File

We won’t be actually converting a PSD to HTML/CSS today, we’re merely discussing the how and why so you can fully understand the typical approach taken by today’s web designers.

I needed a PSD to reference throughout the article so I grabbed the awesome free Creative Studio Minimal PSD from GraphicsFuel.com.

screenshot

What Is Slicing?

The first thing we should talk about is what it means to “slice” a PSD. Put loosely, the term simply means to chop up your Photoshop document into pieces, which then get served up to the web server, put in order by HTML and styled/positioned by CSS.

On a more specific level, slicing can refer to a specific set of tools inside of Photoshop. Using the Slice Tool, we can partition our document up into little pieces. Basically, we just draw a rectangle around every item that we want to separate into an individual image.

screenshot

Why Slice?

The slicing tools in Photoshop are merely there for convenience. There are a ton of great web designers today that never touch them and there’s nothing wrong with that.

The point behind the slicing tools is to make the process of saving out a bunch of images easier, both in the short run for the initial build and in the long run to make revisions. Basically, what it does is save you the trouble of cropping out each portion manually and saving it.

Though the process is kind of a pain, I have to admit that a nicely sliced PSD is a thing of beauty. Here’s a clear example where I have several elements that need to be saved out as images. Without slicing, each one of these would represent a crop and save process that I have to go through.

screenshot

When they’re sliced though, a single Save For Web action can convert all of thes slices to standalone image files. This really cuts down your time on the repetitive task of cropping and saving if you’re working with a single Photoshop file as your source.

screenshot

Make Slicing Suck Less

If you’re still unsure about the Photoshop slicing tools or think that it’s all a big fat waste of time, you should check out our piece titled, How to Make Slicing Suck Less: Tips and Tricks for Slicing a PSD.

In that article, I thoroughly explain the process of slicing and how all of Photoshop’s slicing tools work. Most importantly, you get a look at some great tips on how to make the process of slicing much better. Things like Layer Based Slices and hiding Auto Slices really go a long way towards making it a bearable process.

Why Slicing Is Old School

So that’s slicing. Now that you know what it’s all about, it’s time to explore how this process has changed over the years to a point where slicing is a fundamentally different activity than it used to be.

Once upon a time, no one used CSS (I know, the horror!). Even when CSS did come along, the tools that it provided web designers with were pretty limited compared to what we know today.

Consequently, websites that tried to push the limits by not looking like crap tended to use a ton of images. Every time a design contained a custom font, simple gradient, drop shadow or rounded corner, an image had to be used to pull the effect off in the browser.

Consequently, slicing was a big deal. When you created a Photoshop mockup of a website, if you decided to implement any sort of aesthetic icing, which was huge before the minimal kick we’re on now, then you had to slice every little portion of your design up into tiny pieces that you likely then used HTML tables to reconstruct. Brutal right? Especially when you consider that we were all on amazingly slow web connections back then so all those images took ages to load.

CSS Kills The Image

As CSS evolved and grew, a new trend popped up in web design: imageless design. If you looked around on design blogs a few years ago you would see a ton of articles titled something like, “Create a Fancy Button Without Images!” To this day you still see titles like this pop us as people perform unbelievable feats with CSS.

This trend wouldn’t be possible without the amazing CSS features that we now enjoy. Suddenly you can round corners, add shadows, implement multiple backgrounds, build gradients, use custom fonts and a lot more using pure code. The general goal of many web designers now is to leverage CSS and use as few images as possible in our markup. “Imageless” isn’t necessarily something to be achieved (you almost always need a few images) but rather strived for, meaning you generally want to get as close to it as humanly possible while keeping support high.

Pros and Cons of Imageless Design

This trend comes with its ups and downs. The up side is that, despite what non-coders might think, CSS is a beautifully easy way to maintain and adjust a design in the long term. If you want to change something small such as a font or a background color, you just find/replace a few lines of code and you’re good to go. There’s also the benefit that even thousands of lines of CSS can be minified to the point that its effect on loading times is nearly negligible.

The huge, not to be understated downside is compatibility. With images, PNGs were pretty much the only thing we had to worry about (aside from loading times of course). Now with CSS we have support issues across the board. Browsers that do support a new feature do so only with a unique prefix, making for ridiculously repetitive coding, many features are only available on a single browser engine, others are supported everywhere but IE (some things never change); it can be a real mess.

The ultimate goal is to keep what’s best for the user in mind. If using an image for something results in the greatest amount of good for the most people, go for it.

Less Images, Less Slicing

Building on this foundation of information, we can finally address the question of whether or not web designers still slice PSDs.

For the most part, when we look at a Photoshop document that is meant to be converted to a website, we try to see code wherever possible. It’s like that moment in the Matrix where Neo looks around at what he once saw as the normal world and suddenly sees the code behind it. Web designers don’t see layers and layer effects, we see divs and CSS properties.

Given that this is the case, the majority of the work involved in taking a static design live is more in the realm of rebuilding than slicing. Instead of slicing that glossy button and serving it up as an image, I’ll use CSS to rebuilt it from scratch. This process is repeated throughout the whole of the site, often with images used primarily for actual content rather than design (though there’s still plenty you can/shouldn’t do with pure CSS).

Designing In The Browser

The question that no doubt comes to the mind of many web design newbies as they read about this process is of course, “Isn’t this all a bit repetitive?” First you design and build a site in Photoshop, Illustrator, Fireworks (yes, I remember that Fireworks is great for web content so don’t yell at me in the comments) or any other layout tool of choice, then you basically start over in the browser and rebuild what you just created using code instead of images wherever possible.

The answer is a resounding “yes.” The result is a movement of folks that encourage moving the design process right to the browser. Start in code, finish in code, use Photoshop only when you need to create an image and virtually eliminate all this repetitive nonsense.

I’m all for this process. It’s super lean and really streamlines your workflow. Unfortunately, it’s not always easy to get the creative side of your brain to produce your best work utilizing this method. Sarah Parmenter recently addressed this problem in her post, “I can’t design in the browser” in which she reveals the “guilty secret” that even though Photoshop isn’t a good way to display the kind of dynamic and responsive web content that clients need today, it does foster more creativity than going straight to HTML and CSS.

How Do You Design Websites?

This post represents a long answer to what seemed to be a simple question. However, under that question is something that we’re all struggling with lately, from beginners to professionals: What’s the best process for designing a website? Should the creative design process be distinct from the coding process or should they be one and the same? Should we build mockups in a layout application and then slice them up for the browser or is there a better way? Is Fireworks really the answer or is there still a missing solution?

I want to hear your thoughts on this. What does your current workflow look like, from beginning to end? Where do you begin the design process and how does that flow through to a live website? What tools do you find invaluable along the way? What would your ideal web design tool be like?

Weekly Freebies: 15 Impressive CSS and PSD Navigation Menus

Today’s awesome collection of design freebies brings you a veritable utopia of navigation menu bliss. Each of the fifteen navigation menus below are both completely gorgeous 100% free to download.

screenshot

Today’s awesome collection of design freebies brings you a veritable utopia of navigation menu bliss. Each of the fifteen navigation menus below are both completely gorgeous 100% free to download.

I’ve included both CSS and PSD menus so whether you’re just looking to create a mockup or need something fully functional, we’ve got you covered. Enjoy!

 

Collapsing Vertical Nav (CSS)

screenshot

3-Level Navigation Menu (CSS)

screenshot

Ribbon Banner Navigation (CSS)

screenshot

CSS Menu Pack (12 Menus)

screenshot

Simple Tabbed Navigation (PSD)

screenshot

Dark Menu (PSD)

screenshot

PSD navigation menu

screenshot

Clean & Simple Navigation Menu (PSD)

screenshot

Clean Simple Navigation (PSD)

screenshot

Tab navigation (PSD)

screenshot

Glossy Dark Menu (PSD)

screenshot

Textured Navigation (PSD)

screenshot

Vertical Navigation Menu (PSD)

screenshot

Breadcrumbs navigation (PSD)

screenshot

GlossMilk Navigation (PSD)

screenshot

Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

15 Free CSS and PSD Navigation Menus: http://goo.gl/ANWrT

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.

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.

screenshot

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.”

screenshot

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.”

screenshot

Meagan Fisher

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

screenshot

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.”

screenshot

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!”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

Iris Sousa

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

screenshot

Dana Tanamachi

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

screenshot

Naomi Atkinson

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

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

Denise Chandler

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

screenshot

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?”

screenshot

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.”

screenshot

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.”

screenshot

Beth Dean

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

screenshot

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.”

screenshot

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. ”

screenshot

Andrea Garza

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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!”

screenshot

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. ”

screenshot

Dever Thomas

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

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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. ”

screenshot

Melissa Washin

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

screenshot

Aubrey Klein

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

screenshot

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.”

screenshot

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.”

screenshot

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.

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:

  1. Using the appropriate file format (JPEG, PNG, GIF) for the type of image
  2. reducing the image size to the smallest dimensions possible.
  3. Using compression techniques to reduce file size without losing quality
  4. Minimizing the number of colors used in the image.
  5. 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:

  1. Not organizing layers properly, which can lead to confusion and errors during slicing.
  2. Saving images in the wrong file format or at the wrong resolution, which can affect image quality and load times.
  3. Failing to account for different screen sizes and resolutions, which can lead to inconsistencies in the final design.
  4. Neglecting to optimize images for the web, which can result in slow loading times and a poor user experience.
  5. 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:

  1. Use the right file format for the type of image (PNG is often a good choice for images with transparency).
  2. Carefully select the area of the image to slice, paying attention to the edges and any areas of transparency.
  3. Consider using a layer mask or alpha channel to isolate the area of the image that you want to slice.
  4. Use anti-aliasing to smooth the edges of the sliced image and avoid jagged edges or pixelation.
  5. 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.

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.

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.

#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.

screenshot

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

screenshot

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.

Best Resources for Learning WordPress Development

Odds are, if you’re a web developer, learning WordPress is either on your todo list or something that you’ve already committed yourself to. Learning to build WordPress themes is an excellent professional move that will open you to a wealth of new clients and personal opportunities.

Odds are, if you’re a web developer, learning WordPress is either on your todo list or something that you’ve already committed yourself to. Learning to build WordPress themes is an excellent professional move that will open you to a wealth of new clients and personal opportunities.

To follow up our article last week on tutorials for learning web design, below is a list of books and free tutorials specifically targeted at learning to develop for WordPress. Whether you’ve never heard of WordPress or are just looking to update your current WordPress skill set, there are plenty of resources below to get you on your way.

Free Tutorials

If you’re on a budget and need to learn quick, free tutorials provide a great way to get started and provide just enough information to help you pick up WordPress without bogging you down with too much unnecessary extras.

WordPress 3.0: Ultimate Guide to New Features (Six Revisions)

Many of the articles below are for older versions of WordPress so I wanted to begin by pointing out this guide to WordPress 3.0. The older articles still have plenty of solid information and relevant examples, just be sure to keep the newest version of WordPress in mind when reading them.

screenshot

How to Create a WordPress Theme from Scratch: NetTuts

“Following on from the recent article on “PSD to HTML”, this tutorial will look at taking a HTML/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn’t nearly cover it all. So, we’re going to look at how themes are structured, creation of the core files and splitting up that index.html file.”

screenshot

Designing for WordPress: CSS Tricks

“Over the last few weeks, I have been been doing a video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme.”

screenshot

Premium WordPress Theme Design: Design Reviver

“This time you’ll learn how to slice the design and convert it into XHTML + CSS, then I’ll show you how to use the css files to mock-up a WordPress template.”

screenshot

WordPress Theme Development Checklist: divtodesign

“As you might know, I have been diving into WordPress theme development and I’ve learned many tips and tricks along the way. I noticed I was forgetting about some small issues all the time. That’s why I decided to make a WordPress Theme Development Checklist. ”

screenshot

How To Create WordPress Themes From Scratch: ThemeTation

“I’m going to show you how to create a wordpress theme from scratch in these 3 parts of tutorial series. I will cover from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation.”

screenshot

Creating WordPress Themes: Introduction

“This new series will begin with the basics and then I’ll proceed to more advanced techniques. I will also be incorporating different techniques that I’ve picked up from other developers that I’ve found to be extremely handy, and I’ll be providing links and credits to that info as I go along.”

screenshot

Developing a WordPress Theme: Dezinerfolio

“Instead of coming up with some more themes, we decided to write a tutorial on how to develop a wordpress theme which we are sure will help a lot of you to design as you wish and bring them out into wordpress. We are not too advanced wordpress developers but still we are sure the below tutorial will help you successfully develop a wordpress theme. Below you will learn to convert your xHTML CSS site into a Compact WordPress Theme (final output is same as the normal theme but here code is shorter and easier to understand).”

screenshot

How to Build a Custom WordPress Theme from Scratch: SpoonGraphics

“If you’re confident with your CSS and HTML, it’s not hard at all to step up to the challenge of building a custom WordPress theme. This overview shows the process of how my latest custom WordPress theme was built from design concept through to completed theme. See how the static design is split up into the various WordPress theme files, and discover how the simple PHP snippets can add that dynamic functionality of a blog.”

screenshot

Creating A Quality WordPress Theme: 12 Points to Consider (Noupe)

“But what exactly makes a WordPress theme great? How does one go about creating a quality theme? In fact, it’s not that difficult. You can do a few simple things while developing your theme—from the planning stage right through coding—to make it stand out from the legions of average (and below-average) themes out there.”

screenshot

Customize Your Own WordPress Theme: Vandelay Design

“An increasing number of businesses and website owners are using blogs as a means of communication with their customers and website visitors. If your business already has a website it is possible to have a blog that matches the look and feel of your existing website without doing a complete re-design and without paying thousands of dollars to have the blog developed. Using WordPress you can tailor an already existing blog theme to seamlessly flow with the rest of your website.”

screenshot

Designing and Coding a WordPress Theme From Scratch: DeveloperTutorials

“In this multi-part series I’ll detail how to create and design a WordPress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP.”

screenshot

So you want to create WordPress themes huh?

“Creating a WordPress theme from scratch is not hard. I’ll hold your hand through it. Tutorials on this topic have been written before and the WordPress website also has guides for you to follow. But are those tutorials and guides really helpful to you when you don’t understand the lingo? Even I got lost while reading the WordPress guides.”

screenshot

Create Your Own WordPress Theme from an HTML Template

“In this article, I’ll show you how to take an existing HTML and CSS site template and convert it into a theme for WordPress. Of course, WordPress theming is much too vast a topic to cover entirely in a single article, so I’ll provide you with some resources at the end to further your learning. It’s hoped, though, that this article will serve as a good introduction and give you a solid foundation to start learning about creating your own WordPress themes.”

screenshot

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (ThemeShaper)

“In Only 11 Individual Lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. As we go along I’ll explain what’s happening including (for better or worse) my thinking on certain techniques and why I’m choosing one path over another. Essentially, I’ll be teaching you everything you need to know about WordPress Theme development.”

screenshot

Building Custom WordPress Theme

“This chapter will show you how to build a custom WordPress theme. Although the Codex site provides very good documentations on how to create a theme, but I find it too complicated for a beginner. In this tutorial, I will explain the basics of how WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design.”

screenshot

Books on WordPress

If you’re serious about becoming a professional WordPress developer, it’s time to pick up a good book on the subject. These are usually far more in-depth than free tutorials and really cover the material you need to know inside and out.

Below are a few great books to consider in your search. Some are physical books that you can purchase on Amazon, others downloadable PDFs.

Rockstar WordPress Designer: $29

“During the course of the book you’ll build THREE WordPress themes, a blog, a portfolio site and a general site with menus and submenus. Each theme demonstrates different aspects of WordPress theming and all three are packaged in with the book so you’ll have Photoshop, HTML, CSS and WordPress PHP files to refer to.”

screenshot

Beginning WordPress 3: $26.99

“WordPress is one of the most popular blogging and content management web templating platforms—it easily allows you and your business to make a statement about yourself and what you do. WordPress is also quite cost-effective, as it’s free for just about anyone to use. WordPress is colorful and flexible, and includes a variety of themes, templates, and plug-ins for you to explore and use. Beginning WordPress 3 aims to address these for the beginner who wants to start using and developing with WordPress.”

screenshot

WordPress For Dummies: $16.49

“The bestselling guide to WordPress, fully updated for newest version of WordPress. WordPress, the popular, free blogging platform, has been updated with new features and improvements. Bloggers who are new to WordPress will learn to take full advantage of its flexibility and usability with the advice in this friendly guide.”

screenshot

Smashing WordPress: Beyond the Blog: $29.69

“Smashing WordPress shows you how to utilize the power of the WordPress platform, and provides a creative spark to help you build WordPress-powered sites that go beyond the obvious. You will learn the core concepts used to build just about anything in WordPress, resulting in fast deployments and greater design flexibility. Inside, WordPress expert Thord Daniel Hedengren takes you beyond the blog and shows you how WordPress can serve as a CMS, a photo gallery, an e-commerce site, and more.”

screenshot

Professional WordPress: $29.69

“An in-depth look at the internals of the WordPress system. As the most popular blogging and content management platform available today, WordPress is a powerful tool. This exciting book goes beyond the basics and delves into the heart of the WordPress system, offering overviews of the functional aspects of WordPress as well as plug-in and theme development.”

screenshot

WordPress: Visual QuickStart Guide

“This book gives readers the tools they need to create beautiful, functional WordPress-powered sites with minimal hassle. Using the WordPress user interface as a baseline, authors Jessica Neuman Beck and Matt Beck walk new users through the installation and setup process while providing valuable tips and tricks for more experienced users. With no other resource but this guide, readers can set up a fully-functional and well-designed WordPress site that takes advantage of all the features WordPress has to offer.”

screenshot

Using WordPress: $16.49

“WordPress has grown into the #1 blogging tool in its category: several million bloggers have downloaded this powerful open source software, and millions more are using WordPress.com’s hosted services. Thirty-two of Technorati’s Top 100 blogs now use WordPress. Using WordPress is a customized, media-rich learning experience designed to help new users master WordPress quickly, and get the most out of it, fast! It starts with a concise, friendly, straight-to-the-point guide to WordPress. This exceptional book is fully integrated with an unprecedented collection of online learning resources: online video, screencasts, podcasts, and additional web content, all designed to reinforce key concepts and help users achieve real mastery. The book and online content work together to teach everything mainstream Wordpess users need to know.”

screenshot

Head First WordPress: A Brain-Friendly Guide to Creating Your Own Custom WordPress Blog ($23.09)

“Whether you’re promoting your business or writing about your travel adventures, Head First WordPress will teach you not only how to make your blog look unique and attention-grabbing, but also how to take advantage of WordPress platform’s more complex features to make your website work well, too. You’ll learn how to move beyond the standard WordPress look and feel by customizing your blog with your own URL, templates, plugin functionality, and more. As you learn, you’ll be working with real WordPress files: The book’s website provides pre-fab WordPress themes to download and work with as you follow along with the text.”

screenshot

Closing Thoughts

I hope the resources provide the catalyst you need to begin your journey as a WordPress developer. In closing, I want to remind you that the official WordPress codex is definitely on of the best resources out there for all things WordPress.

Let us know in the comments below if we left out any of your favorite tutorials or books for learning WordPress.

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.

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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!”

screenshot

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.”

screenshot

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!”

screenshot

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. ”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

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.”

screenshot

How to make a wordpress plugin

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

screenshot

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.

screenshot

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.”

screenshot

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.

Twitter Bootstrap 2: Bootstrap Goes Responsive

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Recently, we published a piece titled 5 Incredibly Useful Tools Built Into Twitter Bootstrap, which took a look at the basic structure of Twitter’s Bootstrap framework and walked you through implementing some of the major components.

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Demo

We’ll be talking about several new Bootstrap features today. If you want to see them in action, stop by the live demo below.

Demo: Click here to launch.

screenshot

Implementing the Responsive Grid

The most major aspect of Twitter Bootstrap is of course that it is now fully responsive. If you’re still labeling the whole responsive movement as a silly fad in hopes that you can ultimately skip learning the requisite techniques, you’re out of luck. Responsive design is well on its way to being a standard practice instead of a “nice to have” add on. It’s really not as complicated as you might think and tools like Bootstrap make it even easier.

The new responsive grid is twelve columns wide and works much like the sixteen column grid from Bootstrap 1. If you’ve ever used any grid system before, then you’ll feel right at home as there’s nothing too Earth shattering here.

screenshot

To implement the grid, you pretty much follow the same steps as you always did. Start with a container div, then create a row and fill that row with span(x) divs. Given that it’s a twelve column grid, just make sure the numbers in a row add up to twelve. Try four “span3″ divs, a “span9″ with a “span3″ or even just a straight up “span12″ to go all the way across. Here’s a quick example:

1
2
3
4
5
6
7
<div class="container">
  <div class="row">
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
  </div>
</div>

The above represents a static grid. It will still be responsive, it just won’t respond to every minute browser window size change, only those set by media queries. If you want a fluid grid, use the fluid classes:

1
2
3
4
5
6
7
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
  </div>
</div>

The Media Queries

The included media queries are listed below, starting at mobile and working their way up. Basically, each one goes in and changes the size of the columns to reflow the layout to something more appropriate for the viewport.

  • @media (max-width: 480px)
  • @media (max-width: 768px)
  • @media (min-width: 768px) and (max-width: 980px)
  • @media (max-width: 980px)
  • @media (min-width: 980px)
  • @media (min-width: 1200px)

The first media query (480px and below) targets smartphones and pretty much breaks everything down to a single, 100% width column. This may be a bit oversimplified for your tastes, but the beauty of frameworks like this is that they’re only suggestions, you’re encouraged to customize to your heart’s content.

The next media query targets portrait tablets with a range of 480px to 768px, then up to 980px for landscape tablets and on up to standard desktops and large displays.

For the static grid, individual columns start at 70px wide, then jump down to 60px and finally down to 42px before going 100% width for mobile.

screenshot

Tip: Grab the Right Download
Interestingly enough, the media queries aren’t included in the default download from the Bootstrap homepage. If you want them, you’ll have to grab the GitHub Download.

Nice Attribute Value Selector Usage

If you check out the code for the media queries, you might learn a neat trick or two. For instance, the devs have implemented a solid example of the “Arbitrary Substring Attribute Value Selector”, which I wrote about in CSS Selectors: Just the Tricky Bits.

screenshot

Bootstrap has many classes that use the word “span” (span1, span2, etc.), and rather than typing out each individually, the ASAVS grabs them all in one go with this fancy bit of code: [class*=”span”]. This selector actually digs through the HTML and finds anything with “span” in the class name, regardless of what follows it. Even a class of “spansomethingtotallycrazy” would be targeted.

Content Transformation

Though the heart of the media queries is to reflow the columns, there’s a lot more going on here as well. The developers have actually taken the time to restructure many of the elements so that they transform as the viewport size changes.

For instance, the navigation menus change pretty drastically when you’re viewing on a tablet or smartphone. To see an example, test out the Bootstrap Homepage. At full size, the navigation menu is a simple horizontal list of text links.

screenshot

On a tablet or smartphone though, the text is cleared out and replaced with a button up in the top right of the screen.

screenshot

Tapping on the button will expand the new menu area. Here we have a vertical list of links, which allows for larger tappable areas.

screenshot

Responsive Images

screenshot

The navigation menu isn’t the only thing that changes size with the viewports, lots of other objects do as well, from simple buttons up to more complicated objects like image carousels. To pull off the automatically resizing images, Twitter has taken the “max-width: 100%;” route. Here’s the full snippet:

1
2
3
4
5
6
img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

This makes it so that, as those columns and rows resize themselves, the image width will max out at the width of the parent column. Also notice the “-ms-interpolation-mode: bicubic;” line. This is a fairly obscure property that essentially makes image re-sizing smoother in IE.

More New Stuff

The responsive functionality is definitely the coolest new feature of Bootstrap, but there’s a lot more here to get excited about. Here are three of my favorite items:

Progress Bars

screenshot

Bootstrap now has cross-browser-compatible progress bars that are super easy to implement. Just insert a snippet like the one below:

1
2
3
<div class="progress">
  <div class="bar" style="width: 30%;"></div>
</div>

The “width: 30%” here resembles how far along the progress bar will be. If you want to change that to half full, just type in 50%.

Button Groups

screenshot

Button groups are a bit like breadcrumb navigation in that they’re individual buttons that are all smushed together. Normally, this takes a good chunk of code to pull off. Not only do you have to style the general button theme, you also have to make the first and last button different.

With Bootstrap, all you need are some links with the “btn” class inside of a “btn-group” div.

1
2
3
4
5
<div class="btn-group">
  <a class="btn" href="#">One</a>
  <a class="btn" href="#">Two</a>
  <a class="btn" href="#">Three</a>
</div>

Carousels

screenshot

The old Bootstrap JavaScript plugins have been revamped and some completely new ones have been added. My favorite here is the new jQuery carousel. The example code below may seem hefty, but if you break it down it’s pretty simple. The slide contents gets thrown in the “.item” div and an optional caption can be added. Navigation is tossed in at the end.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
         
        <div class="item active">
            <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Lorem ipsum...</p>
            </div><!--end caption-->
        </div><!--end item-->
         
         <div class="item">
            <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Lorem ipsum...</p>
            </div><!--end caption-->
        </div><!--end item-->
         
    </div><!--end inner-->
     
    <!--nav-->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

Conclusion

When a large company like Twitter puts out a free resource, it’s a gamble to actually build your workflow around it. One major issue is that you can’t know for sure how well it will be kept up in the long run. Fortunately, it seems like Bootstrap is, for now at least, a fairly high priority at Twitter. The new version represents a massive amount of time and effort and it really shows. This is turning into one extremely extensive boilerplate.

I’m personally stoked that Twitter deemed it necessary to take Bootstrap responsive. This will definitely help further the cause of responsive design that works well across not only all major browsers, but all major devices as well.

Leave a comment below and let us know what you think of Bootstrap 2.0. Did you try the first version? What are your favorite improvements?

PSD to HTML Slicing Tutorials

Any good web designer must know the basics of markup. Check out these nice and easy PSD to HTML slicing tutorials to understand how the process works and to broaden your skill-set.

Any good web designer must know the basics of markup. Check out these nice and easy PSD to HTML slicing tutorials to understand how the process works and to broaden your skill-set.

From PSD to HTML, Building a Set of Website Designs Step by Step

psd xhtml 1 PSD to HTML Slicing Tutorials

This is a very lengthy but good step-by-step guide to converting PSD files into HTML/CSS code. The whole process is described in great detail with lots of screenshots and code samples. All source files are available as a free download, for your convenience.

Creating a CSS Layout from scratch

psd xhtml 2 PSD to HTML Slicing Tutorials

This is a highly recommended read for newbies. It gives a nice and simple description of how to create a fully functional CSS layout from scratch. If you think HTML is a complicated language, you will definitely change your mind after reading this tutorial.

Build a Sleek Portfolio Site from Scratch

psd xhtml 3 PSD to HTML Slicing Tutorials

This slicing tutorial is more advanced, mainly because the PSD sample contains more elements and blocks to code. The post is less detailed, but features some very clean code samples and screenshots.

Converting a Design From PSD to HTML

psd xhtml 4 PSD to HTML Slicing Tutorials

This is a detailed 54-minute long video tutorial, which shows the process of PSD to HTML conversion. There are no downloadable source codes because the template was intended to be sold on ThemeForest.

Slice and Dice that PSD

psd xhtml 5 PSD to HTML Slicing Tutorials

This is another great video tutorial by Jeffrey Way. The first 25 minutes contain a step-by-step guide on markup creation. The second part of the screencast is about CSS.

Coding Your 1st PSD Tutorial

psd xhtml 6 PSD to HTML Slicing Tutorials

This CSS tutorial will teach you how to code your PSD file into HTML and CSS. This one is not as detailed as articles above and it is designed for people who already have a basic knowledge of markup.

How to Convert a PSD to XHTML

psd xhtml 7 PSD to HTML Slicing Tutorials

This is a great playlist of detailed video tutorials, which show the process of PSD to HTML conversion. There are no downloadable source codes, but it will definitely be useful for beginners.

Tutorial:Coding a Layout

psd xhtml 8 PSD to HTML Slicing Tutorials

Here you will learn how to analyze your designs and find the best way of converting them into HTML code. This is a short guide that will be interesting for both beginners more advanced users.

Create a Simple Accordion Using HTML, CSS & jQuery

psd xhtml 9 PSD to HTML Slicing Tutorials

The problem with accordion scripts is that they are usually heavy and they don’t always work properly. This tutorial will help you learn how to create a lightweight accordion script using HTML, CSS and jQuery.

Coding a Rounded Corners Layout

psd xhtml 10 PSD to HTML Slicing Tutorials

You should always make sure your code is clean, short, and well structured. This collection of tricks and CSS tutorials will teach you how to easily create rounded corners and shapes.

Converting a Photoshop Mockup

psd xhtml 11 PSD to HTML Slicing Tutorials

Here’s an excellent video that will walk you through the process of converting an Adobe Photoshop mockup into a CSS-based website. There are three chapters; the first two describe how to code the header, main menu, and footer and the third deals with the main content area.

From PSD to CSS/HTML in Easy Steps

psd xhtml 12 PSD to HTML Slicing Tutorials

Here’s a nice series of tutorials on how to create a web page. All its source files, markup, and design templates are available for download. This guide also emphasizes the importance of preliminary analysis of your PSD files to determine possible problem areas that may arise during the markup stage.

CSS Template Tutorial

psd xhtml 13 PSD to HTML Slicing Tutorials

This is another in-depth tutorial if you want to learn markup. This article gives a lot of details and serves as a great introduction to CSS.

We hope this list of PSD to HTML tutorials comes in handy for you. If you need to get your designs hand-coded into the highest quality HTML/CSS code, TheSiteSlinger.com is always at your service!

Our experts use the most advanced CSS preprocessors and can deliver .scss or .less files. Should you need help with a PSD to WordPress theme conversion, we will be glad to do it for you.

Contact us now and get a free quote today!