<style>
#grunge_table {
width:600px;
height:250px;
border:0px;
background:url(grunge_table.png) no-repeat;
color:#a24235;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
}
</style>

td {
padding:0 0 0 20px;
}

Now all that was a lot of work for something that could have been completely done in PHotoshop. What’s the big deal? Why do we even want a XHTML table?

Why XHTML?

Here’s my reasoning. Anything in our first column is machine readable text which means that search engines can index it. Having those extra keywords will improve your ranking as well. Second, we can get creative with our “bullets” if we wanted to have fly-out effects with javascript or roll-over effects with ajax hidden within the table we can easily do that by adding a few lines of code. Using an image prevents most of this. Lastly, because our bullets are actual XHTML objects, if we want we can mark them up with contextual keywords and hyperlinks.

This concludes the lesson. Click here to download the files used and see if you can reconstruct what I did. Of course if you’d like to see and example in the wild visit this site.

PART 1 | 2 | 3 | 4

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-4-193/feed/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-3-192/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-3-192/#comments Tue, 27 May 2008 05:50:12 +0000 JonGos http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-3-192/ Now that you’ve designed your table it’s time to learn how to make it function as valid XHTML. The easiest way is create a hidden table on top of the image.
1. 1. Create a table with the same number of rows and tables. My image had 8 rows and 9 columns.
2. 2. So we’ve got our table, now we want to style it with CSS. Give it a div id=”". For the sake of this tutorial of ‘grunge-table’.
3. 3. In your stylesheet reference the new id and call the image. Don’t forget to include the width and height of your image like so:

<style>
#grunge_table {
width:600px;
height:250px;
background:url(grunge_table.png) no-repat;
}
</style>
</head>

4. 4. Now, your table isn’t exactly going to match the cells of your image just yet. The best way to make it do this is to figure out the measurements of the columns and rows of your table image in photoshop. If you look at the images below, you’ll see what my table looked like before and after i fixed the columns and rows to match the image.

Before:


After:


The Code:

<table id="grunge_table">
  <tr>
    <td width="192" height="72"> </td>
    <td width="44"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
    <td width="45"> </td>
    <td width="46"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="26"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="24"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="26"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="24"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

5. 5. I used Dreamweaver to give you a visual representation of what’s going on. The green numbers at the bottom of the lower picture show the widths that the columns have been adjusted to. In the lower pic you’ll see that the table now matches the image perfectly.
6. 6. Now that the dimensions are correct, we need to hide the table setting the border to 0px. Here’s what your stylesheet code should look like:

<style>
#grunge_table {
width:600px;
height:250px;
border:0px;
background:url(grunge_table.png) no-repat;
}
</style>
</head>

We’ve got our hidden table, in part four we’ll fill it with data.

PART 1 | 2 | 3 | 4

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-3-192/feed/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-2-187/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-2-187/#comments Sat, 24 May 2008 15:40:51 +0000 JonGos http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-2-187/ Grunge Tables with Photoshop and XHTML (Part 2)

We’re learning to make grunge tables. In Part 1 we made a simple table, in this lesson we’ll add some grunge and text to make it look unique, and in the final lesson we’ll mark it up with XHTML.

Make It Grungy

1. 1. Import two of the textures you’ve downloaded from Bittbox.com. I chose a grainy one and one that looked a bit like crumpled paper. Feel free to use one, two or several, the more you use the more grungy things will look.
2. 2. Set the topmost grunge layer to Overlay and set the opacity to 75%.
3. 3. Set the lower grunge layers to Soft Light. This serves to preserve your original colors.
4. 4. Play with the other Opacity levels as you see fit.

Dirty Words

A grunge design deserves matching text. Start by downloading some grunge fonts from dafont.com (1, 2) and installing them on your system. Once you’ve installed your new fonts, relaunch Photoshop so that you have access to them. Once you’ve found the font that works best for your design, start working on adding a title or company logo.

If you do decide to add an existing logo you may want to alter the colors to help it match your design. Set the Layer Blend Option to Overlay. Use the grunge brushes you downloaded in part one to make what was your normal logo look even more grungy.

Because you can’t write diagonal text in HTML, we’re going to add the titles for our columns in Photoshop. Don’t worry everything in the rows will be HTML which will allow it to be indexed by search engines. I chose to use a more traditional font, Helvetica, which will match the styled text I plan on using later in the XHTML markup.



