The Easiest way to order PSD to HTML, from The Site Slinger

The Site Slinger turns designs into code, and sets itself apart from other PSD to HTML companies with its quality, reliability, & speed. We are the only company to offer easy online ordering and a fully transparent development process.

We’ve implemented a new online ordering system!

Check out this walk-through and see how easy and fast it is to get your project from design to code with PSD to HTML from The Site Slinger.

LOG IN/REGISTER

Enter your email address and password, or select CREATE ACCOUNT at the top to register as a new customer.

The easiest PSD to HTML

 

UPLOAD PROJECT FILES

We make it a breeze! In the SUBMIT A NEW ORDER section upload your PSD file(s) via drag-and-drop, or click ‘Pick File’ to browse and select your file. We’ll see the files right away, and you can always add more later.

The easiest PSD to HTML

 

ENTER PROJECT INFO

While your file is uploading, let us know your Project Name, and select your Project Type & Project Deadline from the drop down options. Tell us a little bit about your project, or ask any questions you might have – we’ll see your order immediately and are ready to help.

The easiest PSD to HTML

 

VIEW ORDERS

To view an existing order, select YOUR ORDERS from the left menu. Your current orders, and completed orders, will be listed. Select the VIEW PROJECT button to see an order’s details. A consolidated list of your order history makes for easy reference – each and every time.

The easiest PSD to HTML

 

REVIEW ORDER DETAILS

We want you to feel happy, not sad, during development so we built a fully transparent ordering process. In the project details screen you can view the Project Status, Project Price, Confirmed Delivery date and even view an Invoice in the left sidebar. You can also leave your comments about the project and check for our replies. You will receive an email notification whenever we comment or have an update for you. That’s how we keep you updated at each step in the development process!

The easiest PSD to HTML

 

REVIEW/ADD ORDER FILES

On the ORDER FILES tab within the same screen you can review the file(s) you’ve already uploaded, and add more files, if you need to. As always, we’ll promptly review your order & files, and ensure everything’s in place for a quote. That’s just the first step in getting the project turned around as quickly as possible – we make sure all PSD to HTML projects are completed in 7 business days or less.

The easiest PSD to HTML

 

OTHER FEATURES

Click the BACK TO YOUR ACCOUNT button in the upper right to go back to the main account page. From here, you can also Edit Your Profile, or get your Referral Program details. Spread the word about The Site Slinger and receive a credit on future orders!

The easiest PSD to HTML

 

What we do.

PSD to HTML

Built for designers and headquartered in Austin, Texas, The Site Slinger makes building custom websites easy.  Send us your PSD files and we return HTML code in 7 business days or less. Take our HTML and use it to create custom websites, WordPress themes, web apps, enterprise software or whatever else you can think of. This is the fastest way to get building for all your web projects.

PSD to WordPress

Our PSD to WordPress product is the best starting point for custom WordPress development. We hand code your PSD files into static HTML views and then compile them into a basic WordPress theme for custom development. We deliver the WordPress theme files and SQL file for your developer to customize.

If your project requires additional development and your team is without a developer we can recommend great developers.

We want to give web design and development teams an upper hand with easy PSD to HTML and WordPress. Our easy online ordering, personal 24/7 service, and expert developers take the pain out of outsourced development.

Test us out! Submit a design for a free quote today and we’ll be happy to give you a $100 discount off your first order. If you have any questions, just let us know!

Design Rules for PSD to HTML

Want to make your development team love you? Learn how to design your PSD (Photoshop design files) into clearly labeled, appropriately layered files for PSD to HTML!

If you’re coding PSD to HTML/CSS, you know that there’s often a disconnect between the person creating the designs and the development team coding them. With well organized and labeled files you can avoid many of the worst web development pitfalls.

By following these simple steps you can hand your PSD designs off to a good PSD to HTML team and they will come in back pixel-perfect, just like you imagined. This makes PSD to HTML easy for both you and the development team.

Some basic rules to follow:

1. One PSD file per page template or folders for each page in a single PSD file. What is a PSD?

2. Label all folders with the section of content on the page they refer to (Top navigation, Content, Footer, etc) Example

3. Separate folders for “on” and “off” states.  Make sure to separate your on/off states into different folders so the development team can easily identify the different states in the design.

4. Provide a text file or .pdf that clearly outlines all functionality for the individual pages (this includes things like animations, slide transitions, etc.)

