The new site findfreeclipart.com helps you reduce the amount of time you spend quality stuff.

Vecteezy also offers quality vectors and free clipart.

And while I’m at it I should also include the new member to the PSDTut family, VectorTuts for those of you that need to be spoonfed.

This isn’t a comprehensive list, just the pages I use frequently. Feel free to add to the list as comments below!

Slice to XHTML/CSS
In that same tutorial we took advantage of the most common way to turn PSDs into XHTML. The method, built in to the CS series of Photoshop, is called slicing and it takes all the work out of coding for you! The major complaint is that the code exported doesn’t exactly fit conventional standards (no separate stylesheets and html documents, for instance).

Adobe InDesign
Two items in this list are in the Adobe Family for good reason, Adobe wants you to use them all together so they’ve make it easy to go from one application to another and back. In this case you would design a page in Photosohp then enhance it after exporting to Indesign. Then you would export it as XHTML from InDesign. Of course since InDesign doesn’t like importing vectors, it will try to rasterize your text and images, so you should recreate text within the InDesign environment before exporting. Here, blogger, Nick Hodge talks a bit about Photoshop and InDesign workflow.

Adobe Fireworks
Originally a Macromedia product, Fireworks has now been fully integrated into the adobe family and offers some unique alternatives for web development like animations and web graphics. Although vectors have been integrated into Photoshop somewhat, Fireworks still handles them better although translating from Photoshop to Fireworks can cause certain issues

Media Lab SiteGrinder
SiteGrinder2 and SiteGrinder2 Pro are extensions for ProTools that allow for the exporting of WC3 Compliant XHTML/CSS. Unlike the “Save for Web” option built into the CS Suites, SiteGrinder does an excellent job of outputting code that doesn’t need to be ‘cleaned up’ after the fact. It conveniently names the Stylesheet block ID’s after your layers for easy deciphering of the architecture. Another neat function is that as it builds, SiteGrinder eliminates redundant graphics and merges layers when possible to minimize download size. Many designers swear by it. Here’s a blurb from the creators, MediaLab:

SiteGrinder 2 successfully turns Adobe Photoshop into an easy-to-use and powerful website design and production tool.

While SiteGrinder is not aimed solely at the web neophyte, a SiteGrinder-equipped designer with no previous web experience can use only their Photoshop skills to go from concept to deployment of a professional, standards-compliant site in mere hours with no slicing or programming.

The difficulty of this task is invisible to the user as SiteGrinder builds graphics, text, and interactivity using modern web standard technologies and takes into account tricky requirements like cross-platform browser compatibility.

Site Grinder 2 Pro is $349, the Basic version is $129

Media Lab PSD2FLA
Media Lab’s other claim to fame is PSD2FLA, a program that (like it says in the title) converts Photoshop Documents (PSD) into Flash Documents (FLA). If your weapon of choice is Flash websites that are well designed, this will help you get your design ideas out quickly so that you can spend the majority of your time programming Actionscript.

Image Mapping
One somewhat forgotten method for turning PSD documents into web pages is with image maps. Actually, it wasn’t so much forgotten as it was banned from the internet like tables were in 1998. An image map is essentially a layer of transparent html on top of an embedded image that uses anchor tags to turn areas of images into hyper text links. While this means any image can theoretically be turned into a website, the method is considered somewhat amateurish as it doesn’t allow for things like machine readable text, stylesheets or many of the other things extensible HTML allows.

If you’d like to read more about this dinosaur of a technique try this page.

The fact of the matter is that better technologies have simply replaced image maps. With Javascript and Ajax we can now embed dynamic images that are tied to databases to produce far more impressive things than Image Maps ever could (think GoogleMaps). To put it another way, using Image Maps in 2008 is like trying to churn your own butter (from the cow and mining your own salt) when there’s a Trader Joe’s right across the street from your house.

Outsource It
What could be your easiest option is to simply outsource the coding to firms that specialize in PSD to XHTML slicing and coding. Most of them simply do what I described in #1 so it’ll save you money if you learn to do it yourself.

Bellow you’ll find a list of ten places that offer this service. (In full disclosure, GosDot, is my own service.)

1. Aloe Studios
2. Chop and Code
3. Happy XHTML
4. GosDot
5. Design Creek
6. FinelySliced
7. Merix
8. PSD2HTML
9. XHTML Slicer
10. XHTML This
11. XHTML Team

