Image via Wikipedia

Are people getting spoiled?

In the last two years or so, the number of free design ‘instruction’ and resource sites has exploded. Unfortunately, a lot of people seem to think we live in the Matrix, where ideas can just be downloaded into their heads. Well, it’s 2008 and they haven’t invented that technology yet. Until they do we still have to work to come up with new ideas and to learn how to best execute them.

It takes a little bit of time and experimentation to understand design effects, not just how to do them, but why one might use them and when to use one effect versus another. Every good designer has a ‘method to their madness’ and it’s important to try to get into the same headspace as your favorite designer. This means relaxing a bit an realizing that you may not get everything right the first time, or you may spend a few hours Googling around trying to get everything to make sense. Vandelay Design has some good advice:

One of the things that I like about web design is that there’s always plenty to learn, regardless of how experienced you are. I know that my knowledge really only scratches the surface of web design and development, and I appreciate the fact that seemingly unlimited resources are available to allow me to become a better designer.

The design community is filled with sources of inspiration and helpful sites for encouraging growth in abilities. Each of us needs to take our own unique approach to personal development that works for us.

In my post ‘The Tutorial for all Tutorials‘, I listed the rules I try to follow when making good design tutorials. Now I’m going to share advice on how to follow them…

1. Learn Fundamentals
When you’re trying to follow a tutorial about how to turn your little brother into giant Robeast in Photoshop it might help to know what the difference between the burn tool and the shadow tool. Because design tutorials are so common these days, some writers are going to assume a lot about their audience. This means they may not list every single step because they assume some people will be able to follow them regardless. I know this because occasionally I’m guilty of it. No matter what, you simply aren’t the best designer you can be if you don’t at least try learn the basics of your craft. So if you don’t already know, learn what the photoshop tools do.

2. Know when You’re Out of Your League
It never hurts to ask questions. A few people may ridicule you or they may ignore you or they may be a little hard on you. That’s okay because your asking the question didn’t do anything but show your dedication to getting things right. However, rather than emailing the writer directly, why not post your thoughts as a comment? Essentially by reading design tutorial blogs we are crowd sourcing instruction, why not also crowd source support for those tutorials? If you post comments on developertutorials.com or my other blog rest assured, someone will answer them. It also takes the pressure off the tutorial writer because they know they don’t have to answer the same question fifteen times.

3. Reread Before You Give Up
The other day I was having some trouble figuring out Subversion. I was following a tutorial but for some reason at the time everything was coming out greek and I could not figure out the techniques I was trying to learn. I didn’t give up, I didn’t ask questions but somehow I still got everything working. How? I walked away.

The next day I came back and followed the same tutorial word for word and it worked. The only thing that had changed between the first day and the second day was me. I had new perspective and things started to make sense that hadn’t before. I realized I had skipped a few words that turned out to be critical, I had misinterpreted other sections and a few things I was able to guess at. Remember when your people used to tell you to put a study sheet under your pillow the night before an exam? This is because, contrary to popular belief, you still think in your sleep and sometimes the subconscious can solve problems passively without your being aware.

4. You Do Not Suck at Photoshop
No matter what your profession or hobby is, if you aren’t confident about your own prowess, people are less-likely to believe in you. In “Five Point Form: Mastering Professionalism as a Freelance Designer” I talked about this a bit…

Another thing I’ve learned is that most people are completely incapable from recognizing real talent from anything else that might be put in front of them. If they aren’t designers, they don’t think like designers and they don’t really know what makes one designer better than another. Thus, they need to be convinced. I’ve seen people who choose horrible color palettes and layouts make upwards of $10K while people making photoshop designs that are nothing short of brilliant make pennies. The average client is waiting on you to tell them that you’re great, that you know your stuff and to prove it to the best of their understanding. This is why presenting yourself with confidence (not arrogance) is key to getting class “A” projects.

The bottom line is you need to muster up confidence, this will lead to trying new things and making bold creative decisions that can’t be taught. So don’t believe the hype, you do not suck a photoshop!