5. Be sure to design all animation states, javascript validation, button states (click, hover, off), modals and anything else you can think of. If you don’t see it in the design, we can’t see it to code it!

 PSD to HTML Example

This is an example of a PSD single page with well organized folders for the content of the page. The organization of this is is clear and easy to follow.There are subfolders for each portion, clearly labeled.

PSD File Structure

Within the folder structure each page has its own subfolders that are all appropriately named. The elements for each group are within the subfolder and vector images are imported to the file when necessary (logos or other images). Make sure to show different on / off states. Rather than show multiple flat files for each state, they should be organized and named within the PSD in a way that the development team can understand.

Below is a good example of how files should be organized when you hand them off to your development team. You will see that there is 1 PSD per page with all of the necessary states for web development included in each PSD file.

Photoshop (PSD) File Structure

FileStructure

 

If you hand us well organize and labeled PSD files, our team will code the HTML/CSS and hand you back pixel perfect, markup!

Final Markup (HTML, CSS, JavaScript)

File_Markup

 

If you have questions about the process we would love to hear your thoughts in the comments!

HTML5: The Language of the New Web

No longer a novelty, HTML5 has already changed the way web developers code and the way users interact with websites. Contributing to the decline of Flash, HTML5 is an undeniable force utilized by countless modern websites.

HTML5 Logo

The New Standard.

HTML5 is setting the bar for the ever changing web landscape. In addition to being integral to the single-site, multi-device experience, HTML5 serves as a standard for video, Flash-like interactivity, and is even creeping into the ad space. With HTML working hand in hand with CSS3 and JavaScript, HTML5 brings us to the next level of web development.

HTML5 is paving the path of the future for the Web:

It will be the go-to language for cross-platform development. According to Web Developer Juice, “Almost every platform – mobile or web – is now making the shift to HTML5 (this includes Blackberry OS, Palm WebOS, and Windows 8).” And Strategy Analytics predicted that HTML5 phones are a hyper-growth market, and global sales will increase 365% by 2016, from 2011. Developing for the desktop now includes developing for mobile. Which means faster and more cost-effective reach.

Ads will continue to shift from Flash. Apple adamantly denounced Flash, so, unsurprisingly, their iOS devices lack compatibility with those traditional Flash ads you otherwise see blinking at you across the web. With so much of mobile web traffic coming from iPhone and iPad users, advertisers can’t ignore that fact. Even on desktops, HTML5 aims for faster loading and better integration. Google Mobile Ads now offers a feature to easily convert Flash ads to HTML5 in Adwords and offers HTML5 banners. Pointroll goes as far as calling HTML5 “the future ‘Secret Sauce’ in online advertising.” HTML5 proves, once again, it is the solution for more effective and efficient reach.

It’s a robust and clean coding standard aimed at streamlining coding, publishing and browsing. HTML5 has been designed to do away with the need for add-on browser plugins. Many features are intended to improve site discovery and overall SEO, translating into more traffic. HTML5 includes the use of Canvas, which provides the potential for more graphic interactivity and an alternative to loading images the ‘old’ way – even on the fly! With better support for feedback forms, drag-and-drop tools, chat, and other popular interactive elements HTML5 aims to make developing and using the new Web much easier.
You can reference a useful infographic about HTML5 features and the benefits for future web development here.

To make the most of the new Web, the HTML5 experts at The Site Slinger code with the future in mind, utilizing the latest tools to provide robust user experiences, beautiful and clean websites. We’re happy to turn your vision into a pixel-perfect site via our best-in-the-world PSD to HTML coding, so contact us or submit your design and let’s get it done!

*Image courtesy of W3C, used under Creative Commons licensing.

So what IS responsive web design, anyway?

With the world going mobile there’s no way around it: your site has to adapt to any and every device that’s out there. Think about it… How many devices have you used today? I can count checking my email on three already!

Don’t get lost in buzzwords, understand why/how responsive web design works.

With the world going mobile there’s no way around it: your site has to adapt to any and every device that’s out there. Think about it… How many devices have you used today? I can count checking my email on three already!

In the past, the solution to differing device screens was to build an alternate version of your site, or even multiple apps optimized for the various mobile OS’s. However, these options often prove to be too costly in development and cumbersome to perform maintenance and updates. So what is today’s solution? Responsive web design!

Well, you ask… what IS responsive design? It’s one of those buzz words being thrown around a lot right now.

Responsive design allows for a single site to be designed and developed, yet performs effectively and beautifully across devices of varying screen sizes and orientations.

There are a few key features that allow this to work:

A flexible framework for content – the ‘grid’

The foundation of the responsive design, the grid provides easy content management across varying screen sizes through the repositioning of content areas or boxes.

Check out some great info on how to use the grid in design and download some basic templates here.

Responsive web design
Content moves based on screen size, but should still relay the same message in an aesthetically pleasing way. (Image courtesy of DezignMatterz)

Adaptable visual content

From images to backgrounds and graphical motifs, a solidly designed responsive site must be able to communicate your vision consistently, regardless of device and screen size. These elements of the page must be able to move around and make sense from a user perspective and still effectively tell the user what you’re saying/selling.

Check out some great examples of sites that do this here.

The ability to respond to devices

Generally done via ‘media queries,’ a responsive site must determine the best display configuration and adapt in an instant to changes in screen orientation and size. This should be done in such a way that the user doesn’t notice the site changing.

Check out some great examples of this here.

The Site Slinger understands the need to develop websites in a cost-effective, multi-platform manner. We love coding PSD to responsive design! You shouldn’t spend all of your resources managing updates or site variations across a seemingly infinite sea of different mobile devices. That’s why we build effective, high-value, responsive sites, giving you the ability to deliver content consistently and reliably to all visitors, whether they’re on a desktop, tablet, or smartphone.

If you’d like to discuss the options for translating your web design into a fully responsive site, please contact us, or submit a quote. We’re happy to turn your vision into a pixel-perfect site via our best-in-the-world PSD to HTML coding.

*For further reference on responsive elements see, “Understanding the Elements of Responsive Web Design

The Site Slinger Makes Design to Code Easy.

The Site Slinger makes design to code easy. Headquartered in Austin, our quality, reliability, and speed makes us different than other PSD to HTML companies. We are the only company to offer easy online ordering and a fully transparent development process.

The Easiest Way to Order PSD to HTML

We’ve just recreated The Site Slinger from the ground up focused on offering you the easiest PSD to HTML option, and we want to know what you think! Create an account, upload designs and we will get you a quote in 24 hours or less. Our easy to use online ordering system makes it simple to check the status of your current projects, submit new projects, see order history, and connect with the developers.

We love to code and we know how bad outsourced development can be. Try us for your next PSD to HTML project and get $100 off your first order. Please reach out if you have questions or comments, we would love to hear your feedback!

Follow us on Twitter and Facebook for the latest updates.

Photoshop to CSS Conversion: 3 Methods Compared

Converting Photoshop mockups to live web code is an extremely common practice among web designers. We’ve all done it a million times by hand, so it’s pretty exciting when we start seeing solutions pop up that will help us automate this process.

 

screenshot

Converting Photoshop mockups to live web code is an extremely common practice among web designers. We’ve all done it a million times by hand, so it’s pretty exciting when we start seeing solutions pop up that will help us automate this process.

The latest version of Creative Cloud Photoshop CS6 has a built-in feature for converting Photoshop styles to CSS, and if you need another solution, there are two solid extensions that you can check out. Today we’ll compare the results of all three methods: Photoshop, CSS3Ps and CSSHat to see which is best.

 

Our Three Candidates

This article is all about comparing the results from three different methods of achieving the same goal. We have a design in Photoshop and we want to see it built in HTML and CSS.

Our three methods include Photoshop itself (version 13.1) as well as two extensions CSS3Ps and CSSHat. I recently created a screencast for Psdtuts+ that introduces and does some comparison between Photoshop and CSS3Ps, which you can find here.

I didn’t cover layer group functionality in that tutorial though so I thought it was worth another go and decided to toss in CSSHat as well so we really cover the bases well.

Our Test Case

We’ll need something to test the different conversion methods on, so I whipped up a generic UI panel that could hold anything you want:

screenshot

This is basically comprised of three different layers: the text layer, the top bar and the background. Here I separated them out a bit so you could get an idea of how they were constructed.

screenshot

Below you can take a look at our layers palette. Note that this object is structured very intentionally. All three of the methods that we’ll look at today convert layer names to class names in CSS, so you want to be sure that you’re very careful about how you name your various pieces. Also note that the shapes are made from vector shape layers.

screenshot

Some of the methods that we’ll try out support layer groups, which means we’ll want to convert the structure here to a div structure in our HTML.

HTML

Photoshop can take care of the CSS for us, but we’re still on our own with HTML. Here’s a quick attempt at an HTML structure that will work with the code that Photoshop is going to generate. Without this in your HTML, the CSS won’t do a thing!

	
		<div class="panel"> <div class="paneltop"> <p class="type">Quick Panel</p> </div> <div class="panelback"></div> </div>

