It’s convenient

Whether or not you have a desperate need to use your computer with your fingers instead of a mouse, you’ll find it’s simple and easy to use.

For someone who wants to just grab an iPad while catching up on some TV or even just relaxing on the couch, it works. And this is exactly what Apple wants, because it gives people an opportunity to open up a new niche for computers in the home environment.

While it may not be your best bet for a portable laptop, it is good for some gentle web-browsing and media use.

It’s consistent

Look, the iPad won’t fail on you. Let’s face it – it may not be the cheapest reader on the market, but we don’t buy Apple for low-quality products.

Examining  the iPad’s workings, we find that like the hugely popular iPhone, and unlike many other tablet pc’s, it works. This is a big key to the Apple aspect of things.

There will be future generations of the iPad

Just because the very first version of something isn’t insanely popular, that doesn’t mean the project should be abandoned completely. If Apple had followed this model, there would be neither iPods, Macbooks, Macs, or iPhones today.

Apple has made its huge successes on successful analysis of how the products are reacted to and where they reach success. Just like almost all of the other Apple products, refinement will be its success.

So contrary to other articles that preach the failure of the iPad – like those that claimed the iPhone would fail, the claims that the seemingly doomed slow network of Edge, and difficult texting and mail were overcome to make the Apple iPhone a dominant force today, we’ll see that the iPad will indeed reach its success.

Even if it doesn’t appeal to you, it does to the people with the money

That’s right – I said it. And who are the people with the money? The baby-boomers. The main selling point of the iPad is the intuitive interface that it offers, which makes it a home-run to many baby-boomers already.

A large issue that many of this generation have run into is the difficulty in working with computers, drivers, hardware, and even using just the pc and Windows interface itself. The iPad takes the simplistic approach that mimics – but does not clone – the interface of the iPhone.

For someone who has rarely or even never used a computer before, if there is a chance for them to be introduced to the world of the internet with a new product that not only allows them to be free of the messes of wires that people encounter all too often, but also works with what they would expect it to. A few swipes and drags and things are where you want them.

This is why the iPad will reach success, because Apple’s plans are not always for the same demographic. Because Apple sees an open market in the world of more than just students and professionals, it has taken advantage of it and although it is receiving initial criticism by the technologically advanced now, it will no doubt take off in the near future.

As far as visual aesthetics go, fading images has always been a pleasant and smoother experience for many users. Using jQuery, it’s actually very simple and easy to get that smooth fading effect on hovers. This is useful for making images change from grayscale to color or vice versa, and an assortment of other purposes.

You can find an example of this effect on my work-in-progress site CameoFX.com.

There are essentially two methods that are quite simple. The first fades 2 different images, while the second fades the image away and shows the background from the div holding the image. I personally like first more as it is simpler to use with multiple images and works more nicely with positioning.

Fading to a div with a background (recommended)

First of all, you’ll need jQuery. You can download it from jQuery.com or download the latest minified version, 1.4, here (use right click -> save target as).

Then you will need to add these lines for your classes to your css. The tag of start and end can be substituted for whatever you would like to class your image as, such as first or before, etc.

The class fadehover is what I use to show where the images will be faded from, and sets the positioning with the background image, what will be faded to. This also works with multiple images if you have a div background that spans behind all of them.

Now, the code you’ll need to insert into the header of the pages you want to include the fade on. So unless you use a common page template for part of the site, you’ll want to add these between the <head> and </head> tags of your page.

<script type=’text/javascript’ src=’jQuery.js’></script>

This includes the jQuery source file so you can use it in your page. This snippet assumes that the jQuery.js is in the same directory as the page referencing it, so fix links accordingly.

Remember to put the following code inside of <script> and </script> tags as well.

What this script will do for you is fade out the image and just show the div background behind it.

The opacity of the image can be changed with the numbers as well – 0 being the start opacity and 1 being the end opacity. It can be manipulated to be half-shown (0.5) etc.

Once the mouse is removed, it will return to the start image. This script uses medium as a speed for fade out (going to the second image) and slow for the fade back in (returning to the pre-hover image). You can change these to slow, medium, or fast.

Getting the Fade Effect with 2 different images

Like the first method, you’ll need jQuery. You can download it from jQuery.com or download the latest minified version, 1.4, here (use right click -> save target as).

Then you will need to add these lines for your classes to your css. The tags of start and end can be substituted for whatever you would like to class your image as, such as first & last, etc.

Now, the code you’ll need to insert into the header of the pages you want to include the fade on. So unless you use a common page template for part of the site, you’ll want to add these between the <head> and </head> tags of your page.

<script type=’text/javascript’ src=’jQuery.js’></script>

This includes the jQuery source file so you can use it in your page. This snippet assumes that the jQuery.js is in the same directory as the page referencing it, so fix links accordingly.

Remember to put the following code inside of <script> and </script> tags as well.

What this script will do for you is swap the first image with the second image, notice that the first is under the class start, as it is what starts before the hover, and end is for what the image ends up as with the hover.

The opacity of the image can be changed with the numbers as well – 0 being the start opacity and 1 being the end opacity. It can be manipulated to be half-shown (0.5) etc.

Once the mouse is removed, it will replace the second image to its full opacity . This script uses medium as a speed for fade out (going to the second image) and slow for the fade back in (returning to the pre-hover image). You can change these to slow, medium, or fast.

Apologies for the late post – Have been caught up recently.

For more designs & finds, follow me on Twitter @stephenkui

30 Examples of Brilliant Logo Design

Web Design Ledger brings us a great set of 30 creative and well-executed logos that make for great inspiration.

7 Great Examples of Info Design

Good design can come in many unexpected forms, and here are some creative examples.

Graphic River – Design Symbols Set

Graphic River gives a nice set of design symbols to work with and explore.

CSS Design Out Of The Box

Are you tired of your typical columned and boxed layout? It is time to learn how to break out of the box and do something creative.

22 Seasonal Website Designs

Get into the seasonal spirit with these great designs based on our planet’s changes.

45 Tempting Package Designs

A collection of unique package design ideas.30 Typography Posters That You’ve Probably Never Seen Before

Creating a well designed typography poster is no easy task, and takes time and patience.

When a poster focuses only on typography as its main element, the designer has to carefully craft his design to make sure that the type is both legible and artistic at the same time.

For more designs & finds, follow me on Twitter @stephenkui

Download link for the PSD – Change Eye Color

We’ll be using this stock from asilwen for this tutorial.

Step 1.

Here’s the original stock. We will be changing the eye color to brown for this tutorial, but other colors will work fine as well.

Step 2.

Take a hard brush and brush around the eye. Try to stay in the iris area, and you don’t need to color over the pupil, because we don’t want all the extra coloring on the lighting anyways.

Step 3.

Now obviously this doesn’t look right, so we’ll change the settings a bit. Set the layer blending mode to “Color” and then erase with a soft brush over some of the pupil and around the outsides so everything that doesn’t look good and natural is gone. It’s better to erase too much than to color outside the lines in this case.

Step 4.

The eye color seems brown enough, but for brown eyes, it’s a bit too bright, so duplicate the layer and then hit control+u to open the layer hue/saturation options. Darken it all the way.

Step 5.

Now just change the layer blending mode to “Soft Light,” and fix anything that stands out too much. You’re done!

A perfect transition of eye colors to a different color. Here’s another example, with a blue color instead of brown.

For the blue, there was no darkening layer, and the blue layer was set on color at 50% opacity.

If you liked this tutorial or would like to download the PSD source file, subscribe to the RSS feed for the download!

For more designs & finds, follow me on Twitter @stephenkui

30 Amazing HD Wallpapers to Spice Up Your Desktop

A stunning collection of 30 large wallpapers. Want a fresh desktop? Take a look.

3D Typography Tutorial in Photoshop & Illustrator

Though not the easiest typography to read, this tutorial’s outcome is great-looking with nice steps to follow.

5 Tips on How to write a Killer Slogan (with Interactive Examples)

Some nice tips and great examples of famous slogans and how to write your own.

50+ Most Amazing Adobe After Effects Tutorials You Need to Learn

Think Illustrator and Photoshop are the only Adobe products you’d like? Think again – It may be time to learn After Effects.

