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

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.

Effortless Full Screen Background Images With jQuery

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

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

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

 

Demo

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

View the demo

screenshot

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

Step 1: Grab Fullscreenr

screenshot

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

Step 2: Start the HTML

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

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

Step 2: Select a Background Image

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

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

screenshot

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

Step 3: Insert the Fullscreenr Snippet

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

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

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

Step 4: Body HTML

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

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

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

Step 5: Add the CSS

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
body {
    overflow:hidden;
    padding:0;margin:0;
    height:100%;width:100%;
}
#bgimg {
    position:absolute;
    z-index: -1;
}
#realBody{
    position:absolute;
    z-index: 5;
    overflow:auto;
    height:100%;width:100%;
    background: url('../img/raster.png');
}

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

screenshot

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

screenshot

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

Step 6: Add a Background Div and Header

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

1
2
3
4
5
6
7
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
    </div>
</div>

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

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

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

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

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

screenshot

Step 7: Add a Header Image

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

1
2
3
4
5
6
7
8
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
    </div>
</div>

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

screenshot

Step 8: Add Some Text

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="exampleDiv">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
        
        <div id="grid">
            <h2>Good Times on Hoth:</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        
    </div>
</div>

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

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

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

screenshot

Step 9: Add the Gallery

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
        
        <div id="grid">
            <h2>Good Times on Hoth:</h2>
            <p>Lorem ipsum dolor sit...</p>
            <a href="http://ow.ly/35afM"><img src="img/hoth1.jpg"></a>
            <a href="http://ow.ly/35ah9"><img src="img/hoth2.jpg"></a>
            <a href="http://ow.ly/35aim"><img src="img/hoth3.jpg"></a>
            <a href="http://ow.ly/35ajg"><img src="img/hoth4.jpg"></a>
            <a href="http://ow.ly/35ajY"><img src="img/hoth5.jpg"></a>
            <a href="http://ow.ly/35alw"><img src="img/hoth6.jpg"></a>
        </div>
        
    </div>
</div>

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

1
2
3
4
5
6
7
8
#grid img {
    margin: 20px 10px 20px 10px;
    border: 3px solid #000;
}
#grid a:hover img{
    border: 3px solid #fff;
}

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

screenshot

Conclusion

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

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

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.

30 Gorgeous and Versatile CSS Menus

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

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

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

Delving Deeper

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

Silk Tide

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

screenshot

Glenn Sorrentino

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

screenshot

Strutta

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

screenshot

Elbow Park

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

screenshot

Thoughtbot

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

screenshot

Toffee Nut Design

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

screenshot

Safarista

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

screenshot

David Jonsson

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

screenshot

Asvalia

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

screenshot

Bonsai Studios

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

screenshot

Great Expectations Church

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

screenshot

Ryan Couser

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

screenshot

Kk Media

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

screenshot

Bite Club

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

screenshot

Capital City Equipment Company

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

screenshot

Strawberry Leisure

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

screenshot

Artificial Studio

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

screenshot

Cognigen

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

screenshot

More CSS Menu Goodness

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

Manndible Cafe

screenshot

Code Greene

screenshot

Opera

screenshot

Mac Rabbit

screenshot

Clark Builders

screenshot

Mr. B and Friends

screenshot

Subvert

screenshot

The Swish Life

screenshot

Mystery Tin

screenshot

LiveResto

screenshot

FeelSocial

screenshot

Gowalla

screenshot

NZ Festival

screenshot

Download Prebuilt Menus!

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

Now Show Us Yours

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

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?

20 Simple jQuery Tricks

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

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

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

 

Beginner Tutorials

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

screenshot

#1 – jQuery Rounded Corners

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

screenshot

#2 – Image Cross Fade Transition

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

screenshot

#3 – Fading Menu – Replacing Content

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

screenshot

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

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

screenshot

#5 – Tabbed Content Area using CSS & jQuery

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

screenshot

#6 – jQuery Twitter Ticker

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

screenshot

#7 – Vertically Scrolling Menu

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

screenshot

#8 – Easy Display Switch with CSS and jQuery

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

screenshot

#9 – Simple Toggle with CSS & jQuery

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

screenshot

#10 – WordPress & jQuery Contact Form without a Plugin

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

screenshot

#11 – jQuery Sequential List

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

screenshot

#12 – Create a Fancy Share Box

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

screenshot

#13 – Create a Slick and Accessible Slideshow Using jQuery

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

screenshot

#14 – Using jQuery for Background Image Animations

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

screenshot

#15 – Animated Menus Using jQuery

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

screenshot

#16 – “Outside the Box” Navigation with jQuery

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

screenshot

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

A quick and easy news ticker from Antonio Lupetti.

screenshot

#18 – Create a Stunning Popup with jQuery

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

screenshot

#19 – jQUery Feed Menus

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

screenshot

#20 – Create a Funky Parallax Background Effect

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

screenshot

That’s All Folks

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