PART 1 | 2 | 3 | 4

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-2-187/feed/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-1-186/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-1-186/#comments Sat, 24 May 2008 00:21:11 +0000 JonGos http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-1-186/ If you offer web design or graphic design services at some point you’re going to need a price chart or service list so that potential clients can see what you’re all about. In this multi-part tutorial I’ll show you how to make one in Photoshop and then mark it up for XHTML. Then I’ll let you download the files to double check your work. You should download some grunge brushes and textures before hand, I used textures from Bittbox.com and these brushes from photoshopbrushes.com.




Before we continue, I want you to know that there are many other ways to achieve this effect. You could create the design in Photoshop then slice it for XHTML. You could create a table in Photoshop then just code an image-map for it. Of course, you could also do this using only tables and CSS. Since this section of the blog is about Photoshop, you’re going to learn how to do it using everyone’s favorite graphic design program.

One more thing, it will help you 100% if you sketch out what you need prior to making the grid. You can do this freehand or in a spreadsheet program like Excel. This is to simply help you organize your thoughts and layout your items in the best way possible.

Without further interruptions, let’s start part one of our lesson.

Setting The Table

1. 1. Create a new document roughly the size of the table you want.
2. 2. Select “New Fill or Adjustment Layer” and then “Solid Color”. Pick the color of your choice.
3. 3. Select View >> Rulers and then View >> Show >> Smart Guides.



4. 4. Drag the mouse from the top ruler to the areas in the document where you want the horizontal bars of your table. I suggest placing them apart in multiples of 5 or 10 so the math is easy. Space them apart so that every line alternates in color. (ex. Black Red Black Red)



5. 5. Create your bars using the rectangle tool. Use black as the color.
6. 6. Group your horizontal bars in a folder and name them. Mine was called “Horizontal“.
7. 7. Set the “Blend Layer” of this folder to “Soft Light” and the Opacity to “45%”



8. 8. You now have a darker shade of the color you chose for your horizontal bars that alternates with the original color.
9. 9. Now let’s repeat steps 3 through 5 for our vertical bars. Space them a part equidistant and uniformly.



10. 10. Select one of the vertical bars and change their “Fill” to 0%. In “Layer Style” select “Stroke” and set it to 1px (Outside). Do this for all of the vertical bars. Set the Blend Mode to “Overlay”.
11. 11. Create a new layer and select the line tool. While holding Shift and Option drag from the top corner of a vertical bar outward diagonally. this creates the vertical lines you see at the top of my design. Once you do this, duplicate each line then group them all and set the group Blend Layer to “Overlay” and an Opacity of “46%”.



12. 12. Looks like we’ve got the beginnings of a fancy looking table already!



In Part Two we’re going to grungify our table.

PART 1 | 2 | 3 | 4

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-1-186/feed/ http://www.developertutorials.com/blog/design/photoshop-design/eight-ways-to-turn-photoshop-designs-into-web-pages-167/ http://www.developertutorials.com/blog/design/photoshop-design/eight-ways-to-turn-photoshop-designs-into-web-pages-167/#comments Wed, 07 May 2008 21:15:38 +0000 JonGos http://www.developertutorials.com/blog/design/photoshop-design/eight-ways-to-turn-photoshop-designs-into-web-pages-167/ In “Designing and Coding a Wordpress Theme From Scratch” I gave an overview, start-to-finish, on how to turn a Photoshop design into a fully functioning Wordpress theme. There are many methods for getting from Photoshop to XHTML, however. Here are some of the ones I used in that tutorial and a few new ones that you may not be aware of.



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.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/photoshop-design/eight-ways-to-turn-photoshop-designs-into-web-pages-167/feed/ http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/ http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/#comments Wed, 30 Apr 2008 21:16:50 +0000 JonGos http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/ Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”
Part 7 - “Beginning with PHP for Wordpress”
Part 8 - “Putting the Press in Wordpress with PHP”
Part 9 - “Marking Up Header.php, Footer.php and Sidebar.php”

So far we’ve made a ton of progress with our theme design. We designed it in Photoshop, we converted to XHTML and then we began the somewhat tedious task of adding PHP. Now that we’ve created index.php, header.php, footer.php and sidebar.php, we can move on to creating the rest of the theme.

In “The Anatomy of a Wordpress Theme” we noted that Wordpress needs certain files for your theme to function properly. Here’s that list again:

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