Photoshop

Let’s start off with the built in Photoshop functionality. The process here is extremely easy, all we have to do is select our layer group in the Layers panel and go to Layer>Copy CSS (you can also access this command with a right-click).

screenshot

Photoshop provides pretty much zero feedback that anything has happened at this point. There are no options to tweak, no panels to inspect, just the menu command that we clicked above, which places a big chunk of code into our clipboard. Here’s the output, straight from Photoshop.


.panel {
  position: absolute;
  left: 180px;
  top: 25px;
  width: 360px;
  height: 427px;
  z-index: 7;
}
.type {
  font-size: 19.913px;
  font-family: "Helvetica";
  color: rgb( 255, 255, 255 );
  line-height: 1.11;
  text-align: center;
  -moz-transform: matrix( 1.70449868947994, 0, 0, 1.72443193254442, 0, 0);
  -webkit-transform: matrix( 1.70449868947994, 0, 0, 1.72443193254442, 0, 0);
  position: absolute;
  left: 83px;
  top: 25.902px;
  width: 180px;
  height: 27px;
  z-index: 6;
}
.paneltop {
  background-image: -moz-linear-gradient( -90deg, rgb( 1, 98, 171 ) 0%, rgb( 0, 52, 91 ) 100%);
  background-image: -webkit-linear-gradient( -90deg, rgb( 1, 98, 171 ) 0%, rgb( 0, 52, 91 ) 100%);
  position: absolute;
  left: 2px;
  top: 1px;
  width: 351px;
  height: 81px;
  z-index: 4;
}
.panelback {
  border-radius: 20px;
  background-color: rgb( 224, 225, 226 );
  box-shadow: 1.5px 2.598px 5px 0px rgb( 0, 0, 0 );
  position: absolute;
  left: 2px;
  top: 1px;
  width: 351px;
  height: 418px;
  z-index: 3;
}

The Result

If we toss this into a code editor and take a look at the result, the results are a little disheartening. Photoshop didn’t do a great job with the conversion. For starters, the top bar doesn’t have rounded corners. Also, the shadow seems to be at full opacity (too dark) and the type placement is off. If gives us a strong start and genuinely saves us a lot of time, but it’s probably not the magic solution you were hoping for from Photoshop.

See it live: Click here

screenshot

To make things worse, if we jump back and look at the code, there’s plenty to complain about. There are some really wonky things going on here such as the unnecessary transform on the text. It seems that you can let Photoshop write CSS for you, but I’m not convinced that you should.

CSS3Ps

Our next candidate is CSS3Ps, a completely free Photoshop plugin that predated the built-in Photoshop functionality. The website shows some pretty complex examples so hopefully this will tackle our project a little better.

screenshot

With the CSS3Ps extension installed, go to Window>Extensions>CSS3Ps. Then select the layer group and click the logo that pops up inside of the CSS3Ps panel.

screenshot

Once you press that button, a web page opens up and presents you with a timer. You’re forced to wait twenty seconds and look at an ad, which sucks but given that the extension is free, it’s understandable.

screenshot

From here you’re taken to a page containing the code, which I copied and pasted below. Note that this time around, I had to add in periods before the class names. CSS3Ps takes the layer name exactly as it appears in Photoshop, so you add in the “.” or “#” symbols there.

	.type {
  font-family: Helvetica;
  font-size: 10px;
  color: #fff;
}