Hand Coding
For developers, hand coding (also known as hard coding) is by far the most preferred method. While some will still use photoshop to create and slice images, they’ll do all the styling and coding themselves. People do this for a variety of reasons but the main reason is for control. If you write your own code, you’ll find bugs quicker and know more about the inner workings of your own site. It an take longer, but I guarantee you that quick and prolific hand coder will out pace anyone in workflow, simply because they don’t have to reference as much to be standards compliant.

One way to do this is with javascript, the other way is with CSS.

Preloading Images with Javascript

Javascript is unfortunately abused all over the web. It’s used for scripts that create pop-up ads, pop-under ads, and to change browser homepages. So the only draw back to this approach is that some users have deliberately turned off javascript in their browsers to thwart abusers. No big deal. If the user has javascript turned off, the technique I’m about to share will be ignored and the page will load normally.

1. So how is it done? In the folder that contains your index.html file and stylesheets, create a folder called ‘Scripts’.
2. Let’s create a blank document in the text editor and call it preload.js
3. We’re going to create an array of calls for images that will start to load as soon as the head of the page loads. List all the images you want to have ‘headstart’ on loading here. This can include images that are linked to on the page but that don’t appear on the page. When dealing with a Photoshop design that is being marked up to XHTML you should place all the slices here.
4. Next you want to place the following code in the header section of your HTML document just after the <title> and <meta> tags.

   <script type="text/javascript" src="scripts/preload.js"> </script>
   

   This tells the HTML document to look for the script before the stylesheet and subsequently, to request the array of images the stylesheet needs to load. Alternatively you could place the javascript inline but I prefer using external documents.

5. The contents of the Javascript file should look like this:

   if (document.images)
   {
   preload_image = new Image();
   img_path = new Array();	
   
      img1 = new Image();
      img2 = new Image();
      img3 = new Image();
      img4 = new Image();
      img5 = new Image();
      img6 = new Image();
      img7 = new Image();
      img8 = new Image();
      img9 = new Image();
      img10 = new Image();
      img11 = new Image();
      img12 = new Image();
      img1 = new Image();
      img1.src = "../images/yourimage_01.png";
      img2.src = "../images/yourimage_02.png";
      img3.src = "../images/yourimage_03.png";
      img4.src = "../images/yourimage_04.png";
      img5.src = "../images/yourimage_05.png";
      img6.src = "../images/yourimage_06.png";
      img7.src = "../images/yourimage_07.png";
      img8.src = "../images/yourimage_08.png";
      img9.src = "../images/yourimage_09.png";
      img10.src = "../images/yourimage_10.png";
      img11.src = "../images/yourimage_11.png";
      img12.src = "../images/yourimage_12.png";
      img13.src = "../image/yourimage_13.png";
   
   for(var i = 0; i<=img_path.length; i++)
   preload_image.src = img_path[i];
   }
   

6. That’s it. You can use this to preload images for the next page, icons, or any number of things but the idea is to use it to call the array before they’re called elsewhere on the page.

Preloading Images with CSS

Another method is to preload images in the stylesheet. This method is fairly useless on the actual homepage but it can be used to preload all sorts of images on subsequent pages. Lets look at the code:

     .hiddenPic {display:none;}

This class should be placed somewhere in your stylesheet. You can place it inline in your html document and it would look like this:

     <style type="text/css">
     .hiddenPic {display:none;}
     </style>

Next, at the bottom of your html page just before the </body> closing tag, we need to call all the images from the next page we want preloaded and apply the .hiddenPic class:

     <img src="yourimage.jpg" alt="" title="" height="" width="" class="hiddenPic">

     <img src="yourimage01.jpg" alt="" title="" height="" width="" class="hiddenPic">

     <img src="yourimage02.jpg" alt="" title="" height="" width="" class="hiddenPic">

</body>

How does it work? Essentially you’re calling the images when the browser reads the page and hiding them before they are ever displayed with the display:none; line. The idea is that the browser downloads the images and caches them anyways so that when the user clicks through to the next page the users browser will note that the images being requested have already been cached and won’t waste time downloading them again.

Now that load time has been reduced, in Part 6 we’ll get back to marking up our XHTML to PHP and developing our Wordpress theme.

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.