38 jQuery and CSS Drop Down Multi Level Menu Solutions

A great collection of tutorials to help with those tricky drop-down menus.

Showcase of Fresh and Well-Designed Online Shops

Smashing Magazine brings us another great gallery of site inspiration with these online shops.

30+ Great Pieces of Vintage Illustration

These intriguing illustrations are kickin’ it old school.

For more designs & finds, follow me on Twitter @stephenkui

Step 1.

Grab a photo to use. We’ll start with this stock. Insects are nice to use because they have very vivid colors.

Step 2.

First, we need to add a little focus. Start out by adding a black and white filter to the image (Click the bottom right icon where there’s a circle split in halves, beneath the layers pallet and select Black & White).

Lighten the opacity to around 35% so that you still maintain nice color in the image.

Step 3.

Now we’ll pull back our colors from the original image. Use the pen paths tool to select around the target with the color and just make a selection. I feathered it 1 pixel. It doesn’t matter too much at this point as we’ll clean it up anyways.

Step 4.

With that done, add a nice brightness / contrast filter from the same place as the Black and White filter. Play around with the settings to find whatever suits your image best.

Step 5.

Now find the color that pops out the most from your image. If there’s multiple, repeat this for the different colored parts. Find a heavily saturated, and slightly lighter version of the color (for this I used pure red), and paint over the colored part of the image.

Make sure to keep the lines clean. It’s better to go too far inside the lines than outside.

Step 6.

With the coloring nicely finished, that doesn’t look quite right at the moment. So we’ll change the blending mode to “Color Dodge” and choose a lighter opacity. For this image, 50% worked nicely. Already we can see the red shell pops a lot more. But there’s more…

Step 7.

Here just add some darkening with a soft black brush and set the layer mode to soft light. You can also lighten the opacity, as it should be a very soft darkening just to keep the attention towards the image focal.

Step 8.

The image seems like it could do with a little more emphasis on the bug, so we’ll add a soft shadow for the bug. Brush with a black soft brush beside the bug, and then erase what goes over the bug itself.

Step 9.

Now we can add a gradient map to the image, so use the colors from your image. I used a nice dark green for the darker parts and a softer, light red to brighten up the image some more.

Step 10.

Naturally, that won’t fit as an end result. So we’ll take the gradient map layer and leave it on “Hard Light” at an opacity of 40%.

Step 11.

To brighten up the shell even more, duplicate your coloring layer (or layers) and bring it to the top of the layers. Now erase some more from the edges so it highlights the center where the lighting would hit and change the blending mode. This layer worked nicely on Linear Dodge at 30%.

Step 12.

Use a Color Balance layer to adjust some more of the colors. Since this image uses red as the highlighted color, naturally we emphasize some more red on the highlights and more green in the shadows.

Step 13.

For one last adjustment layer, use a levels adjustment layer to play around with the image and contrast it nicely.

The original:

As compared to:

Stock credits to rjdp1.

There you have it! The result and the original image are very different.

Like this tutorial or want some more help? Subscribe to the RSS feed for the .PSD source file download as well as future news, tutorials, and articles.

Here are 10 reasons why it may be a good idea to keep your web pages simple, if not minimal.

1. It just doesn’t work for some sites

No matter what you do to the site, there’s some sites that just would never work on a fancy layout like many new popular ones.

Corporate sites especially tend to lean towards clean, plainer sites, mainly because it’s the product or service, not the site design, they need to advertise. Keep your purpose in mind.

2. Ease of Use

I’ve said this many times before, but it just doesn’t seem to stick. Cleaner, simpler sites are easier sites to use. Just look at Google.

3. They Load. Fast.

iPhones, PalmPre’s, Smartphones, Blackberries. What do they have in common? No, not that they’re overpriced. All of them are internet-phones, and while they do an excellent job of web browsing, image-heavy sites don’t load well on them. They’re just too slow.

4. Cross-Browser Compatibility

If you’ve ever sat at 3 a.m. pulling out your hair trying to figure out why your site looks completely different in Firefox and that dog Internet Explorer, you’ll know that images can be a real hassle. Simplify with less and that’s a great deal less struggle for you.

5. You Can Do It Yourself

Yes, who needs those pesky web designers [me]. With a simple site, someone who’s far less experienced and savvy in web design can reorganize, add, change, and maintain their own web site without the need for extra help.

6. Quick Development

For those of us who need a site in a hurry, minimalistic sites can be both minimal on time-frame and yet stunning in visuals and usability.

7. Search-Engine Optimization

Simply put, the more of your site that’s made out of text, the better you’re going to come up on Google, Yahoo, and others. Image-based navigation, or even flash don’t work as well.

8. Faster Call to Action

When people are ooh-ing and ahh-ing at your site designs, they take valuable time that they could be spending engrossed in your content or purchasing your product. Before you know it, they might just forget about what they were on your site for…

9. Headings

The simpler, and more minimalistic your site is, the more your key headings will pop out. Have something really important you want to say but aren’t getting across? Try a simpler site.

10. What a Relief

Simple sites are, believe it or not, becoming harder and harder to find nowadays. After all those flashy, popping, noisy, out-of-control pages, readers like to just read a little bit or visit on an easy-to-read, relaxed site.

1. White is not always Wonderful.

Just because black text works on a white background doesn’t mean white text works on a black background. The high contrast can be an eyesore, and it’s often better to use a light gray text than a white text on a black background.

With high-power monitors, it can be much easier to read and work with light gray on a black or dark background than white.

2. Blocks of text are Bad.

While it can be a minor annoyance to read thick walls of text on a light background, it’s simply impossible on a dark layout.

The white text just becomes a big blur, and is the easiest way to scare people away from a website.

If you’re using a dark layout, make sure to break up your text into readable sections.

3. Color Carefully

When applied well, colors in text can be fantastic. Popular colors for dark layouts in text as highlights and/or hyperlinks range from pink to light blues even.

The colors can really bring out certain words or sentences, but don’t overuse them, as they’ll quickly kill any success when overdone.

When applied tastefully, the colors can easily work with both images and text.

There you have a few simple tips for dark layouts. Have more requests or suggestions? Send them on the “Contact” page.

Download link for the Metal Text PSD

The PSD source file is available if you subscribe to the RSS Feed.

Step 1.

Start with some text of any color on any background, it doesn’t have to be black.

Step 2.

Select the text layer and enter “Blending Options.” Now head over to “Bevel and Emboss” and choose that. Many people like to use a bevel, but I like an emboss, and here are the settings. Remember to adapt them to your size.

Step 3.

Now choose gradient overlay, which will cover the text’s color. This should ideally be a silvery color, so use a dark gray on both sides, and then add a lighter gray in the middle. I also find lightening the upper (dark) gray adds a nice touch to it. Here are the settings:

Step 4.

Once that’s done, I find it makes the text look more interesting if you add a 1 pixel gray stroke to the outside.

Step 5.

Now control+click the [T] in the text layer to retrieve its selection, and paint in some light, light gray near the center of the top, and darker gray or black around the bottom edges. A 300px soft brush works great for this.

Step 6.

Some people like to add a reflection to the bottom. Personally, I don’t think it looks all that great, but I’ll cover it anyways.

Create a new layer, and apply the image. Then perform an edit -> transform -> flip vertical. Next, use the rectangle tool to delete most of the excess empty color (for cleanliness) and move it beneath the bottom of the text. Lower the opacity so it looks “reflected.” (I used 20 as the opacity).

There’s your simple, easy approach to creating some metallic text. Of course, this method can be refined for those who want to make it more realistic, but this is just a basic way to get that “metallic” effect a lot of people are after.

And you’re all done! Like this tutorial or want the PSD? Subscribe to the RSS feed for the PSD download and future posts!

And the good new is, it works perfectly for starting blogs as well.

Now, there have been a lot of methods written about getting blog traffic, but most of them are really vague in terms of an actual approach to getting the traffic to start. Here’s an analogy that makes it all easier.

As a sea gull demonstrates, it’s easy to attract visitors. You just need to give them what they want.

Choose Good Bait

Naturally, sea gulls have specific likes and dislikes, so feeding them salad wouldn’t be as effective as fish or even crackers.

