Photoshop Blog

I recently developed a new logo for a social networking community. The site needed a logo so I began work right away. Here are a few tips that came to me after completing the task.

(more…)

There’s been an explosion of resource, recruitment and tutorial sites, in Part 2 we continue our review of the biggest and the best of them, analyze their brands and make suggestions for their growth. Make sure you read Part 1 before continuing.

05. PSD Tuts (Tie)

Founder(s) – Unknown
History – PSDTUTS is a blog/photoshop site made to house and showcase some of the best Photoshop tutorials around. We publish tutorials that not only produce great graphics and effects, but explain in a friendly, approachable manner.
About the Brand – A strong thematic cohesiveness throughout their family of websites.
Alexa.com Ranking – 14,664
Other Properties – audiojungle.com, flashden.com
Ideas for Growth – Their team has successfully created a design and tutorial blog, the audio search engine and a monetized flash resource site. They should take the business model they used for Flashden.net and apply it to resources for AfterEffects or Premier. Alternatively they could create a portal for scripts like Hotscripts.com

(more…)

There’s been an explosion of free design resources made available thanks to a number of sites that offer freebies and related tips. In this two part in-depth look, I examine the biggest brands in design blogs and suggest what they can do to make their brands even bigger and better.

This list was compiled and ordered by relevancy as well as their influence on the design community at large. I looked at each groups branding, site design, logo design, the strength of content and resources offered. I also looked at the number of properties each had. Alexa rankings were used to estimate site traffic although a high Alexa ranking did not always equal a higher ranking on this list. I did all this so as not to appear to be biased towards any particular blog or group.

(more…)

We’ve created our table, our table image an we’ve begun to style it. The next step is to enter our content. Let’s remember the whole reason for doing things this way, we ant to make sure most of the table can be indexed by search engines like Google. At the end of this lesson I’ll let you download the code, related images and PSDs to help your understanding.

1. 1. In part three we began styling our table but we didn’t get around to styling the contents. Let’s do that now.

<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>

2. 2. Next we need to create and style bullets that will be used to cross-reference services to options or items in our table. We’ll do this by styling the table rows to our liking (td). Take a look at the following snippet from the stylesheet:

td {
padding:0 0 0 20px;
}

3. 3. Now we can insert characters into our cells. I chose to use “x” as my bullet.
4. 4. Wow, not that many steps and we’re already done! Here is another visual to help demonstrate what’s going on.



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

0 Comments

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

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

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.

(more…)

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.

(more…)

Since I began blogging about design for profit I’ve learned a few things about myself and about blogging. There’s more to it than just stating your mind, when you’re doing it for money essentially you’re working for the public and your job is to be as accurate, as helpful and consistent as possible.

(more…)

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.

(more…)