Photoshop Blog

With the recent announcement that Photoshop Express will include FlickR support, Adobe has realized that it missed an opportunity that Picnik quickly took advantage of. Mistakes by one company in business breed success for another and this case is no different.
(more…)

Bookmark It

Hide Sites

I love Photoshop but a good designer will learn new programs just for the sake of remaining relevant in this ever changing field. That said, here are five up-coming programs that are challenging the Photoshop throne.

(more…)

Bookmark It

Hide Sites

Are you new to Photoshop and looking for ways to enhance photos without having to stress yourself out reading hundreds of tutorials. These four techniques are no brainers that will make your designs “pop”. All of them are also ways to fake more advanced techniques. Each of them are simple and only require about five steps each.

(more…)

Bookmark It

Hide Sites

Adobe has dominated the design software market for close to two decades now. Their kingpin is Photoshop which, in the past decade, has grown to include support for 3D modeling, video and web design. So what can we expect from the next generation of 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.

(more…)

Bookmark It

Hide Sites

Photoshop is a tool that is versatile far beyond what many of the programmers can ever think of. When they introduced the smart object into the CS series it revolutionized the way I do things, here’s why it should do the same for you.

(more…)

Bookmark It

Hide Sites

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

Bookmark It

Hide Sites

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

Bookmark It

Hide Sites

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

Bookmark It

Hide Sites

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

Bookmark It



Hide Sites

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

Bookmark It

Hide Sites