The same works for good readers. If you want people to come and stay on your blog, providing content that they’re naturally attracted to is the number one method to getting loyal readers.

This is where it’s important to choose your niche and what you need. Look here: Capturing Your Target Audience

Go to Them

Now, if I started spraying bread all over my front sidewalk miles away from the beach, it’d be pretty unlikely that I’d get a whole lot of sea gulls.

Your blog isn’t going to get people to find it by itself. Advertising, guest posting, commenting, and social media are all popular avenues (and well covered in other articles) to getting blog popularity.

You need to get yourself in a position where people have access routes to your blog and then make yourself known. After all that’s done, you can hook them with your content and information.

Start Small

The first visitor you get may not be the one you want, as a matter of fact, you might not get anything at all. Equally, the first subscriber or loyal visitor you get to your blog may not be the one that comments every post or advertises your blog to millions online, but they are the first.

But once that one visitor does come (and eats the bait), there are naturally others attracted to the scene. It’s a bandwagon mentality, and it applies to seagulls, and especially blogs.

Nobody wants to read a blog that’s desolate and empty, so you need to get things started somewhere.

So think starting a blog up is tough? If you follow the right steps and apply the right logic, it’s easy to get people to want to visit your blog. For more information and future posts, subscribe to the RSS feed!

But one thing that many people do not understand is that it doesn’t mean you should waste opportunities to get more readers or possible clients.

Think you’re using Twitter well for self-promotion? You may just want to reconsider that.

The “Spam – Delete” Reaction

Less than a month ago, I started a twitter account, and already, I’ve been exposed to a disproportionately large amount of awful attempts at self-marketing.

Here are the three most obvious ways to get yourself deleted and oftentimes un-followed on Twitter.

• Tweeting only your own content

Yes it can be helpful to retweet your own posts, but don’t exclusively do so. People follow you so that they can find interesting things, not just see constant updates of only your content. If they aren’t reading it, that’s not going to make them do so.

• Tweeting a link to your site

This should be common sense. This should never ever show up on anyone’s homepage, because tweeting your web site is utterly useless and works negatively. Yet again, people don’t want to see useless posts, so they’ll simply delete you.

• Direct Messages with self-promotion

Now, this is one that I was rather surprised about, because among my small collection of Twitter connections, almost one out of every 5 asked me to visit their site, and possibly add comments or subscribe.

Of course, that’s not the problem. The problem comes when they neither follow me or do anything except just self-promote.

We’ve got to admit it, we all want to improve our own self-image and feel good about ourselves, so if they had followed me, naturally I’d be more inclined to see their site, and who’s interested in me.

Instead, I just no longer follow those types of users or blogs because it’s all about them.

It’s actually relatively simple to avoid these. Think about and retweet things that would be interesting to you, not that are solely about you. If sending direct messages to promote yourself, do so tastefully so that the recipient will have a reason to visit your site, not just to delete your post and roll their eyes.

Of course, you have no idea what this random fellow is talking about, and let him continue. “Those were recalled in 2008, you know. Some nasty gear problem or whatnot. I could be wrong, so don’t take my word for it, but I’m pretty sure they talked about those on the news a while back, remember? I was down at the local bike shop earlier and they had some sales though…”

Faster than you can stop yourself, you’re already dashing to your nearest bike store to pick up a new bike for your precious little girl, because you can’t have her playing about in an unsafe environment. Little did you know that “kind bystander” really worked for that same local bike shop.

But before we start running about scaring people (as fun as it is), there are a few important points to keep in mind.

Grab Attention Immediately.

It’s a busy world, and nobody has time to listen to a speech about why they have a problem or why you can solve it.

Simplify the process by just asserting an issue (politely, we don’t want any black eyes here), and then explaining why it’s an issue.

The initial “What? I’m in danger?!” reaction is your biggest selling point when marketing this way, so aim to do that without making a scene of things.

Evidence is Key.

Remember, for anything you want to say, you need evidence. Like in the story, all successful marketers who use scare tactics will back up their claims with evidence. Whether or not it’s actually real is up to you to determine.

More often than not, all a marketer needs to do is plant the idea in your head with some information to back it up and you’re already sold.

Without any backing statements, anything said just comes off, especially with scare tactics, as a whole lot of hot air and doomsday declarations.

It’s About Them, Not Your Product.

Throughout the entire conversation exampled above and many other cases, you’ll notice that these advertisers and providers often don’t even need to ever bring up themselves or their products.

Shouting out their information and trying to sell you products would instantly alert you of the fact that they’re doing no more than trying to offer you a product, so don’t do that.

Make it your primary goal to solve your audience’s problem, and then they will naturally gravitate towards you as a provider if you are one.

By informing you of your own problem or vulnerability, marketers have already established themselves as an authoritative figure in the subject, as well as got you thinking about them and the problem together.

So it’s as easy as just casually tossing around a statement in the mix of the rest of your information to get them to get your next client.

Like this post? Then subscribe to the RSS Feed for more information and future posts!

Here are 10 tips that will make your headers dazzling but useful.

1. Your logo/name must never be covered.

It doesn’t matter how ugly it is, your name cannot be hidden. No exceptions. It’s the most important part of your business, so leave it as is.

2. Avoid use off the homepage.

If you must have flash, use it on the homepage. When visitors are trying to access content, moving flash headers can be both annoying and a drain. Looped headers eat up memory, and make computers (especially old ones) a drag.

3. Sounds must be mutable.

If you have a sound or music play along with the flash, there’s few faster ways to get rid of visitors than an annoying techno beat that won’t stop thumping when on the site.

4. It must either end or be endable.

Looping flash animations can be headaches for users who are trying to read content and at the top of the screen there’s images popping around all over the place. This is especially important for bold, attention-grabbing headers.

5. Blend with the site.

One of the most common mistakes of flash is that it has almost nothing to do with the rest of the site’s theme oftentimes. Just because it’s flash doesn’t mean it’s exempt from fitting in.

6.  Do not ever move navigation in a flash header.

If and only if you absolutely must include your navigation in flash, why would a user want to chase around navigation items?

7. Just avoid flash navigation (yes this is the second time).

Why is this in here twice? Because it’s so important, and yet overlooked so often. Navigation is best off left without flash because it can cause compatibility, loading, or confusion errors. Just make the smart decision and leave it out.

8. Templates & Flash Headers.

If for some unknown reason, you happen to be using a template flash header, don’t. Everyone has seen them at one point or another, and you lose exclusivity and trust. Besides, they often look awful anyways.

9. Small files are nice files.

Do you want to be the next site where you’re waiting an hour for the site and its flash to load? Keep it compact.

10. Use clear fonts.

Another common misconception is that using flash means you can use ridiculously illegible text. If your visitors can’t read your title or navigation, you’re definitely in trouble.

Those are 10 tips that will make the lives of both you and your visitors easier.

Like this post or want to learn more? Subscribe to the RSS feed for more information about this and other topics!

Download for the Flower Logo PSD

The PSD source file is available for RSS subscribers, so don’t forget to subscribe now!

Unless otherwise noted, each step should be a new layer, for organizational and backtracking purposes.

Step 1.

First, use the pen paths tool to draw a slightly curved line, and then bring the next point around to a point near the top. Follow it down and curve it down near the base again. It doesn’t have to be perfect, because it’s a flower stem, after all.Step 2.

Now just complete the selection with the pen tool, and right click and choose “Make Selection.” After this, fill it with a green stem color.

Step 3.

Now that the stem is all done, we can add a leaf. Use the pen tool to create a leaf, but remember that a leaf is usually bent, and it’s from the side view. Leaves always face up, so it should be rather skinny from this view.

Step 4.

Now repeat the process with the selection, and fill it with the same color as the stem.

Once that’s done, we can create a crease in the leaf. Take the pen tool, and reach far beyond the leaf. This will make it so that we can trace back along a similar arc for a nice, thin crease.

Step 5.

Now we need to make another selection and fill it, with the background color, which is white. If we are using a transparent logo, you can use the previous layer and delete or erase what’s inside the selection.

Step 6.

With the flower stem and leaf completed, we can start with the center of the actual flower. Use a bright, vibrant color, and fill in an oval shape. Since we’re aiming for a nice, hand-drawn effect here, try to make it an oval or even a misshaped oval, as it fits nicely with the flower stem.