Ultimately, we all need to be patient with each other. If a tutorial isn’t 100% up to par, don’t try to demean the person who is essentially offering a free service. Make suggestions. A few people have asked me flat out to revisit my posts on how to Design a Wordpress Tutorial from Scratch. They were polite, and brought up valid critiques that made me realize I didn’t cover things as well as I should have. As a result I’ll be revisiting that series later this month.

Kathy is in love with Subversion, you will be too after this tutorial:

Using Subversion is very similar to uploading and downloading files using an FTP client. First you’ll need a Subversion server and a Subversion client. You can get the latest version of the Subversion server from Tigiris.org. As I write this, the latest version for Mac OSX is Universal Subversion 1.5.0. I’m a Mac guy so if you use Windows, sorry but keep Googling for a different tutorial.

Installation and Creating a Repository

• 1. Download and run the Subversion installer.
• 2. Many programmers like to use Subversion from the terminal. Most designers would rather claw their eyes out so make sure you download and install a Subversion client. Some popular ones are CollabNet, ToroiseSVN, ZigVersion, and SVNX. My personal favorite is ZigVersion.
• 3. Before you continue I highly recommend you read through this e-book about Subversion. It’ll explain some of the terminology, the reasoning and the theory behind Subversion. If you have no clue what the heck I’m talking about, it will break things down for you and help you understand Subversion on a deeper level. You only have to read it once and you’ll thanks me afterwards. Trust me.
• 4. Now let’s create a folder called “Subversion” in the root folder on your Mac.
• 5. Inside that folder make another folder and name it whatever you want. I named mine “1″. You can absolutely use any folder on your computer but for the sake of keeping the path short I’m using the root. My path is: users/Subversion/1
• 6. Now that we’ve read up on Subversion, downloaded and installed a Subversion server and client, and created some files, we need to launch the Terminal. We’re going to create what’s known as a “repository” for our files.
• 7. Type ls and hit to Return to see what directory you’re in. If it isn’t the root, or wherever you want to be type cd to change directories to wherever you need to be. If you’re in the root of the folder that contains the two folders (parent and child) then you’re in the right place.
• 8. In the Terminal type svnadmin create Subversion/1 and hit return.
• 9. Close Terminal.
• 10. We’ve successfully created a repository. Navigate to the child folder (mine was called “1″) and look inside, you should see several files that weren’t there before. This is our Subversion Repository and now that it’s created we can start using it.

In our next lesson we’ll learn how to integrate Subversion with our typical workflow as designers.

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”

Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

Anatomy of a WordPress Theme

Before we get ahead of ourselves let’s analyze exactly what Wordpress is expecting from a theme. The Wordpress engine works primarily using separate PHP files for the different components of the core engine. The various parts of your theme will simply call for various parts of the core engine to display content. This makes it easy for you to style sections individually. It also can allow for some incredibly complex themes that are built on the Wordpress engine. Themes like the The Unstandard by Derek Punsalan and Redoable are great examples of how to rethink the Wordpress theme impressively.

Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php).

Here are the things Wordpress looks for a theme file:

1. 404 Template = 404.php
2. Archive Template = archive.php
3. Archive Index Page = archives.php
4. Comments Template = comments.php
5. Footer Template = footer.php
6. Header Template = header.php
7. Links = links.php
8. Main Template = index.php
9. Page Template = page.php
10. Popup Comments Template = comments-popup.php
11. Post Template = single.php
12. Search Form = searchform.php
13. Search Template = search.php
14. Sidebar Template = sidebar.php
15. Stylesheet = style.css

For the most part, if you’re missing any of these parts your theme either won’t work or won’t fully function the way Wordpress wants it to. So far the only thing we’ve completed is stylesheet.css so where do the rest come from? In Part 7 we’ll create index.php and start marking up our XHTML to PHP.

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

Cleaning up Your XHTML

Let’s start by creating a blank document called style.css in the same directory as your HTML file. Open the CSS file and add the following information:

/*
Theme Name: your-themes-name
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number-optional

General comments/License Statement if any.
*/

like so

Now let’s open the HTML file the Photoshop created for us which should look something like this.
The inline document is essentially divided for us already because everything between the <style> and </style> tags is going to be cut out of our html document and pasted into the CSS document just after the heading we just added. Let’s do that now, copy the style data out of the HTML document and into the CSS document and make sure that you close the tags once you’ve done so.

