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 an artist’s greatest fears is a white canvas. It’s the ubiquitous blank page for a writer, and the stark empty template for a web designer. The whiteness glares at you, forcing you to cover it all up with images, text, links, buttons, menus, miscellaneous boxes and whatever else. Before you know it, the canvas has become cluttered, the page now beyond usable function. What seems hard to fathom is that the nightmarish white emptiness is actually a good thing. It is the bright defender of user functionality, the shining champion of clean layout formatting. Let Dr. Negative Space rescue you.

Here’s an example of what I mean. Say you have opened an ominous blank document, containing nothing but white. Then you place your logo smack in the middle. And. . . stop! That’s it. That’s how it works. The lack of any other objects within range of that single element creates an undisputed focus on the element. Simple, huh? Negative space is any bit of space that is NOT occupied by other stuff, or positive space. Of course, this process gets a little more complex with the more elements you include. You can refer to Using White Space Effectively in Web Design for further understanding. It’s a good info source I stumbled upon that gives simple, clear explanations and examples dealing with negative space.

Accentuating and accepting white space can be hard to get used to. It dwells within minimalistic perspectives. Sorry to burst your bubble all you packrats and space saturation-ists, but this is where popular web design is thriving. The objective you must attain lies with your skills of organization. You know, like cleaning your place for company, and no leaving junk hidden under the bed. Refrain from redundancy or unnecessary repetition. Efficient functionality always trumps beauty, but it’s the smart designers who can achieve both. This requires employing only the absolutely necessary elements and content for each page, especially that of the homepage. Things like the logo/title and tagline, the main navigation system, and the basic product information and/or objectives classifying your site.

So what you can do is work from zero. Like in the example, you can start off by opening a blank document, then slowly and carefully add in the necessary elements. Maybe the logo can go in the top left corner, or it can be centered. The tagline can go anywhere around that. Try separating your content information into lists of a sort, with short blurbs about what each section is about. Drop in some photos so that your viewers can get a preview right from the beginning. Just use negative space to your advantage. The more of it you do use, the cleaner and simpler your site will look. If you don’t want clean and simple, then just ignore everything I’ve said.

So far, I’ve been blabbing about very general and hopefully commonsensical aspects of web design. This time I’m going to get a little more specific, talking about some finer details.

I mentioned before that a couple major rules to follow are to keep things consistent and to focus on busting out some quality details. This is the foundation to every good website.

The trends spreading throughout the Internet now circle around subtle 3D effects, like adding shadows and highlights. Some of the easiest things you can do to capture these effects for yourself is to add drop shadows and gradients. Keeping it simple is usually the way to go. So no cosmic eclipsing of drop shadows--keep the numbers in single digits.

For gradients, you can add both shadows and highlights in one object, but a dark gradient is guaranteed to work. Just remember to keep things soft and subtle (unless you’re building a hardcore, contrasty site that is devoid of anything soft). Creating a hazy halo effect is always good, usually in a header bar. It accents the very essence of your site, by accentuating your title or logo. Like giving off an awesome first impression.

Something that I have taken notice of as of late is all the great photos that are out on the web. A lot of these images have me wondering how much it costs to take a shot like that. Or better yet how can I afford to have that great image on my site when I clearly don't have the money to do so. Well I guess the good news to that is that I have come across a way to finding some free images online.

Both iStock and Flickr offer a service on their site where customers can download free images. On iStock all that you need to do is log-in or create an account with iStock and you will be good to go. Every week iStock releases their "Free Photo of the Week", along with vectors, video and audio. Look for their “Free Photo of the Week” located at the top-center of the home page. The image from this article is an image I downloaded from iStock free files.

Flickr's services are a little more detailed but they offer a wide number of images that you can select from as long as you follow their instructions. Do the following:

• Log-in or create an account with Flickr.
• Select the "search" button next to the blank search box.
• On the next search page select the "Advanced Search" link next to the blank search box.
• From here scroll down the page 'til the "Creative Commons" section appears and select the box that reads "Creative Commons-licensed content" and again hit the search button located at the bottom of this page.
• This will bring you to a page with a bunch of images and a search box; Select any of the images or type inside of the search box and located toward the bottom of the selected image is a section labeled "Additional Information".
• Select the link "Some rights reserved" and the next page informs users on how and for what purpose the image can be used for.

I encourage people to go and check out both of theses sites and see what each one has to offer. Let me know how theses two sites work for you.

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.

I was recently asked to help someone find a good place to learn HTML code and Photoshop slicing. They asked:

"Hey Joseph, need some advice! Thinking of doing a short course in HTML formatting and basic web design. The type where you can make illustrations on Photoshop and make blog templates…thus the need to learn html formatting. Any suggestions on what type of course I should look for...and what the name of such a course would be?"

If you want a way to watch some free videos on the process of Photoshop slicing to HTML you can always sign up for a free Lynda.com account. With a trial account you cannot download the lesson files, but if you are smart you can just follow along with the video. You also do not have access to all the videos either. If you are going to spend money (more advisable) then I would still go with Lynda.com. I believe you can get a monthly account for around $25. If one is diligent and hard working one could go through all the HTML and Photoshop slicing videos in one month.

The next and most important thing for working with HTML is validation. When you have your site online copy the web address and go to http://validator.w3.org/, then paste the address in the address box and click on "Check". This will tell you if your code is valid for modern web standards per w3c.

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.

Something easy and simple that I learned recently from a good friend was how to keep simple code clean in Joomla! Prior to learning these simple tricks, I would have been using a WYSIWYG Editor (What You See Is What You Get) in the back-end of Joomla! and this editor is great for using when first being introduced to Joomla! However the WYSIWYG Editor will not keep your code nice and clean, in-fact when you see the html code it will look like the "space" and "return" keys never existed.

Using the editor is straightforward and kind of like vanilla. You know how everyone likes vanilla but it is not very ones top choice; well the same goes for the editor. Now if you saw what plain html looked like you might say it looks... plain, but in fact seeing html code that is done right is actually quite satisfying.

Well how do you get your code looking that way? With practice of course. Start by getting yourself familiar with basic tags. Learning the basics of good code is a great way to being able to see where paragraphs end, an images placement in an article, hyper links to other sites and so forth. Here are just a couple of tags that I first picked-up:

<p>-paragraph</p> <h1>-heading</h1>
<strong>-bold</strong> <em>-italic</em>

Secondly, I would recommend following others around you who have been writing code for quite some time. If you have good people around you who have been doing this for a while make sure to ask them if you’re on the right track every now and then. The same friend that happened to show me a better way of organizing my code has also been great about blogging on proper code.