Craig Soup Web Design Blog

Contact Me

October 8, 2007

To the City

Craig Campbell @ 5:37 am

While watching the Red River Shootout this weekend, I decided to exercise my creative muscles a little bit and play around with Photoshop. This is what I came up with:

To the City

The design is just a compilation of images I downloaded, sliced apart, threw together, and added some color changes to. It was actually inspired by a similar piece that I had seen on the internet, but for the life of me, I can’t seem to find the image again.

Anyways, the moral of the story here is that it’s good for the creative mind to take a break from “work” every now and then in order to create something just for the sake of creating something! It reminds us that we love our jobs, that even though we may get bogged down in the business side of things every now and then, we’re still designers, and we love what we do!!

August 31, 2007

Photoshop Tutorial - CraigSoup.com Background

Craig Campbell @ 10:06 am

I’ve had a couple people ask for a tutorial on how to create the craigsoup.com graphic that I created in my last post, so I thought I’d go ahead and do so while I made a desktop wallpaper out of it. I’ll be using Photoshop CS3 for this tutorial, but you should be able to follow along in older versions of Photoshop as well.

I’m going to start with an image of some old, crumbly wallpaper. I took this picture at my wife’s uncle’s house. Lots of great photo opportunities there! Anyways, here’s the photo (click on the image to get the full size version).

Old Wallpaper

The original image size here is 2272 x 1704. I want to make this for a few different resolutions (1440 x 900, 1024 x 768, and 800 x 600), so I’m not going to resize anything just yet.

1.) The first thing I want to do with the image is tone down the colors to give this a more antiquated look. To do this, I’m going to create a new copy of the layer with the image in it. For something like this, I almost always start with a new copy of the original layer, because I don’t like messing with the original image. You can make a new copy by dragging the current layer to the “New Layer” icon ( New Layer Icon ) or by pressing Cmd+J (Mac) or Ctrl+J (PC) with the image layer selected.

2.) Now we want to remove the color from this new layer. To do this, I’m going to select the new layer (which should be directly above the original layer)  and desaturate it (Cmd+Shift+U or Ctrl+Shift+U). This layer should now be a grayscale version of the original layer.

Grayscale Wallpaper

 3.) Now, we’re going to make ANOTHER copy of the original layer by once again dragging the ORIGINAL layer (not the grayscale one) to the “New Layer” icon or by selecting the original layer and hitting Cmd+J or Ctrl+J. Drag this new copy to the very top of the layer stack so that it’s directly above the grayscale layer.

Your Layers Palette should now look like this (notice I’ve also labeled the layers appropriately):

Layers Palette

4.) Now, simply change the blend mode of the top layer (the “Color Copy” layer) from “normal” to “soft light” (the blend mode dropdown list is found at the top of the Layers palette). This results in muted colors that give our photo a more antique-ish feel.

Muted wallpaper

Very cool! Steps 1-4, by the way, are always a GREAT way to give your images an older, vintage feel. The blend mode you choose in step 4 may vary depending on the image (sometimes “overlay” works a little better), but for the most part, this technique almost always yields great results.

5.) Another thing I want to do is to rotate the photo 180 degrees so that the corner of the wall is closer to the right side of the image. To do this, go to “Image > Rotate Canvas > 180″. And voila! The image has been flipped.

6.) Now I want to bring up the contrast and reduce the brightness a little bit in order to make our image look a little more spooky. I’m going to do this using an adjustment layer. You can create an adjustment layer using another handy little icon at the bottom of the layers palette. This is the icon that looks like a circle that’s half black and half white. When you click on this icon, you’ll get a popup menu. Choose “Brightness/Contrast” from this menu. For this image, I’ve chosen a brightness of -36 and a contrast of +81.

Brightness/Contrast

And here’s the result:

Now we’re getting somewhere!

7.) Now we’re going to get really nasty! Select the “burn” tool ( Burn Tool  ), and using a large brush size with soft edges, go to town on the grayscale layer. (I had my “exposure” for the burn tool set to 34%, in case you’re wondering.) This will darken the parts of the image you brush over, so don’t go overboard, but especially try to darken the edges of the image. Keep brushing over the grayscale layer until your image looks something like this:

 Freaky! I love it!

8.) Now I want to highlight the hole in the wallpaper that you see right in the middle of the image. So I’m going to choose the “dodge” tool (located in the same spot at the “burn” tool) and touch up the hole (again, on the grayscale layer) to make it stand out more . . . like so:

9.) This is where things get fun. At this point, we’re gonna jump on over to brusheezy.com and download some new Photoshop brushes. For this particular effect, I suggest the Blood and Splatter brushes, the TurkHitBox Grunge Set brushes, and the Floral Swirl brushes. (If you don’t know how to install new brushes read this article.) Using the paintbrush tool, select your choice of any of the previously mentioned brushes, create a new layer, choose white for the foreground color, and click somewhere on your image. This will result in a bright white shape. To calm the shape down, simply change the blend mode of the layer to “overlay” or “soft light”, whichever works best. Sometimes when you do this (especially with the grunge brushes), the shape won’t be bright enough to see. If this is this case, simply make a copy of the “soft light” layer right on top of itself, and it will brighten right up. If it’s too bright, simply lower the opacity of one of the layers.

So go crazy with this step, using whatever combination of brushes you like. This is what I ended up with:

As they say in Canada . . . Not bad, eh?

10.) Now for the text. Pick the font of your choice and type in the text of your choice using the Text tool. (Use white for the text color.) Rasterize the text so you can transform it as you wish, and then play with the blend modes to get the desired results. In my image, I made a second copy of the text and reduced the opacity of this second copy to 30%. I used a blend mode of “overlay” for both of these text layers. Here’s my final result:

Here are some download links if you’d like to use this wallpaper on your desktop:

1440 x 900
1024 x 768
800 x 600

Enjoy! Let me know what you think!

July 4, 2007

New Site Design

Craig Campbell @ 4:56 pm

CraigSoup.com has undergone another mild redesign. I’ve brought it together to make it a little more visually cohesive, and I really like the results. As you can see, I haven’t redesigned the blog just yet, but that shouldn’t be long in coming.

CraigSoup.com redesign

I got the fancy, dark blue background above the header from the ‘Patterns’ section of Brusheezy.com. Thanks to Shawn Rubel for the awesome design!

The new design was created with XHTML and CSS, and the graphics were created in Photoshop.

Anyways, please leave a comment, and let me know what you think of the new web design.


Update: The design, as you can clearly see, has now been applied to the blog. Ah, the beauty of uniformity!

June 28, 2007

How I Did It - The WriterInside.com Header

Craig Campbell @ 4:30 pm

As you can tell from my portfolio, WriterInside.com has undergone several face lifts over the past couple of years. But I think I’ve finally hit the jackpot with the current header design.

WriterInside.com header image

The previous design, although it was vibrant and had a little of that Web 2.0 flare to it, didn’t exactly fit the mood of what I was trying to go for with the site. So I decided to do an overhaul, something that would ring true to the intended audience of the website, and I feel like I captured that with this header.

I created the paper background of the header by scanning a sheet of paper that I tore out of a very organic-looking journal that I had. The paper’s practically impossible to write on with a pen, but the texture is really cool. Anyways, once I scanned the paper in, I touched it up using Photoshop’s Burn tool. This gave the edges of the paper background the darkened, almost scorched look to it.

The rest was pretty easy. I just pulled in a couple of images that fit the mood I was going for, overlaid some spiral shapes to give the header a sense of depth and then masked out a partial sun shape from the upper-left corner.

All in all, I really think this new header was a success! What do you think?

June 22, 2007

My Photoshop Guitar

Craig Campbell @ 10:01 am

From time to time, I thought it would be cool to show off a particular piece of work from my portfolio and talk about how it was done.

Photoshop GuitarMy first show-off piece was actually just an experiment — a little bit of tomfoolery, if you will. A few years ago, I decided, against my better judgment, to see if I could create a photorealistic graphic of a guitar in Photoshop. I say “against my better judgment” because I knew that it wouldn’t be a quick project that I could just throw together.

Sure enough, after many hours of hardcore Photoshopping, I created the image to the right.

Once I finished, I showed it off to several of my friends, and I knew it was a success when they just shrugged it off with a half-hearted “that’s nice.” This meant that they thought it was just an unimpressive photograph of a guitar. Once I explained to them that it wasn’t a photograph, but rather a work of sheer genius and unadulterated talent, they were genuinely impressed . . . as well they should have been.

And now, here it is for your viewing pleasure. Let me know what you think.

April 26, 2007

Adobe Creative Suite 3

Craig Campbell @ 6:25 am

Yesterday, I finally downloaded and installed Adobe Creative Suite 3 Web Premium onto my computer. This includes new versions of Flash, Photoshop, Illustrator, Dreamweaver, and more! And so far, I’m thrilled with the products.

The integration between products is now flawless. It’s remarkably simple now to import Photoshop and Illustrator files into Flash, which is going to save me tons of time in the long run.

Like many others, I was a little nervous when I heard that Adobe was going to acquire Macromedia. All kinds of nasty, unsubstantiated rumors were whirling about: Adobe was going to drop Flash, kill Dreamweaver, and set up their own colony on the moon. Naturally, none of these rumors were true. In fact, at the Flash Forward convention last year, we were told that the main reason Adobe wanted to acquire Macromedia was because of Flash. We also discovered that they were keeping the team that developed Flash in the first place.

No need to mess with a good thing, right?

Anyways, I just wanted to give a big shout out to Adobe and all the hard work they’ve done in the release of Creative Suite 3. The result is a masterpiece. Keep it up, guys!

April 25, 2007

Editing Pictures Online is a Picnik

Craig Campbell @ 7:36 am

If you’ve been thinking about buying Photoshop just so you can edit a few photos, think again.

Don’t get me wrong. I LOVE Photoshop, and I don’t know what I’d do without it. In fact, my Adobe Creative Suite 3 Web Premium should be arriving in the mail any day now. But if all you’re going to use Photoshop for is image correction, then you might want to consider using an online photo editing tool like picnik. Why?

3 reasons:

  1. It’s free
  2. It does an amazing job with editing photos
  3. You can tie it to your Flickr or Picasa accounts and edit photos you’ve already uploaded!!

Here’s an example of an image on my Flickr account BEFORE I edited it with picnik:

Before edit

And here’s what it looks like AFTER:

AFTER editing with picnik

Who knew that a free online tool would be able to do such amazing things with your photographs??

Now we all do! Enjoy!

Filed under: Photoshop