The resulting HTML file should now look like this:

and the CSS file like this:

Got it? Now lets do some major cleaning. Now that we’ve removed the style from our HTML we need to add it back. We’re going to replace the empty <style> tags with the following line:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

This line is telling our document some very useful information:

1. rel - the relationship of the linked document to the current document
2. href - the url to the linked document
3. type - the MIME (Multipurpose Internet Mail Extension) type of the target URL
4. media - denotes on which device the document is meant to be displayed

or the translation for humans: “Hello, the text file that lives at this URL is a stylesheet that was made for use with documents that would be displayed on computer monitors and screens.”

We have to do this because we’ve taken out the style information but since we still want to style our HTML document we have to tell it where the style information now lives. Next we want to empty all our <div> tags.

Since all our our photoshop images are essentially background images any line from our HTML document that looks like this:

   <div id="aqua-01_">
	<img id="yourfilename_01" src="yourfilename_01.png" width="549"
                  height="126" alt="" />
   </div>

Should be changed to look like this:

	<div id="aqua-01_">
	</div>

But only when you change the corresponding ID container the CSS document to look like this:

	#aqua-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:549px;
	height:126px;
	background:url(images/aqua_01.png);
	}

What we’ve done is taken the image out of the <div> container in our HTML document and placed in the corresponding ID container in CSS. This is important because now we can put other things like text or other images into the HTML files <div> container. This will also allow our page to structure itself properly even if a few images are slow to load.

Finally we want to take anything that is an image and place it in a folder called “img” or “images”. If you look at the code above I’m telling the CSS to look for image files in a folder called “images”. We want to do this for organizational purposes. Of course this is entirely optional but it’s good practice and somewhat of an organizational standard.

Are you still confused?
Download these files and examine them to see if you can figure out what I did to make the page render properly.

In the next lesson we’re going learn how to optimize our page for speed using javascript. Sweating yet? Don’t worry we’re already a lot closer than when we started!

Layout and Structure

This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

Let’s compare the sketch to the finished theme:

As you can see my marked up design remains fundamentally similar to the original concept sketch.

Designing WordPress Themes in Photoshop

We’ve got our sketch, lets open up Photoshop and start designing. Since every design is different, I won’t bother explaining every single choice I made, instead I’m going to give you some tips on laying out your design so that it can be successfully marked up for the web.

1. 1. Work to a grid. I don’t necessarily mean the grid that you get when you type Command+’ but rather working to a structurally sound grid that corresponds to the golden ratio or the rule of thirds. This is because Photoshop has to ’slice’ your resulting design into rectangles and if you keep it in mind while you design, that can be done easily at the end.

In the above picture you can see that I worked to a grid that I created using guides. As my design progressed, the grid got incredibly convoluted but these lines correspond in some way to the layout and skeleton of the site. I’d say this is even more important for minimal designs like my own.



2. 2. The fewer the slices the better. So when you finish your design you’ll slice it into sectors that will then be marked up to xhtml and subsequently php to create your theme. This the last thing you want is a 100 different areas to code separately. If you study the image below you’ll see that I had about 16 ’sliced areas’.

   

   Try not to have more than 20. Why? Because each of these slices are images that have to be downloaded and displayed when someone visits your website. The more images, the slower the load time will be for people with slower connections. Although in Part 5 I’ll show you how to optimize your image based website for speed, it’s better practice to have fewer slices.

3. 3. Make each content area it’s own slice. I can’t stress how important this is! For someone new to XHTML it can be incredibly hard to figure out how to float < div > tags so that content areas remain separate. The laymans solution? Don’t bother! If all your content is contained in < div > ’s for a specific image or ’slice’ you won’t have to.

   Another reason to do this is that if you have a content area that is divided into slices that cut up the content space, you’re going to have a much harder time trying to make the content display correctly over two background images.

