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

September 19, 2007

Flash Forward Boston

Craig Campbell @ 1:10 pm

Well, the Flash Forward conference is in full force, and Boston is beautiful! The weather here is absolutely perfect right now! The sun is out in full force but without the oppressive heat of late-summer Texas. In this weather, I’d be just as comfortable in a light sweater as in a short sleeve polo . . . which is fortuitous, because all I brought was short sleeve polos and t-shirts!

The sessions so far have been great! Thus far I’ve been to sessions on Flash games, the SWX data format for Flash, and website branding on social media sites (digg, twitter, MySpace, etc.)

One quick note on MySpace . . . Even though it’s ugly, bulky, and downright icky, MySpace can still be a very powerful tool for driving traffic to your website. There, I said it. Enough about MySpace!

I’m really excited about the next session I’ll be going to. It’s called “One Man Bands - Flash Animators Going it Alone.” Aaron Simpson will be the speaker, and I can’t wait to hear what he has to say.

More later!

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!

August 24, 2007

Fun With Photoshop

Craig Campbell @ 2:11 pm

I was feeling creative today, and I had a picture that I had taken of some old, torn up wallpaper, so I decided to make a little banner out of it. It’s a little dark, but I like the results. Let me know what you think.

Filed under: web design, design

August 22, 2007

Refocusing

Craig Campbell @ 3:20 pm

BinocularsAs you’ve probably noticed, I have historically posted about whatever was on my mind. Most of it has been design-related, but every now and then, I’ve thrown out a few things that really have nothing to do with the world of design or freelancing.

That’s going to change.

I plan on refocusing my blog in an effort to make it more relevant to anyone out there who may be reading it. Instead of writing whatever comes to mind (I’ll save my personal blog for that), I plan to create posts that deal with with design, freelancing, and sometimes blogging.

Hopefully this narrower focus will enhance the quality of my content and keep readers coming back.

Thanks for reading!

August 17, 2007

Beautiful Free Fonts

Craig Campbell @ 12:46 pm

Thanks to cpuluv.com, I found a beautiful set of free fonts, designed by Jos Buivenga. Click on the image below to get them for yourself.

Free Fonts

If you check out the exljbris blog as well, you’ll notice that there’s another font on its way. Enjoy!

 

Filed under: design, fonts

August 15, 2007

Blogging in Style

Craig Campbell @ 3:53 pm

If you want to learn more about the lucrative world of blogging, then let me suggest a site which also happens to be one of the most beautiful websites I’ve ever laid eyes on: BlogSolid.com.

BlogSolid screen capture

At Blogsolid, learning about blogging can be both educational and aesthetically pleasing (and nobody is paying me to say that)! Maybe I haven’t totally recovered from my nap just yet, but I can’t stop staring at this site. I would venture to say that this website, second only to my wife, is the most visually pleasing thing I’ve seen all week!

But the great thing about this website is that the beauty doesn’t stop with mere aesthetics. Blogsolid has also been very well structured. In fact, it’s almost like three blogs in one. The “solid basics” section contains a series of posts on the fundamentals of blogging, and the “solid growth” and “solid power” sections delve into some more advanced topics for making your blog all it can be.

So head on over to Blogsolid and allow yourself to be both inspired and educated all at the same time.

Filed under: web design, design, blogging

August 3, 2007

T-Shirts

Craig Campbell @ 7:42 am

I’ve created a few t-shirt designs on Bountee.com that are now available for sale. Check ‘em out and let me know what you think!

Bountee.com - Individually designed Tee-shirts

click the image to go to the site

Filed under: design, t-shirt

July 5, 2007

Reusing the Reusable

Craig Campbell @ 3:04 pm

Hemmy.net recently posted several images showing how Disney animators have reused animations over the years. The pictures were very interesting and entertaining to look at.

Disney animators reuse animations
Disney animators reuse animations

I’ve never noticed this before, but it makes perfect sense why they would do it, and I think we could all learn a little bit from it. As Mathias Meyer talked about on his blog, if in the course of your work you’ve had to do something twice, automate it.

For example, if you’ve had more than one customer ask for the same type of Flash slideshow, then there’s no reason to reinvent the wheel. Tweak the slideshow you’ve already created. Keep a directory of files that you could possibly reuse, and when the need arises, resurrect the desired piece and reuse it.

SEO Works

Craig Campbell @ 12:43 pm

Often it takes a lot of time to generate good, organic search engine results that drive traffic to your website. Search Engine Optimization can often be a tedious, lengthy process that takes months and months, especially if you have keywords that everyone else is fighting for.

Which is why it’s absolutely crucial to target very specific key words and key word phrases in your SEO pursuits. Specific, targeted search terms are much more likely to get you to the front page on a listing of Google search results. For example, if you build a website selling golf training videos, you’re not very likely to get good search engine results by going after the keyword “golf.” On the other hand, if you get more specific and try to target a search phrase like “free online golf training videos”, then you’re much more likely to someday wind up on page one of somebody’s search results. Even though there are probably millions more people searching for the keyword “golf”, those millions of searchers are going to get you NOWHERE if you’re constantly winding up on page 60 of the search results. Most people never even navigate past the first page of search results before they find something that they’re looking for.

Anyways, I’ve said all of this to say that I’ve finally reached the first page of Google for the search term “web design, keller”. Keller is a suburb of Fort Worth, Texas, where I live and work. By getting specific, I’ve been able to bring my website to page one of the search results for my targeted phrase, making it much more likely that searchers are going to find my little piece of internet real estate!

Next Page »