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.

We are so very excited to announce our success in bringing three GHBA Houston's Best Awards to our clients! Poetic Systems' dedication to web marketing in the Real Estate industry in conjunction with Boe Creative Services has aided Friendswood Development Company and Houston Newcomer Guides in becoming some of Houston's Best. We are proud to have helped bring in: 

• Houston's Best Internet Marketing Campaign - Developer - Friendswood Development Company and Boe Creative Services
• Houston's Best Website - Developer - FriendswoodDevelopment.com
• Houston's Best Website - Associate or Supplier - HoustonNewcomerGuides.com

 We would love to thank and congratulate our clients for their patience, trust, and skill.

We would also like to congratulate a few of our friends in the Real Estate industry, including Caldwell Companies,  Partners in Building, L.P., and Bridgeland, L..P., all for being some of Houston's Best as well!

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.

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.

Designers Block

When designing you often run into times when you cannot access your creativity. This is commonly called designers block, which is an adaptation of writers block. You are looking at your screen, rubbing your eyes at the glob of pixels you have been sculpting. It just does not look right, you cannot come up with anything good. Your design sucks. Fear not! There are many things you can do to tackle this issue.

Solutions

Look at other designs. When you look at other designs it inspires you. Here is a link to an article called 16 Best Web Design Galleries for Inspiration. This article has many great examples to get those gears cranking.

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 recently got an Email about how to use HTML for blogs. It read:

"I'd thought I'd take you up on your offer about HTML. I'm new to blogging and getting super frustrated when it says my blog can't post due to HTML. I never know what the problem is. Any idea what that means? Do you have any key pointers to a new blogger about HTML?? Thanks so much! Any help is much appreciated!"

This person blogs on Blogger.com so I will use that site as an example.

Remember on your Blog that the title of your blog will become your H1 tag as well as your page title tag. So make sure the title of your blog is something very relevant and important to your topic. This is very important on searches for your blog. If you blog is about pug dogs then you might name it "Jane Doe's Cute Pug Dogs". This will help you get searched better for your name as well as the main subject of the blog "Cute Pug Dogs". You are blogging to share your ideas with others so imagine what others will be searching for to find your valuable information.