After you’ve drawn it out, right click the layer and choose “Blending Options.” And add a stroke to the layer in the background color. It separates the colors.

If you’re using a transparent background, control+click on the new flower dot to get its selection, and choose Select -> Modify -> Expand and choose a decent amount (For this tutorial and size, I used a 3 pixel stroke. Then go back to the stem layer and delete from that selection.

Step 7.

Now use the pen tool to make some flower petal shapes. It’s as easy as just making a point in or close to the dot, then another where you want it to end, and connecting them back. Then drag your cursor around to change the shape.

Make this layer beneath the dot so that the stroke covers it, or for a transparent background, repeat the selecting, expanding, and deleting process.

Step 8.

For the rest of the petals, copy the process around the flower, and try to keep a nice perspective as if you were looking at the flower from a specific direction. Most of my upper petals are larger, and the lower petals are smaller.

There we have it; all done!

Want the PSD source or need the layers for learning? Subscribe to the RSS Feed to get the download!

As we’ve all been a client to some sort of service in our lives, we know that better customer service means we’re more likely to repeat business or support that particular provider.

Web and graphic design is no different, and here are three key tips to making sure your clients are satisfied with your service.

1. Adhere to Deadlines

One thing that nobody ever wants to deal with when they’re working with you is: LATE WORK So make sure you set up a good completion date with your clients. If they request one that is impossible to complete, then simply let them know that it’s an unrealistic schedule, and suggest that they allow a little more time, but that you will try to do your best.

9 times out of 10, a client won’t just get up and leave because you need an extra day or two to complete their job.

But if you get the opportunity to define your own due date, always allot yourself a little extra time.

This way you can revise your work and have a little breathing room in case anything pops up during your work. It’s better to be safe than sorry, after all.

2. Respect Your Clients’ Comments

This should come as common sense, but surprisingly enough, there are a fair amount of designers who don’t take criticism well (well maybe not surprisingly, but oh well).

What better way to get rid of your repeat customers then by telling them that they are wrong about what they want, and that your design is the best? As a matter of fact, a friend of mine once went to a large design firm (CE Designs), and they were insistent that his design feature clouds in the header, while he was sure he didn’t want them.

And the result? He went to a smaller design studio, run by an individual online, and he got the service (and design) he wanted.

Score 1 for the quality over quantity! After all… the customer is always right. They know what they’re after.

The big firm loses both that client and any possibility of my friend telling anybody he knows to use CE Designs.

3. Maintain Constant Communication

When you work with clients, they like to know that you’re around and working on their projects. The one thing that really makes customers happy with your service is being aware that you’re spending time on them.

An overzealous designer is much more memorable and satisfying than one that is lazy and uncommunicative. Clients recognize and appreciate the effort you put in to spend time talking to them, and it reassures them that you’re focusing your attention on what they need. The best designers maintain so much communication with their clients that the clients are verging on saying, “All right, all right, I get it! You’re doing a good job on my project!” Some try to act as if each individual client is only one of many, and that they can’t be bothered to focus on them, but it’s this special focus that really gets clients to appreciate and want to work with you. Make it a practice to update your clients every time you feel there’s a monumental change, or notify them of any concerns or clarifications, but try to condense them and ask as many as you can in one session, rather than constantly asking one little question every few hours.

Communication is a key aspect to any relationship, and as a designer, it’s even more important to take care of client relations.

Like this post? Subscribe to the RSS Feed for the next parts of the series on Web Design – The Recession Money Maker, for more tips and help!

Download link for the How to Cut Out Hair in Photoshop PSD.

The PSD Source file is included exclusively for RSS subscribers, so subscribe now!

We’ll start with this image (I have permission from the owner). As you can see, the hair is very intricate, and would be near-impossible to render with an eraser or the pen tool.

First, what we need to do is make a copy of our stock, so that we don’t have to re-download it if we make a mistake. Highlight the layer and right click, selecting duplicate layer (or press control+j).

Now, go to the menu and hit filter -> extract. This will take us to an extraction window. The key is to highlight as little besides the edges of the image as possible. So try to erase too much in or too much out. This will make the algorithm select the hair better. Then use the paintbucket tool and fill in the inside of your render.

But before you press okay, press preview, and it’ll come up with a preview of what you’ve just cut out. Here’s what you’ll see with this image, but don’t worry about the missing cheek or the slight outcrop of brown by the nose.

The next step is to quickly take a small soft brush, and erase the parts that shouldn’t be there.

Once that’s done, go back to your original stock layer, make it visible, and use the pen tool to select parts of his face that are missing. The pen tool works here because there isn’t any hair to cut out. Right click in the image and choose “Make Selection.”

Now press control+j to make a copy of that section of the layer, and drag it above your main render layer. Voila, the cheek is back! We will then repeat that with the eye layer.

And here’s what we get at the end! We can also change it up with a new background to see how nicely cut the hair is.

Want the PSD source file or need more help? Subscribe to the RSS Feed to get the download!

If you liked this tutorial, please subscribe to the RSS Feed or via email for more updates.

The original stock was from =DanHeffer-Stock on Deviant Art.

What Flash Does for Users

No doubt about it. Flash is… flashy. But while it can be helpful for making your site’s appearance pop, it can also be distracting to users.

Take note of kriesi.at, which features a flash navigation. While it has a nice design as cosmetics go, the navigation moves when you hover over it. While it may not seem annoying to you, especially as the designer, it can be a major annoyance to some visitors.

There are some sites, such as the Transformers site, which require the user to have flash, or they cannot access the site at all.

As cool as it is to see, it’s lacking in usability. Aside from the fact that it is completely unusable to people who don’t have flash, this site is distracting and hard to work with anyways.

When Flash is Useful

Although flash can be a viable replacement for HTML and CSS, it’s only useful if used in the right sites, such as:

• Portfolios
• Interactive demonstrations
• Displaying videos

Portfolios are often best displayed in flash, because they can really highlight images. Flash has become one of the most popular avenues for photographers and oftentimes graphic designers.

Flash let’s these people provide their images in a way that presents them to the audience and let’s them really get into the image gallery.

Jeremy Cowart has a great implementation of flash that highlights his images while keeping everything nicely organized and easy to use.

The simple interface keeps all the content accessible and isn’t confusing, which makes the site work excellently as a portfolio.

Interactive demonstrations can also be best suited in flash for certain niches. The sites, however, must be exclusively specialized so that flash is necessary for them to be effective.

Don’t Click It exemplifies this by providing a test for users: To see if they can use a page without having to click it. The entire interface is flash-based and will instantly alert you if you click anything anywhere on the page. Can you navigate without clicking?

Videos are also a good reason to use flash. While flash intros can be annoying or flat-out murderers of SEO, when used properly, can add a great dynamic for viewers. If the site is centered around an idea, such as The Girl Effect, a well-constructed video can be both awe-inspiring and moving.

That’s our simple introduction to some of flash’s uses. Want to learn more about flash? Subscribe to the RSS feed so you can stay updated for the upcoming parts for the rest of this flash series.

Elegance

The original source file is available to RSS Feed Subscribers. Subscribe now to get it!

We will be making this logo:

Step 1. Start the logo with an elegant font. In this case, we’ll be using the Rage Italic font, because it’s clear enough to read easily but also adds some flair.

Step 2. Now we need a tag line, or another statement, which brands your tag line and also adds another dynamic to the logo with flow. Italic text, while not cursive, keeps it legible and adds to the nice flow.

Step 3. Now that we’ve got a nice text logo already, we’ll go and add an easy vector as well. Start with the pen paths tool and make a slight curve under the first part of the text. The “g” makes a good division point in this particular logo.

Step 4. Now we need to extend the path across to the other side of the logo. Be sure to make sure the curve looks smooth and natural.

Step 5. Now click back close to the middle point (but not on), and make the curve flow with the original one. Think of the points as a ribbon, as it has to be visible enough and match the curve of the upper line.

Step 6. Now complete the line over the top of the first half, so it looks like a twisted ribbon.

Step 7. Now with the pen tool, right click and choose “Make Selection.” This will transform your path into a selection, so take a color, in this case I used #009cff, and fill in the shape.

Which becomes:

There you have it! A fantastic logo in just a few minutes. If you would like the PSD file for this tutorial, subscribe to the RSS Feed for the download.

“Basically, this is telling us that biological structures like DNA actually offer some very reproducible, repetitive kinds of patterns that we can actually leverage in semiconductor processes,”

Spike Narayan, IBM’s research manager, told Reuters about the possibility of DNA-based microchips that would be more cost-effective and usable for computers in the future.

While we might not imagine human body parts crammed in our business computers and much less, laptops, IBM seems to be spending a good deal of publicity and their research toward this project.

Before we know it… our computers could start looking a lot like this:

From what I’ve seen of IBM, they don’t kid around when they introduce projects like these. Although I don’t anticipate a  massive bound in the success and drop in computer prices even when they are released, it’s definitely a milestone as computer engineering and innovation goes.

MSNBC says,

“But the new processes are at least 10 years out. Narayan said that while the DNA origami could allow chipmakers to build frameworks that are far smaller than possible with conventional tools, the technique still needs years of experimentation and testing.”

Who knows, maybe biological studies for computer development could be what help us solve other crises and issues that we see in our society after all.

We’ve got to face it, America (and just about everyone else) is in a recession. But that doesn’t mean we have to roll over and die because of it. And if you aren’t in the American recession, it doesn’t mean you can’t maximize your profits by spending a few weekends playing with Dreamweaver.

Here we’ll see why taking advantage of your skills in web and graphic design can save you from an economic downturn, or better yet, expand your earnings anytime at all.

Why People Want Web/Graphic Design

The internet has become an avenue for worldwide marketing, so more people are constantly reserving their spaces and moving in. In a time of economic hardship, however,this number multiplies exponentially, because fewer people can afford physical storefronts. This means that anybody who wants to sell physical products is more inclined to use a web site than a storefront if possible.

Moreover, virtual items, or services, are almost always on the internet, because they cannot be advertised to a large audience or even at all without a web site that works for them.

It’s as simple as people wanting to advertise themselves or their service. Common sense implies maximizing your own profits and cutting as many extraneous costs as possible, so there’s a consistent stream of people moving online, as the costs are lower, and the amount of people they can reach increases.

With the information age and the internet booming, if you can provide someone a web site or a logo, you’re already in business.

What People Look for in Designers

As a designer, you cannot expect people to work with you simply because, you are self-proclaimed excellent and have great tastes. Especially so in a time of economic downturn, people look for value.

To be successful as a web designer, you need to make sure you work at a low enough rate to compete with other designers, but not low enough to undercut yourself.

While it’s true that there is probably always someone who will work for less than you, if you establish yourself as the low-end market, it’s difficult to change your niche from there.

Besides just rates, people look for someone who they can rely on and that won’t let them down. A designer who provides more support for a client not only keeps the door open for future jobs, but also allows for referral business.

Web and Graphic Design are huge on word of mouth, and the better you take care of your sphere of influence, the more they can help you grow your business.

Client relations and satisfaction should be your number one priority.

How You Can Start to Make Money

Above all else, in order to be successful, you need to get a start. And this means telling all your friends about your “skills.” It doesn’t matter who they are, what they do, or how you know them, let them know.

It’s surprisingly easy how many clients you can earn by just talking to people about web sites. Even friends who you might not think need them, can often use designers.

For example, while many personal business owners may have web sites, I’ve found that almost half the time, there’s something (if not all of the site or logo) that they want to change. Discuss with them, and you can work a deal out.

Don’t be afraid to provide incentives for people to help you out. Referrals can bring you more business, but give people and clients a reason to spend their time talking about you. Provide a percentage or rate for referral business, and before you know it, your name will be popping up everywhere.

This concludes part 1 of the series, but be sure to subscribe so you can hear the rest of this series. Next, we’ll be reviewing why and how the economy effects clients and designers, and how to change your plans accordingly.

Toucouleur

Also made by Julien Morel, who designed Matt Mullenweg’s site, this site, while not as developed of a blog, should definitely not be overlooked from a design standpoint.

The Oleg Blog

Unlike many of the other sites that feature plants, this site incorporates a dark layout with a few detailed example of scenery rather than hanging off them off its header. The site itself is clean and flows excellently.

kulturbanaus

One of the most innovative and unique sites you’ll find on the web, cliffs of a waterfall are used to separate the content from the sidebar in this site, with a stunning scenic view as the background.

Lineage 2 Fansite

As game fansites go, this site is hard to beat. The dragon really “pops” from the page, and the entire site keeps a consistent theme.

Narhir Design

Like the Oleg Blog, this also features floating landscapes, but this site has a much lighter, floating feel to it. The entire site itself is relaxing and calming.

Getting Crazy

The header background is on a horizontal repeat for some reason, but other than that, the great use of white space really shows off the illustration.

I Love Colors

Another scrapbook or paper-layout themed site, but this one in particular works with a nonexistent sidebar that really attracts your attention to the lighter content area.

Maciej Kwas

The teddy bear is well-highlighted with some colorful lines over a faded New York City backdrop.

Ligne 13

This site in particular features easy-to-use and understand content mixed with a nice surreal backdrop. The flying twitter and facebook icons are also both interesting and functional.

SERJ

Yes, believe it or not, this is a freelance site. However, this one in particular does a good job of highlighting a creative work, which in this case, features a surreal landscape over, oddly enough, a graphics tablet.

CUOMA Blog

While I’m not usually one for cartoony sites, this one just caught my eye, and the great use of characterization brings the page to life.

Sparklette

This Singapore food blog features a great background castle illustration and soft colors, along with an interactive choice of changing the theme to a “night” scene, with dark colors and a new image.

Design Was Here

A simplistic example of a few designs on a Web 2.0 interface. All the content is nicely organized and easy to access.

Je2k

The black and white vector illustration is catching, but not distracting, and the extra white space helps to direct your attention to the highlighted information.

Spoon Graphics

A nice vector illustration in the header complements the warm tones of the brown throughout the site.

Jean Ming

Aside from a few misplaced images in the blog, this site is well-designed with a great header illustration that just jumps from the journal.

Brown Blog Films

While not outright eye-catching at first, everything about this blog is just cleanly designed with the theme of a wooded sign, and displays the content nicely. The sidebar is a nice addition as well.

Zinaz

Another vector illustration site, this one establishes a nice flow around the content that keeps everything easy to navigate, with a good color pallet that brings some warmth to the blue page.

Batman – Der Vigilant

Most of us think that the Dark Knight was a great movie, but who knew it’d inspire such fantastic sites like this? There is also an interactive animation in the main page header.

Laura Racero

While there have been many rainbow-oriented blog headers, this one really pops from the great folds and the rest of the dark layout, making for a nice theme overall.

Overall, these sites all have different attributes, but what unites them is a great sense of design.

While it may be a bit more work, these properties are important for when you need an element positioned differently because of the way that different browsers do or don’t render certain elements in Cascading Style Sheets.

Here’s how to work around the browser rendering differences.

Firefox

As a rule, I tend to code most of my pages to Firefox and then if necessary, update for compatibility with Safari and Internet Explorer. Firefox is standard, and is also becoming more and more popular in the browser battle.

For this code snippet, the #div indicates the element id or name that you want to style.

Internet Explorer

IE, while likely the most popular browser, can be somewhat of a hassle to design web sites for, since it is not standards compliant. Internet explorer 8 tends to render web sites better than 7, but for 7, there are a few ways to change your CSS.

The first method works with a different style sheet. By detecting the browser, it links to a different CSS file, which is here ie.css (please note there are TWO dashes, not just one).

The second method is a CSS addition, and is only read from that file by Internet Explorer 7. I tend to use this method more as I like all my elements easy to find and edit together.

Adding an asterisk * before a CSS element makes the other browsers besides IE 7 ignore it.

This code changes the margin-top property to 20 px if the browser is IE 7, because the other browsers will ignore the information after the asterisk.

There are other ways to target Internet Explorer, but these are the most common, since IE 7 is the most used nowadays and somewhat troublesome at times to code for.

Safari

Like Internet Explorer 7, Safari 3 can be targeted with a browser check or with a CSS “hack.” The browser check works very similarly to that of the IE 7 method provided earlier, but uses javascript.

This CSS method also works very well, but it also works toward Opera 9, so make sure you code accordingly for the most compatibility.

There you have it! You can now code your sites to look the same or at least display properly in the three most common browsers that tend to start up issues. Feel like you have any more tips to add or any thoughts? Leave a comment and let us know!

While content counts, it can’t even be considered unless it’s shown to the right people.

For everything we do, there is a desired audience, or in some cases, (such as my shower singing sessions) a desired lack of audience.

What’s most important is establishing who we want to see what we have to offer, and we have to make sure they like it.

Grabbing people’s attention is only half the game. Here is how to complete the package and keep those loyal visitors we so desire.

Establish Your Target Audience

First and foremost, choose who you think that you are targeting. Make a chart or list and progress from broader audiences into the specific demographics you’re aiming for.

If you absolutely must target teenagers, then label them a 1. If there’s a demographic you know you want to include, such as parents, categorize them as a 2. If you aren’t sure whether you need to include younger kids but you might, categorize them as a 3. Anything below that, leave out for now.

For an amusement park, the primary concern is financial, so look at who will provide the most financial gain.

Families come in larger numbers and buy more food, drink, and souvenirs on average. So for an amusement park, our primary demographic is families.

It’s rarely as simple as a single audience, so make sure we find everyone we want to speak to.

Nintendo wouldn’t be as successful with the Wii if it advertised to the teenagers, because that’s not their whole audience.

For the Nintendo Wii’s advertising platform, we see that the web site, as well as just about everything else that deals with the Wii, involves people of all ages.

Nintendo makes sure that everyone knows that, as we can see in the ad below, every single image in the ad features the family. There are parents and kids of different ages. Not to mention the fact that the ad states “It’s the perfect way to bring all the ages together.”

Identify with Your Audience

If the audience you’ve selected is one that you can’t identify with, revise your selection to a new demographic.

To identify well, you have to be able to see yourself as an audience member.

If you would find your own site informative, intriguing, or useful, then you’re on the right track, because you have a genuine interest in your material.

Anytime you’re having trouble thinking of any topics or are getting bored of writing about your subject, it’s not a bad subject. It just means you don’t identify with it.

When you can really identify yourself with your audience, it’s much easier to figure out what they want.

That Video Game Blog fits well with the audience because they provide content and advice from a gamer’s perspective.

Otherwise, someone who tries to provide products, services, or talk about anything for an audience they can’t identify with will give the wrong subject matter.

It turns into the classic case of someone advising other people on a topic they really know nothing about, or selling a product that has nothing to do with a consumer’s needs.

Find What Your Audience Wants

If you’ve ever been in this situation, you know how much of a turn-off it is when you go to a site and the information you get is both not what you were expecting to see and not what you want. You have to put yourself out of your shoes, and think like your viewers.

In at least one of the Brink’s Home Security commercials, almost every actor shown is male and only the actors that actually are shown in the foreground or speak to the camera are male.

This is because most people naturally feel that men are more capable of protecting them.

And when we look to some more of these home security commercials, when there’s a break-in, every single ad is of a woman or a girl at home alone when a robber (usually male) attempts to break in.

While it may be somewhat sexist in nature, it’s what the audience wants to see. People want their families to feel safe.

Brainstorming is the most effective method of figuring out what people want.

Look at the idea your web site or business deals primarily with. Now take note of everything that comes to mind when you think of that idea.

Now you have topics for content that visitors will be interested in. When you come to a site like WebDesignerDepot, you’d expect something about Web Design, the Web, or at least Design.

Defining Your Niche

You need to be able to pick a unique niche, or role, that you can fill, and you need to make sure that when someone thinks of this specific niche, they think of you.

It’s important to keep in mind the scale of your niche. Go too broad and you aren’t specific to anybody, which puts you below the others, who will divide up the niche you gave yourself, which includes all of those.

If we have a site that labels itself Web Design and sites labeled HTML/CSS Design, Flash Design.

Unless the Web Design site is far superior to the two more specific sites, it’s naturally going to lose priority because people who want HTML and CSS will go to the corresponding site and people who want Flash will go to theirs. This leaves the supposed solve-all site empty.

For example, if my most important audience is kids and my most important topics revolve around board games, then I would naturally make my niche Kids’ Board Games.

The most important rule for building a niche is to find the right balance. The best way to do this is by using those numbers from earlier.

Try to make your niche broad enough to include topics that appeal clearly to all of your 1’s and 2’s, and as many 3’s as possible without being generalized.

A perfect example of a good niche is Deviant Art. When we consider the audience the site appeals to, we come up with… Artists. Big surprise, huh?

As artists, we like to show off, and we like to give criticism. So Deviant Art is based around a system where anyone can show off and give their opinions and share. Nothing more, nothing less.

Now that we have an idea of our niche, we can move on to designing and content.

Show the Audience they’re Special

When the audience knows that you’re specific to them (or at least feels that way), they naturally feel your site is more important for them.

Specific statements and pictures that the audience can say, “Hey that’s just like me!” about add value to a site to the visitors.

Even if the theme of a site doesn’t specifically apply only to a select audience, certain headlines or features can also provide the same result.

Since laptops are an important asset for college students, Dell makes sure to emphasize that they provide what the students need.

Seniors Real Estate Specialists maintains a site that is strict to their audience, seniors, and makes it clear that they are the only group.

Because they show that the senior citizens are the only ones important to them, visitors who are in the target audience know that they’re the center of the site.

Notice that the site is very clear with intent and helps the audience identify as well with the main picture.

Let People Know Where They Are

For almost any audience, it’s always important to confirm that your visitors are in the right place.

It’s best to keep your site intent obvious, but you can do this with a blunt statement or with a combination of titling and imaging.

Here we can see that the site’s intent is clearly explained and bold, as a center of attention.

This usually works well, but be careful not to focus too much on a statement or headlines, because they’re often common and can detract from your branding.

Images and site titles can also be used to make the site’s intent very clear.

Without ever having to explicitly say what they do, Board and Decks is clear to visitors because the title itself is self-explanatory.

Even more so, there’s an obvious representation of the businesses’ two components: boards and decks, in the header.

An easy-to-understand site makes sure that people who came to your site on purpose are in the right area.

Also, it can also catch people who landed on your site and happened to be in that particular subject.

Simplicity can be Key

Do yourself a favor and save the time by not overdesigning your sites.

If you have any intention of appealing to any of the baby-boomers or even people born before the 1970’s, high contrast is a key to making content easily accessible, so bold colors and solid, straight lines are a good idea.

Central, bold headlines are important because they are what users look for as anchor points.

Many aspects are better left simple if you aim to appeal to any more elderly generations (senior homes, medicine, health care, exercise plans, etc.).

If you intend to market your site only to younger generations, or especially designers and graphic artists, then by all means work with styles and fancy lines and colors, but maintain clarity.

Sofa, a product development company, makes it hard not to work and navigate their site.

With such simple design, it’s easy to use and understand the site.

Keep the Consistency

Every element in your site should be consistent with the site’s audience’s needs. There’s no need to add red paint splatters to a site that’s otherwise minimalistic. Look for styles that blend well with one another.

This page has a nice enough design overall, but is inconsistent to its content.

It’s titled “Revenue Robot,” but none of the designs have anything to do with revenue or robots, and the content is about “art, money, and gaming.” What it amounts to is a lot of mental confusion.

When expanding outside your initial niche, you have to make sure you adjust your entire site to match.

This game fan site is excellently matched with the content and designs.

It’s easy to tell that it’s a gaming site, and everything about the site keeps to the theme of the game that it’s referring to.

Navigation

Don’t make it a nightmare for people to be able to find their way around your site. No matter who you’re appealing to, a central, obvious navigation is generally safe.

In a blog, don’t stick your navigation in your footer, because readers look for your navigation in the sidebar or in the header. Stylized or image-based navigation is great, as long as it’s easy to understand.

Some audiences don’t have flash, and that means if you base your entire site navigation or header in flash, you’ve already ruled out the entire audience.

If possible, always make navigation interactive, because many people, especially children and older adults, benefit from the reaction their cursor causes.

While they are good for showing what’s selected, interactive navigation is often best as a rollover image, because complex changes and flash animations can be distracting or confusing.

Loodo uses a creative board-game themed navigation that flows perfectly with the rest of the site, but is intuitive as well. There is also adequate separation between each option so it’s easy to use.

Clearleft incorporates a simple navigation, but the designs are easily compatible, so the post-it notes work with the site’s content. Notice also that the site has a clear statement of intent.

Both sites have interactive navigation, and it helps to reinforce what the user is doing.

Match the Site to the Content

Presentation is important for all sites because users behave differently on them.

In a portfolio site, a visitor expects content to be handed to them, which is why many are just image galleries (often incorporating flash for style nowadays). Andrew Hobbs uses a unique gallery that arranges images on the selected picture.

In a news site, blog, or magazine, most people are more interested in hunting around for content they like on their own.

If you have a professional business site, don’t try to spice it up with grunge or abstract backgrounds. Professional means clean.

Put those fancy grunge and abstract images in a gaming site or anything oriented towards action and usually younger audiences.

Provide What They Need

Well-designed web sites answer people’s questions and give them what they want before they even have to ask.

Not only does this show that the site is well-versed in the subject matter, but it makes it easier for people to get what they need.

On the Broadview Home Security Web Site, it features a family, safe by their house.

As a security company, they make the families safe, which is what someone who visits Broadview’s web site wants to receive.

Moving to the Brink’s web site, there is a rather well-built male plastered right onto the front of the page.

It’s in your face, and it gives you the impression of strength when you go there. And that’s also what visitors to the Brink’s site want.

Check or Avoid Ads

Especially in blogs, advertisements can be a distraction to users, because they link away from your site and are sometimes flat-out annoying.

Any and all ads link to their sources, and if a user clicks that ad, they’re no longer on your site. Unless you’re linking to specific content, always try to avoid giving people a reason to leave your site.

Even more important, ads can often feature noises, pop-ups, or animations that make people want to leave, and immediately. Unless you specifically filter the advertisements and make sure that they are all unobtrusive, leave them out.

Google AdSense might seem like the… sensible way to go, but when place in the middle of content, can eliminate users’ trust for your links and information.

Like in Living Room, ads can be placed on sides so that they’re inconspicuous and flow with the content. This way they can be found without distracting from the real web site.

Inappropriate ads cut out large portions of audiences, because if there’s a bad ad people are forced to see every time they visit your site, they just won’t. When it doubt, leave it out.

Don’t Be Afraid to Trim Your Audience

A loyal user base is much more rewarding than one that will visit only once or a few times. The core audience keeps you in mind, and earns you referral business as well.

For blogs, loyal users spread the word through their blogs and tell their friends, as well as commenting and adding discussion to your posts.

If traffic starts to come once or twice and never again, it’s often a good idea to refine your niche to a more specific one. Once you earn back your core group, you can use that as a boost to expand back into a larger niche if you feel necessary.

The more specific your audience can be, the better it is. If you don’t need a particular topic, then eliminate it, because it alienates some of your users who feel that you’re catering to them.

What capturing your audience sums up to is making sure that everything is consistent with the rest of your themes and appeals to the specific niche that you want. Remember, creativity counts!

Feel like you know how to capture an audience perfectly or have some elements you think should be avoided? Leave a comment so we can share more!

I’m going to keep it short and simple, so there are a few aspects to good logos that make them stand out as stellar. Here’s the list, and we’ll analyze each point individually as well.

• Recognizable
• You can understand them
• Bold
• Usability

RECOGNITION

First off, recognition of a logo is the single most important part of any branding for a company. We look at examples like Nike, Apple, and Coca Cola, and it’s hard not to recognize them. The fact of the matter is, they are simply put, easy to pick out by their shape. Now you may say that these are plain, but consider the facts. Look around the internet nowadays and you’ll see a plethora of these ridiculously intricate, fancy, “2.0,” or just flat out obnoxious logos popping up everywhere. As great as a logo can look, if it’s not recognizable at a glance, it serves no purpose. Now, there are two ways to make a logo recognizable.

1. Shape
2. Text

Companies like Nike and Apple rely on the distinct shape of their logos to make themselves recognizable, and this is great. Mainly due to the fact that companies like Nike and Addidas, (and even Apple) need logos that they can stamp on merchandise without making it obtrusive, while making it recognizable at the same time. Others, such as Microsoft (and myself), use text as their branding. These also have distinct shapes that are immediately recognizable, so it boils down to whatever matches your needs better.

UNDERSTANDING

Frankly, if you can’t understand what a logo is supposed to represent, it really does you no good. This is perhaps the simplest of the factors that play into a logo’s success. Apple has, well, an apple. On a more subtle side, FedEx has an arrow between the E and the x. It’s got to make sense. You can’t have a logo that has nothing to do with what your business is advertising.

BOLDNESS

Yes, having a bold logo does matter. As I said earlier, there are quite a lot of new logos coming out that are simply put, disgustingly intricate. First of all, for anything besides the web, intricate logos can’t even exist. It’s virtually impossible to recognize a logo sign on a storefront or billboard that’s got a million different lines swooshing around and in front of text. That’s another point. NEVER EVER COVER YOUR NAME OR MAIN LOGO. What it does is make it difficult to read, which is an immediate turn-off for anyone’s memory to remember your logo. Besides the aspect of a real store, even on the web, if you have a very, very fancy logo, it’s naturally harder to recognize. Countless studies have shown that it’s much easier to recognize the shape of simpler objects.

Take for example, two geometric shapes. A circle, and a hexagon. Although both are extremely simple, the circle is most easily recognized because the mind doesn’t even have to consider the number of sides. While a hexagon could confuse people between the amount of sides. “Are there six? Seven? Five?”

Colors are another important part, as bold colors attract more attention. Don’t use similar colors that are close in logos unless absolutely necessary. The more contrast, the better. Some good ones are Red, Green, or even just Black and White.

For logos, less is more.

USABILITY

I briefly introduced the idea of using logos in storefronts and other places, and this is a relatively simple one. If you can’t put your logo on your store or your merchandise physically, it’s not going to work, ever. Again and again, less is more. Recognition and usability go hand in hand. The simpler the logo is, the better.

Hopefully you’ve gotten some useful information from this post, and remember that LESS IS MORE.

We’ll begin with this rather ordinary, drab photo in a forest.

Now that we’ve gotten our original image to manipulate, we can play around with some settings. Since we’re going to be adding and changing the light source and lighting of the image, we’ll go ahead and darken it with a brightness/contrast adjustment. Don’t overdo it, or it’ll distort the colors and saturation too much.

With those brightness/contrast settings, our image ends up looking like this:

Now that we’ve darkened up our scene a little bit, we can go ahead and start with a soft brush at an opacity around 50 and just paint in a shaft of light with a bright bright yellow that’s not too saturated (close to white) where we think it’d look nice. Notice at this point it’ll look a little bit flat, but we’ll get around to fixing that later.

Once that’s done, we’re going to go ahead and make it a little lighter by applying a motion blur in the opposite direction. I used these settings:

It lightens up a bit, so we can go ahead and use edit->transform->skew (or perspective for a simpler version) to adjust the way the beam works in a 3-dimensional setting. Because we’re working with an image that we don’t want to be flat, we need to adjust the lighting to really pop out, so play around. Generally, when skewing and using perspective, look at how the box looks, and that represents a canvas. To make the image come towards you from the top to the bottom, make the bottom wider, and vice versa:

The result should end up looking pretty nice, so we can actually save time and reuse the effect since it’s fairly large in relation to the size of our canvas. So we’ll duplicate the layer (control+j) and then do an edit->transform->flip horizontal to make it so that we have a copy of the layer, but facing the other direction. Let’s fix the orientation of the light beam with another skew or perspective (whatever you happen to like more) and place it so it comes from the central light source outside the trees. Make sure to erase the parts that shouldn’t appear in front of the trees, but make the light in front of some to add more layers of depth to the image.

Now that we can see the way this is done and the image is starting to come together, I’ll skip all the boring repetition and show the result of what I did. When you add the beams of light, keep in mind all the light sources and the ways the light will pass through. The small, sharp beams of light also help to add more dynamics to the lighting, and I applied a filter->blur->gaussian blur to most of my layers so that they weren’t too sharp when skewed. Keep it realistic!

As we can see, it’s already starting to look pretty different from the original images. The two different light sources add a slightly surreal feel because they are from completely different angles, but we’re not aiming for a realistic scene here, just a realistic look. Too strengthen the lighting, I used the same color on a 400px soft brush and erased the part that was in front of the tree in front. The other trees are ok to leave because the light can reach those areas.

Now it’s time to move on to the fog for the forest floor. No forest manipulation is complete without some low-lying mist, so we’ll start off with some white fog. You can use filter->render->clouds and erase it or just get a cloud brush, which is much easier and faster. As we’re going to need to make it fit in, skew it so that it’s in the orientation of the ground (it should look like it’s facing up), and then you’ll have a funny-looking result like this.

Once you’ve properly distorted your fog, we can add a slight blur to it with filter->blur->gaussian blur at around .5 to 1 px, and then we’ll get into smudging them. Here are the settings I used for the smudge brush, which was a 13px hard circle brush.

They don’t necessarily have to be identical to mine, but just a general idea so you can see how mine ended up looking the way it did. There are also provided smudge brushes that some people like to use, but I find it’s easier to work with the circles and just play around with the shape and other dynamics. For the process of smudging, we just want to lightly smudge the edges so that they blend in a little nicer and then work with a strength of between 30-50, otherwise it’ll be too hard and will end up looking all blocky and with circles missing from the fog. Once you’ve smudged the fog a bit, you can also lower the opacity of the layer so it’s not too strong.

After that, we’ll go ahead and fast forward past the same process again and see what I came up with.

As you can see, there is mist and fog everywhere, but since we’re making this more fantasy-esque, we need to add MORE! Since fog tends to settle in lower areas, we’ll concentrate the heavier white and gray fog in the lower areas of the image, such as the ditch towards the right there.

At this point, it seemed a little bright to me, so we’ll add another brightness/contrast. You can select it from the bottom of the layers area, and it shows up as a circle divided diagonally into black and white. Then select brightness/contrast. I used these settings:

With that done, I decided to add a little more depth with an old technique which is creating a new layer (control+shift+n), and then going to image->apply image. Then apply a filter->blur->gaussian blur around 1-2 px and set the layer blend mode to soft light. This leaves the result like this.

Once we’ve done this, we can finish up with establishing more of a focal by brushing in with some black on a large, soft brush (I used 400 px), and darken the outsides away from the light.

And for our final edit, I didn’t like the tree area near the top, so I blurred the top right a little bit (it’s hard to see if you don’t know where it is).

That’s it! We’re all done!

Please do post outcomes and any comments or questions, as I’d be glad to answer them. Thanks for reading!

If you’d like to repost this tutorial, please send me an email at stephen@kui.com and I will most likely approve!

Proper use of the Photoshop trademark

Trademarks help protect corporate and product identity, and Photoshop is one of Adobe’s most valuable trademarks. By following the below guidelines, you can help Adobe protect the Photoshop brand name.

The Photoshop trademark must never be used as a common verb or as a noun. The Photoshop trademark should always be capitalized and should never be used in possessive form, or as a slang term. It should be used as an adjective to describe the product, and should never be used in abbreviated form. The following examples illustrate these rules:

Trademarks are not verbs.

CORRECT: The image was enhanced using Adobe® Photoshop® software.
INCORRECT: The image was photoshopped.

Trademarks are not nouns.

CORRECT: The image pokes fun at the Senator.
INCORRECT: The photoshop pokes fun at the Senator.

Always capitalize and use trademarks in their correct form.

CORRECT: The image was enhanced with Adobe® Photoshop® Elements software.
INCORRECT: The image was photoshopped.
INCORRECT: The image was Photoshopped.
INCORRECT: The image was Adobe® Photoshopped.

Trademarks must never be used as slang terms.

CORRECT: Those who use Adobe® Photoshop® software to manipulate images as a hobby see their work as an art form.
INCORRECT: A photoshopper sees his hobby as an art form. INCORRECT: My hobby is photoshopping.

Trademarks must never be used in possessive form.

CORRECT: The new features in Adobe® Photoshop® software are impressive.
INCORRECT: Photoshop’s features are impressive.

Trademarks are proper adjectives and should be followed by the generic terms they describe.

CORRECT: The image was manipulated using Adobe® Photoshop® software.
INCORRECT: The image was manipulated using Photoshop.

Trademarks must never be abbreviated.

CORRECT: Take a look at the new features in Adobe® Photoshop® software.
INCORRECT: Take a look at the new features in PS.

Personally, I find these new rules a bit… absurd. Let’s take some things into consideration. When someone refers to the product Photoshop, it’s not as if we’re preventing any publicity for Adobe’s product. It’s a fantastic one indeed.

But not only would it be a legal nightmare and near-impossible to regulate at all. All I can say to Adobe is… Good Luck.

Source: http://www.adobe.com/misc/trade.html#section-4

Brush Packs

Yes, they are amateurish at times, and yes, they can be annoying, but if you find a good pack, they CAN come in handy. Especially for learners. And for brush packs, there’s simply no better place than Deviant Art. A quick search will answer all your brush needs.  http://www.deviantart.com

Tutorials

They are there to help you! What’s important about tutorials is utilizing the techniques, NOT copying them step for step. If you use a tutorial, find out how something is done specifically, don’t just turn into a zombie and mimic the outcome. Good places for techniques are

• DeviantArt (again) – http://www.deviantart.com
• Graphic Tutorials – http://www.graphictutorials.net
• PSDTuts – http://www.psdtuts.com
• Pixel2Life – http://www.pixel2life.com

Stocks

There are lots of places where you can get stocks, but if you don’t want to be shelling out for a small little learning pet project, check around here.

• Stock.xchng – www.sxc.hu
• Public Domain Photos – http://www.public-domain-photos.com/
• And yet again, DeviantArt. Some of these have special rules, so  be sure to get permission first. – http://www.deviantart.com

I would put more bundles of links, but the fact of the matter is, all you really need is a little time and creativity. The less pre-compiled and created resources and brushes you can use, the better. More originality is always good.

Enjoy!

The one thing that everyone sees in moving their businesses online?

Believe it or not (gasp), it’s the money.

But let’s take a look at what really EARNS us this money. In reality, it’s actually quite simple.

Here are your top 10 reasons:

1. CONTROL – For all of us control freaks (definitely me), when it’s online, it’s OURS. Aside from choosing a host, we can control just about EVERYTHING ourselves.
2. No pesky employees – While it may be nice to help Jeremy down the block get a summer job, it’s not always good when you find out your store has had the cash register raided and merchandise everywhere while he was on duty.
3. Lower startup costs – I mean honestly, even if you pay a designer to create your site, it’s still not going to amount anywhere near the load you’ll be shelling out for a physical storefront.
4. Lower upkeep costs – Yes, web hosting is cheap. A quick search shows us some ridiculously low rates. See: http://webhostinggeeks.com/
5. Lower Financial Commitment – As odd as this may sound, not all of us are completely 100% committed to dedicating our lives to a card shop. So with an e-commerce store, you really have less invested financially (not heart-wise).
6. Outreach – The internet is referred to as the World Wide Web for a reason. Millions more people can access your product through the internet than can through your local advertisements or word of mouth alone.
7. Labor costs – Even for those few times when we do need a helping hand around for our E-Commerce site, it’s considerably cheaper to get help, especially if it’s a one-time job.
8. A Home Business – Why would we want to spend topside of 8 hours a day working in a store with hardly any business when we could run it from home in just a few, while making even MORE money.
9. Efficiency – It takes only minutes to distribute products from online, whereas a physical store can take days.
10. The customers – They count too, you know. And on an online business, they don’t have to worry about driving all the way to your store and then finding out you’re closed already.

There you have it, your top 10 reasons of why an online business can often be far more successful and efficient than a physical one. Enjoy your profits.

If you have anything to say, I would greatly appreciate any linking and tracking to my site, as it’d really help to get things started and rolling now.

For anyone who wants to know what the blog is about, this is going to feature designs by me and others, any reviews of them that I can come up with, tutorials (it’s all about learning!), and general information.