As you may have noticed, the items listed in bold are the only items we’ve created in our lessons thus far and there is still a lot of work to be done! Anything struck through is optional therefore this lesson won’t cover it but I have linked to pages where you can read about them on your own. While I can’t go into complete detail I will highlight some major points about each and then I’ll give you links to four sites that break the process down in detail and more thoroughly:

single.php

Single.php is the file referenced when someone clicks on the permalink for one of your posts. Thus it is the template for displaying a single post on your blog. On most blogs single.php an index.php are very similar except that in addition to querying <? the content(); ?> we also have to query the comments page. We do this just before we close the loop with:

	<?php comments_template(); ?>

page.php

Page.php is the template for any page in your theme that doesn’t have it’s own .php template or that is not a blog entry. This is also the template for the static “Pages” that you create within the Wordpress Admin panel. It is usually also just like index.php except that it doesn’t include the loop or the_content().

links.php

Ignores Page content and instead displays your links using get_links_list.

404.php

Where you users land when they follow a bad link on your blog or click through to something that’s been removed. Codex offers some advice….

While you work hard to make sure that every link actually goes to a specific web page on your site, there is always a chance that a link clicked will slam dunk and become a famous 404 ERROR PAGE NOT FOUND. Some errors are avoidable, you should regularly check and double check all your links. Also, if you are deleting a popular but out-of-date post, consider deleting the body of the post, and replacing it with a link referring visitors to the new page.

This concludes “Designing and Coding a Wordpress theme from Scratch” . This guide was written as a starting point and a reference guide I can always be contacted at jongos [at] gmail if you are having trouble or need advice. Alternatively I’ve compiled a list of resources that I often reference when creating themes below.

In this tutorial I mentioned a theme that I was developing quite a bit. You can download it along with the PSD used to create it here. Keep in mind that the version you’re downloading is an early beta release. It’s bulky, clunky, not very pretty under the covers and has a mind of it’s own so I’m dubbing it the Rosie O Donnell release. Feel free to give me feedback on it, use it to double check your own code, or modify it to suit your needs.

DOWNLOAD THE AQUA MARINA WORDPRESS THEME



---

Recommended Further Reading

Stepping_Into_Templates
HTML to XHTML
So You Want To Create Wordpress Themes
From XHTML/CSS to Wordpress
Tamba2’s Guide
Slizing a Wordpress Theme

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/feed/ http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/ http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/#comments Tue, 29 Apr 2008 04:48:59 +0000 JonGos http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/ Image heavy websites have one problem: load time. So if you’re designing a Wordpress theme that relies heavily on images like one made in Photoshop, you want to do everything you can to increase speed. a) You want the images to display as shortly after the text does as possible and b) you want to do everything to help users on slower connections.

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.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/#comments Mon, 28 Apr 2008 18:07:57 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/ We’ve just started our first Wordpress theme! In Part 1 and Part 2 we reviewed some techniques that will allow our design to be marked up to XHTML. In this lesson you’ll learn exactly how to do this and why it isn’t exactly as easy as it seems.

Photoshop to XHTML in 24 Hours

So we’ve all seen those ads for websites that say they can “Photoshop to XHTML/CSS in X Ammount of time” right? No? well here’s 39 of them. What exactly are these service doing that you can’t as the theme designer? Nothing. If you feel so inclined, save yourself the fee (usually around $100 or so dollars) and do it yourself!

• 1. Select File > Save For Web and Devices



• 2. Click the arrow in the top right to optimize your websites color and download time. I usually don’t optimize for anything slower than 56Kbps because I use another technique which you’ll find out about in Part 4.



• 3. Under preset select whether you want to use PNG, JPEG, or GIF formats and the various quality settings for each.
• 4. Click “Save”.
• 5. A window will pop up. Here You want to set Format to “HTML and Images”. Under settings select Other



• 6. You’re going to set four options. For HTML you want to make sure ‘Output XHTML’ is selected. For Slices you want to make sure ‘Generate CSS’ is selected instead of ‘Generate Table’. Skip the remaining two options Background and Saving Files, they aren’t particularly necessary.

  >

• 7. Save the file, navigate to and open the resulting HTML file in your text editor. You’ll notice that Photoshop CSS has annoyingly put all your images inline with your HTML, meaning it’s not in a separate stylesheet like it should be.

In the next step we’ll discuss how to go from inline XHTML to the two file (.html & .css) standard that will be needed to mark up the design to php.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/feed/