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.

One of the geeky aspects of being a graphic designer is memorizing fonts. It’s not easy, but after years of designing, all the fonts just seep into your head like osmosis. Then you’ll be criticizing every website you visit, saying, “Why did they use Copperplate as a header title?!” or “Is that the font from Star Wars?”

There are a few rules and regulations when deciding how and when to use certain fonts within your website. To start, the basics of typography. There are two types of fonts: serif and sans serif. Serif fonts have the little anvils and feet at the top and bottom of the letters. These are called serifs. Now guess what “sans serif” means. (dot dot dot) It means “without serifs” in Latin or something. Serif fonts are usually considered formal and traditional, while san serifs are more informal and evoke a younger, more relaxed feel. Refer to the pic above that maps out the general anatomy of the written word.

An excellent resource about designing with type and seeing the effects of typography is the recent 2007 film “Helvetica”. It focuses on the bombardment of fonts, namely Helvetica, that are used in marketing and advertising that we see constantly, walking in the streets, on TV, at home even. It’s like a single typographical revolution. Check out the trailer here: Youtube Helvetica Movie

Next, I’ll shoot a few general pointers to follow that every graphic designer should know.

Color deserves some serious respect. We first learn about color as a game when we are kids. It's fun to mix each one to see what kind of mess you'll get next. For designers, color is a fascination that started from that innocent beginning. Little did we know that color would rule our designer lives from then on.

The use of color can be a very delicate art. It's not all fun and messes (hopefully it's not messy). It's actually math. I know, math is gross, but not when it comes to color. If you've looked at a color wheel recently, you'll have realized that it's basically a graph of numbers hiding behind varying degrees of the primary colors mixed together along with black and white.

As you can see from the color wheel image above, there are a lot of colors out there. And colors are also related to each other. Here's an experiment you can do, either on paper or on the computer. Draw out four red squares, then draw four more squares of different colors containing each of the red squares. The colors should be solid. Looking at each square set, notice how the red-colored squares change in appearance depending on the color that surrounds them. Abra-cadabra! It's magic!

And so it's a designers job to organize all those colors into schemes, and worry about hues, shades, intensities, etc. Luckily, there are tools to help us do that. One of the better ones out there is Kuler. It's an extension of Adobe, but what's great is that in Photoshop CS4 it's included. You can also access it separately, just head over to www.adobe.com/products/kuler and be prepared to be amazed. Another nifty gadget I recommend is Color Jack. It's similar to Kuler and actually has a few extra color settings. The nifty part is that you can download it as a widget into your dashboard. Check it out at http://www.apple.com/downloads/dashboard/reference/colortheory.html. If you just want to play around with it, go to www.colorjack.com/sphere where it's already built into their website.

The relationship between a business and its web designer is not one to be overlooked. A happy, professional interaction can lead to a fruitful transaction, while a distant or uninvolved relationship will most certainly hinder the potential of your website or web application.

Obviously, we can say be nice. Still, there is so much more. If you would like to get the absolute most out of your website - and there's no reason you shouldn't - you should absolutely heed these notes.

You are the "Patient"

If an oncologist diagnosed you with cancer and prescribed you a treatment, would you question them? Maybe - but you would at least have to acknowledge his extensive background in experience with and treatment of cancer. He probably studied it extensively in school. Perhaps he happens to have a number of successful cancer survivors as patients.

The doctor-patient relationship is a great parallel and reference to the client-web designer relationship. You, of course, have the final say on what happens to your body and with your treatment, and if you have a good doctor, he will listen to what you have to say. However, how often do you take the stethoscope out of his hands?

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.

There are some really interesting new design ideas about barcodes. Those completely boring and dull barcodes are being completely redone. A Japanese company named D-barcode has come up with many interesting twists to the old barcode.

Just to help you out if you do not know any Japanese, when you go to their site just click the top left image of a guy throwing away paper wads. This leads you to a screen with wads of paper which when clicked will show you some of their work.

It is an amazingly creative idea on a very creative site, although not very intuitive navigation. Ideas like these really inspire artists and designers to take their creativity to a whole new avenue.

Adobe just came out with Illustrator CS4. The new Illustrator doesn't impress you with a plethora of new tools or flashy gimmicks. It instead improves upon usability and helping the user get more accomplished. It is all about workflow and streamlining your projects. CS4 is to graphic design what windshield wipers are for cars. It just helps make something already functional get much better.

One new feature that you will already be familiar with is work tabs. These are the same tabs that you work with in your web browser. So now instead of having a million windows open and having to sift through all your projects you will have all your projects open in a tab. Of course you can still drag out a tab and work with floating windows if you still want to.

There is also a new workspace menu on the application bar. It is basically a drop down menu with saved preset toolbar and palette configurations. So if you are working with typography you could have all your typography palettes open in a saved setting then switch to a different palette option for painting just from a quick drop down.

"Yes they finally did it, transparent gradients, thank you Adobe!" - In the gradient palette you can now just slide the opacity bar and modify a certain swatch on the gradient bar. This feature has been lacking too long from Illustrator and I know personally all too often how much this is needed.

Yesterday, Matt and I hit up the Houston Interactive Marketing Association’s Interactive Strategies Conference at the Angelika Theater downtown. The event ended up being an awesome learning experience, which means good news for our clients.

We stayed in the SEO/SEM track for the entire day and heard four top search engine-marketing gurus spill on vertical search, SEO for sites, tech tools, web design for ROI, and more. We plan on taking our new knowledge and giving it straight back to clients by making our web sites even more findable and user-friendly.

By far, our favorite session had to be the SEO Site Clinic, in which Tony Wright of Wright IMC looked at audience members’ web sites and ripped them apart from an SEM expert’s perspective. We offered up houstonnewcomerguides.com and were luckily chosen. Even better, Tony had a hard time finding something wrong with the site… at first.

He gave Matt some great pointers on internal things that will speed up load time and on ways to use title tags to target search terms we weren’t grabbing. These pointers of course were not exclusive to houstonnewcomerguides.com, and we will now be keeping them in mind on every site we build. Other than those few pointers, we got lots of praise on the design and content as well as for reaching the number 1 spot on Google, which should tell us and you that we are definitely doing something right.

W