These websites aren’t just cool looking they also use cool colors to set a mood for their websites. Cooler colored websites usually gives the viewer a calm, relaxed feel. Calm colors, like blue can also give a corporate, professional feel to a website as well. Lets look at some examples of calming relaxed websites, as well as the corporate ones.

In this tutorial we are going to take some regular text and add some effects to make it look like it has been painted or printed on wood. This is a great way to give your text that natural look. This can be applied to any solid shape, text, images, logos, etc.

What we are going to need

Adobe Photoshop

Wood Texture

Step 1

Open up the wood texture from Zen Textures in Photoshop.

Go to Image>Image Size and change the width to 1200px and make sure the resolution is at 72 pixels/inch. This will give us the width that we want for our document.

Step 2

Using the Type Tool (T), create some white text that will roughly fit the width of the document (leaving some space on the edges). I am using ITC Franklin Gothic Heavy for my font, but anything bold should work.

Using the Crop Tool (C) crop the top and bottom edges so they have a small margin around the text, about the same amount as the sides or a little more.

Step 3

Click on the eye icon to the left of the text layer to make the text disappear.

Go to File>Save, and save it as a Photoshop file. We are going to be using this file later on in the tutorial.

Step 4

Make sure you have the background layer selected. We are going to duplicate the layer with Ctrl+J.

Now go to Image>Adjustments>Threshold. Make your threshold level around 70.

Step 5

Go into Select>Color Range, and make sure your fuzziness is at 200. Now with the eyedropper click on a black part of the document and hit OK. A marquee around all the black areas should come up.

Step 6

We want to get the inverse of our selection, so to do that we are going to do Ctrl+Shift+I Now we can click on the text layer and click on Add Vector Mask.

Click on the eye icon next to the text layer to bring it back (if it isn’t already), and click on the eye icon next to the black and white wood layer to make it go away.

Step 7

If we zoom in we will notice that the masked out parts are too sharp to be believable, compared to the sharpness of the wood. To fix this we are going to go into Filter>Blur>Gaussian Blur. Change the blur to about 0.4px.

Step 8

Now we want to make the edges look a little more believable. First we need to make the mask and the layer just one regular layer, so right-click on the layer and click on Rasterize Layer. Now Right-click on the mask and click on Apply Layer Mask.

Now go to Filter>Distort>Displace and change the horizontal and vertical scales both to 2, click OK. A file browser should come up. Open up the file we saved in the beginning of the tutorial.

If you zoom in you’ll notice the edges follow the lines on the wood background.

Step 9

Drop the opacity of the text down to 80% to give the white part a subtle groove that the wood has.

Step 10

Now we are going to add some lighting effects to our document to make it look a little more interesting.

First off, lets create a new layer (Ctrl+Shift+N) and move it above the text layer. Click on the Elliptical Marquee Tool (M) and change the feather to 75px. Now click and drag a circle around the text.

Step 11

We are going to get the inverse selection (Ctrl+Shift+I) of
the circle and fill it with black. Change the blend mode to Soft Light.

Step 12

Create another new layer (Ctrl+Shift+N), above the text
layer and the shadow one we just created. Create a circle around the text like
we did in step 10 and fill it with an orange color (something like #FF9B0B).

Change the blend mode to Soft Light and the opacity to 50%.

Step 13

Finally we are going to give our document an overall orange glow. Make sure your foreground is the orange that we used in the previous step and the background is black. Now go into “Create new or fill adjustment layer” (this middle icon at the bottom of the layers palette) and click on Gradient Map. The foreground and background colors should make a black to orange gradient for us. Make sure you click on reverse and click ok.

Drop the opacity down to 20% and change the blend mode to Overlay.

Final

Click for the full image

I have collected some amazing toy designs from around the web. These toy designs have gained quite a bit of popularity because of the ability to create and customize toys that can easily be purchased at places like kidrobot. They are fun to create without having to pay an arm and a leg to do it. This collection has a mixture of the toys that people buy to customize as well as some toys that are created from scratch.

Here is the second part of our showcase of amazing vehicle photos. In case you missed it you can check out the first part. There were a lot of great photos to choose from, and I tried to pick the best ones and the ones with the most creative angles and variety. Enjoy!

We are going to look at some really amazing vehicle photography. These photos capture some nice elements of the vehicles in a variety of different ways and angles. I tried not to grab a lot of the typical front corner shots, but there are a few in there along with a bunch of different, creative shots.

I went through a lot of really great vehicle photos and pulled out 40 of the best. So this will be a two-part article, the next set of 20 coming out next week. Stay tuned!

Check out part two of our Amazing Vehicle Photos!

This is a beginning point for all those print designers trying to jump aboard to the web, people starting out in the design field, and anyone else who wants to know. Below we have collected some important places to go to get your start as a web designer.

I decided I don’t want to bombard you with a huge amount of different websites that you would only get a little amount of information from each one, or websites that repeat each other. This is a simple, straight forward list of articles to help you start creating websites.

Finishing the Design

Before I start coding, I prefer to mock up the website in some program. I usually design my websites in Photoshop, but you can also use Illustrator or any other program you prefer. Here are some techniques to polish off your design, and keep you looking professional.

The Basics

Now that you have your mock up website, we have to figure out how to turn it into a working website. Here is the absolute beginning, an introduction to HTML.

HTML Tutorial

Once you get a handle on how HTML works, you can start in with an introduction to CSS.

CSS Tutorial

From PSD to HTML

Now that you have a general idea of how HTML and CSS work, you can check out this video tutorial of the process of going from your mock-up to the final CSS/HTML website.

Coverting a Design From PSD to HTML (Video)

…and here is a regular tutorial that goes from a mock-up to the CSS/HTML website

Build a Sleek Portfolio Site from Scratch

CSS Reset

CSS Reset sheets are a great way to get rid of the default settings on each web browser. Not everyone uses it, but if you do decide to use one or want to know a little more about them, here is some information about it. You can also use Eric Meyer’s Style Sheet as a starting point for your own.

Resetting Your Styles with CSS Reset

Eric Meyer: Resetting Again

Cheat Sheets

There is a lot of information, when it comes to all the coding and different elements you need to use, so if you get lost, or forget some code, this post lists a number of cheat sheets.

Top CSS Cheatsheets

Validators

So you finally finished your first CSS/HTML website, now you need to make sure your CSS and HTML are valid.

CSS Validator

HTML Validator

These websites are great places to start, to teach you to create your own websites. Feel free to leave links below to websites that have helped you with web design!

With the holiday season upon us, and Christmas just around the corner, I thought I’d gather some festive Christmas illustrations. I have gathered a mix of traditional images, vectors, as well as some unconventional Christmas imagery. Enjoy!

a>

Be sure to check out my latest tutorial featured on Psdtuts+, about how to create 3D text landscape scene for a cover.

Link to: How to Design a Print-Ready Flier with Photoshop and Illustrator

Today we are giving away a set of some old pavement textures. You are free to use these textures however you please, but you cannot sell the them or call them your own. If you do use the texture, I’d love to see what you come up with!

To get the larger version of the texture, just click on the corresponding image. Enjoy!