We all love web apps, as long as you’re connected they provide cheap, fast and less resource alternatives to desktop solutions. On top of that they store your data in the cloud, a good place for it if your computer ever crashes or is stolen.

My initial observations…

1) It’s Built on Flex/Flash 9
One thing Adobe has got to be proud of is that so far it looks like all the A.viary apps are being built using many of their products like Flex, Flash and Coldfusion. A while back I speculated that Adobe might simply try to buy these guys out rather than compete. If that’s the case, A.viary did themselves a big favor by using an all Adobe back-end.

2) It’s a Little Slow
One thing that’s always been annoying about Flash-based web apps is that the more robust of them take a long time to load. This isn’t a huge concern but it us annoying. They need to figure out a way to bench mark this app so that more of the loading happens while the user is operating the software, not waiting to use it.

3) You can Import Images from the Web
I used to be a big fan of Picnik.com but now that they charge your separately than Flickr does for a Pro Account, not so much. Since I already own Photoshop, I don’t feel the need to pay to be able to do the same things in a web app. That app should be free, even if it needs to run adds to pay for itself. A.viary (for now) is 100% free and overs a bucketload of functionality over Picnik.

4) It rethinks the ‘Work Window’
One flaw in a lot of new design software applications is that they either clone Adobe’s Photoshop or Corel’s Draw. With A.viary things are reminiscent of existing operands but you can tell the designers tried to diversify a bit. In the end the UI feels more like GIMP than Photoshop.

5. Key commands Work
One of the things that makes this suite so useful is that key commands work as if it were truly a desktop app. This definitely decreased the time it took me to get to know the software, and start using it to make something.

6. Filters / Layers / Effects
Nothing new here, if you’ve used Adobe, you’ve used most of these before. There are some unique ones though. What the heck is Kuwahara?

7. Undo is Fast
The system must cache your every step because Undo/Redo seems almost faster than most desktop apps!

8. Saving is Public/Private
Saving your files takes a page out of the book of most web applications by allowing you either to save your files privately or in the public gallery of A.viary users for all to see. You’re also given the option to allow others to edit. This is cool but I wish there were more granular control. For instance if, I wanted my friend Mike to collaborate with me on a design but not the whole world I’d be out of luck.

All in all the A.viary product line looks impressive and is poised to really disrupt the industry!

At some point you may have heard your programmer friends talking about a tool called Subversion. What is it? why do you need it and how can it impact your work as a designer?

SVN FOR DSGN

Subversion was started in 2000 as an effort to write a free version control system which operated much like the paid solutions of the time. It is used to maintain current and historical versions of files such as source code, web pages, and documentation. It’s goal is to be a mostly-compatible successor to the widely used Concurrent Versions System (CVS).

But the designer workflow doesn’t ordinarily include subversion, when it could absolutely be used to help keep you organized, efficient and all backed-up.

The Benefit

In short, Subversion keeps track of versions, alterations and updates in files as your work on them. You can also create repositories that can be used to collaborate with friends or colleagues. In a design studio this is critical and it sure beats the hell out of working a file prematurely only to find you need to do everything again because your partner hadn’t actually made any changes yet.

How It Works

The Subversion structure is often referred to as a “three dimensional” filesystem with the added layer of revisions. When you save a file on your computer, unless you duplicate it into a new file, the computer has no way of knowing whether this is the original version of the file or the 63rd. Subversion allows users to monitor changes in real time. It will also allow you to see who’s working on what and who changed what when. In this way it operates very much like a wiki but that’s where it stops. It makes all files in a given directory atomic (meaning either there were changes or there weren’t). This way if you “Check Out” files to work on them but you end up not doing anything, when you check them back in later no changes will be made. If that doesn’t make sense to you now, don’t worry, it will as this tutorial continues.

Most Subversion clients like ZigVersion or SVNX keep files atomic by looking through the file contents to see where files existing on the server begin to differ from the ones being uploaded. This is good because if you need to take notes, you can wait until after your work is complete instead of taking notes as you go. It also means you can always roll back to an earlier version of a file if you stray too far from where you need to be.

Subversion can be a powerful addition to your design workflow and in the next few posts I’ll tell you how to use it, how to integrate it to your work flow and how to set-up a subversion server for your clients!

Pixel

Developed over the last eight years by Kanzel Berger, Pixel Image Editor is one of the strongest applications i’ve ever used to come from a single developer! It’s also available for Linux and Windows in 32 and 64-bit versions. The 64-bit OSX runtime is still forthcoming. My only problem with Pixel is that it looks and operates so similar to Photoshop. I wish someone would try to rethink the whole image editing UI.

PhotoLine