4. 4. Work in color proof mode. When I’m designing for the web I’ve learned to work entirely, start to finish, in color proof mode (command+Y for Mac / control+y for Pc). This is because colors in Photoshop can be deceiving and if you aren’t using websafe colors, you need to make sure everything translates as you want it to. I explained this in more detail in a previous article here.
5. 5. Think in 3D.Your design should not be thought of as a flat surface. It has depth and the things that are different elevations should be treated the same. For instance, if you have text or images ontop of content areas in your design, you may want to call on them in the stylesheet instead of leaving ‘flat’ as part of the background images. Thus all stylized text like your header text or social bookmarking links should be images that are displayed with CSS. This is the second and topmost layer of your design with the layout existing below

Got all that? Let’s move on to Part 3 - Photoshop to XHTML in 24 Hours!

1. Create a new document. It should be relatively large like 700×700 or bigger.

2. Create a new layer and call it “Base”.

3. While holding down shift, Use the eliptical marquee tool to create a circle selection.

4. Fill the selection with black.

5. Go to Filter > Render > Difference Clouds. Press CTRL+F twice to apply the effect two more times.

6. Go to Image > Adjustments > Levels. On channel RGB use the following settings 0, 1.64, 190.

7. Select Filter > Sharpen > Unsharp Mask. Use the following settings - Amount: 500%, Radius: 3.0, Threshold: 15

8. Select Filter > Distort > Spherize > Amount: 100%. Then spherize the selection again using a setting of Amount: 50%.

9. Now select Image > Adjustments > Color Balance and use the following settings.

Shadows: +100, 0, -100
Midtones: +100, 0, -100
Highlights: +70, 0, -15

10. Sharpen the image again by going to Filter > Sharpen > Unsharp Mask. Using these settings - Amount: 300%, Radius: 3, Threshold: 15

11. Create a new layer, we’ll call this layer “Accent” and repeat steps 4 and 5 so that you’ve filled the selection with black and added difference clouds a few times. We’ll hide the “Base” layer for now so we can just focus on this layer.

12. Now go to Filter > Liquify and use the Brush settings - Size: 235, Desity: 50, Pressure: 100. Now, using the Forward Warp Tool (W) and Twirl Clockwise Tool (C).

13. In the “Accent” layer’s blend options set the Blend Mode to “Overlay” and ad a Gradient Overlay with these settings - Blend Mode: Multiply, Gradient: Reverse, Style: Radial, Angle: 90, Scale 131.

14. Let’s duplicate the “Base” layer three times. Name one “Outer Glow”, one “Inner Glow” and one “Liquid”. Let’s go ahead and arrange them like so:

15. Hide all but “Outer Glow” for now. Select this layer, which should be identical to “Base” and go to Filter > Blur > Gaussian Blur and use the setting 43.5%. Change the Opacity to 50%. This turns the layer into a soft halo effect behind our sun. (Note: This layer should be the only layer underneath “Base”.)

16. Unhide and select the layer called “Liquid”. A real star like our sun consists of molten rock and plasma and both can sometimes appear like liquid. So in this step we’ll add a bit of liquid to mirror reality. We do this by selecting Filter > Distort > Ocean Ripple. You should play with this but I suggest these settings - Ripple Size: 7, Ripple Magnitude: 16. Set the opacity of this layer to 45%.

17. This step is very important our elliptical marquee should still be selected. (If it isn’t option click on any layer with our sun on it then click on the “Liquid” layer.) Select “Add Layer Mask”. Now select the MASK AND NOT THE ACTUAL LAYER. Select a soft brush from your palette and the Default black and white settings (D). Using a black brush, draw on the layer mask so that most of the liquid layer is hidden and only a little bit remains. In the picture below I show you what this should look like when all the other layers are hidden. (Note: This layer should be below “Accent” but above “Base”)

18. Now unhide and select the layer called “Inner Glow”. Set the Fill to 0%. Now select the Blending Options and as you may have guessed, Inner Glow. This is just to diffuse the border of our sun a bit, Here’s the settings I used, feel free to copy them or use your own.

19. We’re all done! Now we’ve got something that looks like the fiery hot solar body that gives us all life!

If you’re lazy or you just want to see some examples of everything I did here, this entire tutorial can be downloaded from Mediafire. This tutorial is a improvement upon this tutorial by Tutorial Wiz.