.paneltop {
  width: 351px;
  height: 81px;
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0;
  background-color: #000;
  background-image: -webkit-linear-gradient(top, #0162ab, #00345b);
  background-image: -moz-linear-gradient(top, #0162ab, #00345b);
  background-image: -o-linear-gradient(top, #0162ab, #00345b);
  background-image: -ms-linear-gradient(top, #0162ab, #00345b);
  background-image: linear-gradient(to bottom, #0162ab, #00345b);
}

.panelback {
  width: 351px;
  height: 418px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background-color: #e0e1e2;
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.34);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.34);
  box-shadow: 2px 3px 5px rgba(0,0,0,.34);
}

The Result

There’s a lot to like about the CSS3Ps output. For starters, it treats each individual layer as its own object and doesn’t attempt to position them over each other. I actually prefer this and always immediately strip out the absolute positioning code that the built-in method uses. This keeps the focus of the conversion where it should be: on style.

See it live: Click here

screenshot

Speaking of style, the results in that area are improved as well. Notice how the top bar actually has a border-radius this time around and how the box-shadow uses an alpha value to reduce the opacity. This version might be a little prefix heavy on things that no longer require prefixes, but otherwise the code isn’t half bad.

Also, the fact that you can get the output reformatted in Sass or SCSS is a killer feature that easily makes this method better than the default Photoshop feature.

screenshot

CSSHat

The third and final method that we’re going to check out is CSSHat. Like CSS3Ps, it’s a Photoshop extension, but this one will run you about $30.

screenshot

To use CSSHat, simply select the layer that you want to convert and open the CSSHat panel (find it in the extensions menu as with CSS3Ps above). Unfortunately, CSSHat currently doesn’t support layer groups, so you’ll have to do it on each individual layer. This is a serious strike against CSSHat, but it makes up for it in versatility.

screenshot

I love that I finally have some options to tweak. The other two methods were easy, but if you don’t like something, tough! Here I can toggle four different options: comment explanations, browser prefixes, layer dimensions and whether or not the code gets wrapped in a rule named after the layer.

Also notice that you can get the output in an impressive variety of formats: CSS, SCSS, Sass, LESS, Stylus and Stylus CSS. Here’s the output for the plain CSS version:

	.type {
  color: #fff; /* text color */
  font-family: "Helvetica";
  font-size: 10px;
}

.paneltop {
  width: 351px;
  height: 81px;
  -moz-border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #000; /* layer fill content */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDM1MSA4MSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSIgeDI9IjUwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDA2MWFiIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAzMzViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIzNTEiIGhlaWdodD0iODEiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
  background-image: -moz-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
  background-image: -o-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
  background-image: -webkit-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
  background-image: linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
}

.panelback {
  width: 351px;
  height: 418px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #dfe0e2; /* layer fill content */
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
  box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
}

The Result

As you can see above, the chunk of code this time is pretty huge, mostly due to the fact that the gradient is converted to a data URL. Below is the result if we paste directly into our code editor.

See it live: Click here

screenshot

As you can see, just as with CSSPs, the elements are merely styled, not positioned, we would have to push them into place ourselves. On that front, the styles look perfect with the exception of the text, which is tiny. I expect this has to do with the fact that I built the Photoshop version on a Retina screen though so you may not experience this bug (CSS3Ps actually did the same thing).

Who Wins?

“I recommend both CSSHat and CSS3Ps over what you get inside of Photoshop 13.1.”

None of the methods for converting Photoshop styles to CSS outlined above are perfect. The Photoshop version works, but the code is pretty ugly and the results don’t utilize the advanced CSS3 techniques that you’ll need to match things like opacity and complex border-radius setups. CSS3Ps is free and performs better than Photoshop, but the method of turning you to a web page that is hidden behind a twenty second ad delay is pretty annoying.

CSSHat is the best in the bunch as far as customization, but it doesn’t support layer groups. The default Photoshop method is the only one that positions your multiple items in a way that matches your canvas, which could be a good or bad thing (I wish it were an optional feature). Ultimately, nothing is going to give you the accuracy, power and versatility of coding by hand, but these tools can get you off to a strong start and save you some serious time.

Personally, I tend to favor CSSHat in this bunch. It’s a little pricy, but the functionality is stellar. It’s frankly a lot closer to what I wanted to see from Adobe. I think they really dropped the ball on this feature and I recommend both CSSHat and CSS3Ps over what you get inside of Photoshop 13.1.

What Do You Think?

Now that you’ve seen my assessment of these three tools, it’s time for you to chime in. Which of the above methods have you tried? Which do you think is the best? Let us know in the comments below!

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

What Is HTML? Back to Basics

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

screenshot

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

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

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

 

What Is HTML?

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

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

HTML: The Most Important Piece

screenshot

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

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

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

Markup Languages

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

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

The Typewriter Metaphor

screenshot

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

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

Tag, You’re It

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

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

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

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

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

Example Tags

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

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

Links, Tags and Attributes

screenshot

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

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

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

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

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

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

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

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

You Can Read HTML!

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

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

HTML: The Skeleton of a Web Page

screenshot

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

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

HTML is Meant to Be Boring

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

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

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

CSS is The Skin, Hair and Clothing

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

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

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

What Is HTML5?

screenshot

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

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

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

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

Conclusion: More to Come!

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

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

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

Image sources: xlibber, Ryan Amos, Dave Parker

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

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

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!

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.