Photoline is a viable alternative but honestly, who wants to use a numerical input UI while designing? That feature alone keeps a large segment of the population from ever even considering it. Too bad because it’s a good program. Here are some of the features that it offers that a lot of it’s competitors don’t from MacApper.

* Pixel accurate drawing and selection tools
* 16-bits per channel
* CMYK and Lab color
* Full masking support
* Fully editable text layers with proper typographic controls (such as kerning and paragraph spacing)
* Shape layers with solid bezier tools
* Layer effects (drop shadows, etc.)
* Noise
* Difference Clouds
* HDR image support (including creating HDRs from multiple source photos)
* Image slicing, image maps, and animation tools for web designers
* Useful web export tools with presets, previews, file size info, etc.
* Recordable Macros
* Useful named presets for most filters
* Ability to name and save your own presets for most filters
* Text (paragraph and character) style sheets
* Launches in less than 1s on my MacBook Pro
* No product activation

A nobel effort by the developers but these days UI is everything and this one simply doesn’t have it.

Corel Draw and PaintShop

Corel has always been a bit like Hillary Clinton. They’ve got a lot of supporters, they’re well respected, hugely influential but no matter what they try they always come in second place. Some people will even argue that it’s better than Photoshop but the industry will tell you otherwise. The very fact that it’s been around so long and hasn’t quite made it says to me that they’ve still got a long ways to go. If you’re looking for an application as stable as Photoshop, with a huge userbase, and customer support to match, this is it.

Pixelmator

Ahhh, finally a competitor to Photoshop that gets it right on both levels: interface and function! In fact, I’ll argue that the UI looks better than PS’s. Things operate a bit differently but usability is great and I never once felt like I should switch applications. The fact that it opens PSDs is a HUGE plus. As far as how it stacks compared to PS, Macteens makes some great points:

In order to transform your image, you must use an overcomplicated interface to scale your image or whatever else you’re doing to it. This process could have been simplified by just using something along the lines of Photoshop’s Free-Transform tool activated by “Command + T”….There really isn’t any pretty way to say this, but Pixelmator offers no real power over managing text in the interface.

Gimp: GNU Image Manipulation Program

If Photoshop is the king of design applications, GIMP is the king of open source alternatives. Adobe really messed up when they ignored the Linux market because it created an opening for GIMP to build a huge fan-base and a legion of diehard supporters. I like the fact that it doesn’t operate exactly like Photoshop, because If I wanted anything that was just like Photoshop…I’d be using Photoshop.

Well, no one is sure yet but the new features in some of the products in Adobe’s may provide some insight as to what the future holds.

Adobe has just announced that the newest versions of several Creative Suite titles, namely, Dreamweaver, Fireworks, and Soundbooth, can now be downloaded for a test run.

There’s a catch. If you’re not currently using the CS3 versions of Dreamweaver and Fireworks, the trial period for these programs will end within 48 hours. Otherwise you can request serial numbers to use them during Adobe’s prerelease period.

CNet has a more in depth run down of the new features available in some of the Betas but doesn’t quite have the scoop on Photoshop.

We took a quick test drive of the Dreamweaver trial and liked some of the changes. Among the touted enhancements are a Related Files Toolbar and Code Navigator. The Properties panel integrates HTML and CSS coding, which could save time for those who edit dynamic sites. A new Live View Mode, driven by Webkit open-source rendering, previews pages within Dreamweaver, eliminating the need to open a browser. Adobe intends for this feature to make it easier to debug JavaScript as well as to work with Flash animation.

There’s no word yet on whether the next rough draft of Photoshop will be available for a free trial. However, Photoshop’s next iteration may become available in widgets, enabling users to mix and mash up some features with third-party content, according to a blog post last week by Photoshop product manager John Nash. We suspect that there will be more opportunities to blur the lines between the desktop, the Web, and mobile platforms within the next Creative Suite.

I have a theory that Adobe will aim at integrating all of it’s products into sister web applications like Photoshop Express (above), but that’s just my own speculation. However, some type of interface like Google’s Gears would be the big step towards cloud computing that Adobe has yet to take.

With the growing use of web apps for professional work, it’s inevitable that Adobe enter that realm.

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

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.

What follows are some simple facts I’d like to share about design blogging. It doesn’t matter if you work for a big group like Smashing Magazine or yourself these six tips are essential:

1. Be articulate. Proper grammar and spelling are the greatest pitfall of all writers. I’m guilty of it, you’ve been guilty of it, everyone who’ every written anything down on paper or screen has dealt with it. Proofread everything you write and if you have time send it to a friend to have them proofread it again. I’m guilty of getting over-excited and publishing things before they’re fully reviewed but as I blog more and more I’m learning to pace myself.
2. Be concise. Writing Photoshop tutorials online can bring a flood of traffic from sites like good-tutorials.com, psd-tuts.com and smashingmagazine.com. However, if your tutorial takes longer than necessary because you’re overly verbose you’ll cut that traffic in half in no time! One thing an English teacher once told me was “If you can say it in ten words, you can say it five.”
3. Be accurate. It’s one thing to blog because you want to waste your own time but if your readers feel like you’re wasting their time they’ll respond by flaming you or ignoring your blog on the web. So don’t make things up. If you’re writing a Photoshop tutorial and you get to your end result before you fully explain it, people will call you on it.
4. Be fun. Reading a Photoshop Tutorial should NOT be (in anyway) the same experience as reading the Declaration of Independence. Any tutorial that is ONLY facts is boring. that’s not to say that those tutorials aren’t just as useful but if your tutorial is boring most people aren’t going to stick around to read much more than they came for. Throw in an unexpected joke or two. Mention odd facts. Make your readers identify with you!
5. Know your audience. The biggest advice I can give aspiring Design tutorialists is to BE RELEVANT. If you’re writing a tutorial that has been written 100 times before like “How to make a Sphere in Photoshop” no one is going to give a flying frack. Similarly, if you’re writing for the Smashing Magazine crowd your tutorial should be something edgy, exciting and innovative. “How to Draw Ponies in Photoshop” would not be appropriate.
6. Be yourself. Since so much is at stake (money, fame, credibility, exposure) the world of design tutorials has become dirty business. Just know that once you become popular people will copy your style, blog design and all to try to steal your throne. If you remain true to yourself and your goals, this won’t matter. As long as you enjoy it, no one can’t take your motivation away from you.
7. Be innovative. So many people are writing tutorials now that it’s hard come up with new things to write about. That’s what pushes innovation, though, when the ’same old stuff’ just doesn’t cut it anymore. Some sites are pushing things forward by offering ALOT of money for good tutorials. Great! It raises the standard.
8. Be consistent. If you are absolutely convinced that you want to enter the ‘design blogging for profit’ world you need to deliver. Before you write a post make sure your audience will appreciate it. Some people are making their livings by blogging these days so it’s a highly competitive market in general but design blogging especially is competitive because it’s so lucrative. Think about how many art school there are around the country and world? It’s a guaranteed audience and one that grows every day.
9. Be smart. If you write design or code tutorials on a daily basis, have you ever really stopped to realize how much content you’re actually producing? At some point you may want to consider pitching a traditional book or writing an e-book. If you think about it, you’ve already got an extensive portfolio so why not approach a publisher with your ideas or publish them yourself.
10. Be realistic. No matter how much of any of these things you are it’s going to take time to build a following. Patience is a virtue, let your following build, serve theme well and in no time you’ll be blogging six-figures.

1. 1. Canson Sketch Pads. These sketch pads are smooth to write on, durable for carrying purposes and acid free so your grubby hands don’t eat away your designs. Whether you use pencil or ink, drafts will last a long time on this paper.



2. 2. Sakura Pigma Micron Pens. These pens make writing and drafting as smooth as spreading butter over hot pancakes. According to Sakura’s site their Pigma Micron Drawing Pens are filled with a high pigment, waterproof, fade proof, archival, acid free drawing ink which means your sketches will last a LOOONG time. I use these to draw character designs, draft layouts of future sites and to jot down ideas.



3. 3. HP Scanner/Printer. As much as I like to stay away from HP computers, they make good, cheap scanners and printers that are almost disposable. I usually scan everything at 300dpi and then scale it down and HP’s products make that quick and easy.



4. 4. Canon Point and Shoot Digital Camera. Sometimes I need reference photos, or I need to photograph clients or myself for whatever reason. Having a Digital ELPH or Powershot lying around never hurts on those occasions.



5. 5. Calculator. When I’m crunching numbers trying to find perfect third measurements or multiples, fractions or percentages of numbers, there’s nothing faster than a standard calculator.



6. 6. Apple iPhone. I’m a blatant Mac fanboy and have been for sometime. So my iPhone has become my electronic swiss army knife. Aside from the obvious, I use it as a substitute for most of the things on this list when I don’t have access to them: to take notes, to take pictures, to chat with clients etc…



7. 7. Apple Timecapsule. Another Apple product, imagine that. I use this for automated backups in my studio. My Macbook and iMac backup data to it wirelessly allowing me to rest easy knowing all my recent designs, tutorials, websites and web apps are backed up safely. For all of you wondering what I do in case of fire or theft, I also use Mozy.com’s remote backup solution.



8. 8. Ikea Furniture. It’s cheap, easy to put together and easy to take down when moving. Plus the illustrated assembly instructions are the epitome of minimal and universal design!
Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/art-supplies-for-the-photoshop-guy-155/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/