Web marketing & development company

I didn’t realize how difficult it would be to draw realistic-looking clouds in Photoshop. I didn’t want to just slap on a picture of some heavenly fluffiness and have to mess with cutting, pasting and arranging layer upon layer of duplicated images. Neither did I want to make Mickey Mouse cartoon clouds that any preschooler could scribble up. I wanted to create something from scratch and have it look simple, believable and fresh.

So I did some digging and got lucky. I found this wonderful blog on, you guessed it, making realistic clouds in Photoshop. I’ll go ahead and say thank you to Abduzeedo: Abducted by Design and their help. They’ve made it super simple. Here’s the link: Beautiful Fluffy Clouds in Photoshop – Christmas Tutorial. It was exactly what I was looking for, so if you’re looking for something like this, then hopefully I’ve shortened your search. Just in time for the holidays, too! I’ll only briefly go over the main parts and let you read the blog and follow to your hearts content.

There has been an enormously popular trend going around throughout websites, and design in general, but it’s mostly hoarded by Apple. The effect is the reflection, as if the object or image undergoing the effect is sitting upon a sheet of glass or any shiny surface. As I said, this is extremely popular so my little tutorial on how to reproduce it may seem (un)fashionably late. But honestly, I’ve only just learned it myself, so I’m going to share it with whoever wants to know.

First off, open a blank document in Photoshop, whatever size you want. Choose the image you would like to reflect and place or copy/paste it into a new layer of the document. It’s good to leave more room beneath the image than above it so that you get a good amount of reflection showing. Next, duplicate the image so that you have two of the same thing. (Three ways to duplicate: (1) drag the layer thumbnail to the new layers button at the bottom of the layers panel; (2) select the layer, select the move tool and hold down the ALT key while you drag the actual image across; (3) right click or control click on the layer thumbnail, select “Duplicate” and select the document you are in currently.)

I had an art project once to make a sculpture out a rectangular block of plaster molded from a milk carton. I had to be somewhat delicate with it to make sure it didn’t break into a million pieces, which is mostly the reason why the sculpture retained some of its blockiness. In the end, it had a good, interesting design, but you could still follow the lines around it and decipher its original form.

Now, my forte is not sculpting obviously, but the same principle can be applied to web design. You start out with a blank document and fill things in bit by bit, usually according to a grid. By the way, I recommend using the web-safe 960-pixel grid. Here’s a good article with instructions on how to build one in Photoshop: Web 2.0 Style Web Design. (If you follow this and come out with a grid only 940 pixels wide, no worries; there is a 10-pixel margin on either side.)

Okay, so now you have your basic but completely grid-ridden webpage, trapped in its milk carton block. How can you break out of it? One word: Expand. You don’t have to necessarily ignore the lines of your grid, but just allow yourself a lot of extra space to expand beyond the lines with dynamic graphics. Next, modify any elements you feel need to be accentuated. This usually pertains to the top of the webpage, since that is the essence of style that creates the foundation of the design for the rest of the site. I’ve included a few recycled examples so you have some clue as to what I’m talking about.

OYPRO is a commercial real estate business, but as you can see, its website is far from the usually boring real estate stereotype. It’s because of their creative use of the ‘earth-comet’ graphic that flows across the top of the page, diving over and under the other grid-savvy elements. Just this one interesting graphic pushed the creativity and uniqueness of the site up a notch.

I am not a tech, so don't read this looking for programming advice. This is purely for all of the amateur web designers out there, in Houston, Texas and everyone all over the world.

First off, if you are a true designer, you should be using Photoshop to begin building your site ideas for the web. You need to know what your site will look like, how it will be laid out first and foremost. A sketchbook and pencil works wonders for that. And don't be afraid to go all out.

So let's talk about textures. Adding a texture to your site, most commonly used in the background, will really make your design pop. It's the next level above using a background gradient.

A texture is able to unify your design, create interest and add contrast simultaneously. But don't over-do it. Keep in mind, a background texture is a nice effect but it's still a detail, albeit a very large one. People do not like spending time on busy, cramped websites with ultra-contrasty colors. Use your background to accent your design with texture subtleties. Something like a thin, 20% transparent pinstripe or anything that can be repeated without getting busy. Here's a low key site with a subtle stripe.

I learned how to make neat half-tone patterns in Photoshop this week. Here is a step by step guide on how to create neat halftone textures. I will assume you already know how to open Photoshop and make simple operations within Photoshop.

Step 1: Open Photoshop and make a new document about 600x600 pixels. Create a new blank layer.

Step 2: Select the Brush Tool and make one dot in the center size 100 with 50% hardness.

Here is a screencast I made on creating a single page in Photoshop and how to slice it. This is the first screencast in a series. Later in part 2 I am going to show you how to take the sliced up image and create a HTML and CSS page out of it. In part 3 I will show you how to take the HTML and CSS page and turn it into a template for Joomla! and WordPress.

Check back in the coming weeks for the rest of the screencasts in this series.