WDL Premium: Scrolls Vector Pack

Category: Technology, Tips and Tricks    |    14 views    |    Add a Comment  |   

Today we’re releasing another high quality vector pack for our WDL Premium Members from the talented people at Go Media.

These scrolls are very organic, and have that “old-world” style that you have been looking for. A lot of these were created by hand and leave room for you to type a message on the scroll. Wrap these around your centerpiece or illustration to finalize that design that has taken so long to complete. There are endless uses to vector scrolls and old fashioned banner shapes, so use your imagination!

Be sure to check out Go Media’s Arsenal for more awesome vectors, brushes, and more.

go media

vectors

There are 18 vectors in all. Here is a preview of some of them.

vectors

Download Scrolls Vector Pack

Premium Member

You must be a WDL Premium member to download this file.

Sign Up Login

About the Artist

Go MediaGo Media is a well known design studio with a lot of passion for what they do. This passion definitely comes through in their Arsenal, which is a collection of high quality, hand crafted design elements that they’ve made available through an online store.

  • No Related Post

 

30 Examples of Clean and Minimal Website Navigation

Category: Technology, Tips and Tricks    |    11 views    |    Add a Comment  |   

Navigation is one of the most important aspects of a web design, but this doesn’t mean it needs to be overly complicated or over designed. In fact, when it comes to navigating a website, simplicity is a good thing.

Some navigations make use of design elements like 3D bars, buttons, and tabs to appear clickable, which works great for certain web designs. However, clickability can be achieved with a focus on typography, placement, and maybe some subtle line work. For this article, we’ve rounded up 30 clean and minimal website navigations that will inspire you and prove that navigations don’t always have to look like 3D buttons to be effective.

Kilian Muster

website navigation

bressane

website navigation

Haik Avanian

website navigation

Design Instruct

website navigation

Color Cubic

website navigation

Big Cartel

website navigation

Kyle Fiedler

website navigation

Miguel Buckenmeyer & Co.

website navigation

Creative Spark

website navigation

Infintium

website navigation

Jeroen Homan

website navigation

Frank Chimero

website navigation

Mercy

website navigation

Information Highwayman

website navigation

We Are VI

website navigation

Kari Jobe

website navigation

One Login

website navigation

Momentify

website navigation

OVO

website navigation

Brian Hoff

website navigation

Shout

website navigation

North Kingdom

website navigation

MCA Denver

website navigation

Jacob Lee

website navigation

Giant Ant Media

website navigation

AdFlavor

website navigation

Waterworks

website navigation

Sugar Rush Creative

website navigation

Websiteburo

website navigation

Corking Design

website navigation

  • No Related Post

 

Color Correction Basics in Photoshop

Category: Technology, Tips and Tricks    |    12 views    |    Add a Comment  |   

Have you wanted to learn more about color correction? The focus of this tutorial is to help you delve deeper into color correcting to up the production value of your images. Learn a few simple techniques while creating.

I will be using Photoshop CS4 for this tutorial, but all of the features I will use are available in previous versions of Photoshop. Or in any decent photo-editing software.

Primary Color Correction

In this tutorial, our work will be primary color correction. “Primary color correction affects the whole image, utilizing control over intensities of red, green, blue, gamma (mid tones), shadows (blacks) and highlights (whites).”

Overview

Before we begin, you’ll want to be sure that you have at least a novice understanding of the following tools in your photo-editing program: Curves, Hue/Saturation, Photo Filter, and Black & White adjustment layer.

Quick Tip

Keep effects on adjustment or separate layers to enable quick alteration or removal at any time during the color correction process.

Monochrome and Sepia

Image Description

A monochromatic image is one whose range of colors consists of shades of a single color or hue.

Step 1: First, let’s make our image grayscale. There are various ways to do this, but we’ll look at just two:

I think the best way is to use the Black & White adjustment layer. (This can be found at the bottom of the Layers toolbox.) What is so great about this adjustment layer is the ability to control the luminance of the 6 primary and secondary colors – red, green, blue, cyan, magenta and yellow with the sliders. This is a very useful tool for fine-tuning the the tonal range of your image.

However, the Black & White adjustment layer is only in Photoshop CS3 and newer. So, if you’re using an older version, skip to the next step.

Image Description

Step 2: Apply the Hue & Saturation adjustment layer. Click the Colorize checkbox and this will automatically desaturate and tint your image. However, the Hue is wrong. So set the Hue to 35. Now it’s starting to look right.

Step 3: Lastly, perfect color brightness of your image with the sliders in the Black & White adjustment layer. Use the eyedropper tool that comes with the filter to select the part of the image you want to alter and it will hightlight which color is in range. But be careful not to drastically change the colors or you’ll be in danger of posterizing the image.

Usually changes solely in the Black & White filter are not enough to correct the image; so apply a Curves adjustment layer on top and get your image looking right. (It’s best to do these steps last – after your color adjustments – so that you’re seeing and effecting the color-corrected spectrum.)

And, for sepia, you’re done.

Rollover Image

In addition, using other monochromatic color schemes are done the same way. Instead of setting the Hue to 35, move the slider to the color of your choice. You also could up the Saturation a bit to make the colors pop. (For the image below, I set the Hue to 295 and the Saturation to 35.)

Rollover Image

Bleach Bypass

A popular image treatment is the bleach bypass. In actual film-developing, this means skipping the bleaching process. This leaves a silver tint on the photograph, as if the black-and-white and color image had been combined. So that’s exactly what we’re going to do.

Image Description

Step 1: Apply the Black & White adjustment layer once again to your image. (Or desaturate with a Hue & Saturation adjustment layer.) Then, the only alteration we need to do is in the blending mode: change it from Normal to Overlay.

Step 2: Apply a Curves adjustment layer on top. A characteristic of most bleach-bypassed images is increased contrast. So add a contrast curve to your image. But be careful. Adjustments should be minor at this stage because the image has a lot of contrast. Make sure you’re not overexposing in the highlights or underexposing in the shadows.

Rollover Image

align="left">Extra: Often, another characteristic of bleach bypass, along with increased contrast, is graininess. If you like, take this effect a step further by adding some noise: Filter > Noise > Add Noise. Make sure it’s monochromatic.

Quick Color Theory

Before we begin working on our next style, we’re going to talk quickly about color theory.

Take a look at the color wheels below. You’ll notice the three primary colors in our RGB color model: red, green and blue. Then, in between those you’ll notice the secondary colors of CMY: cyan, magenta, and yellow. Secondary colors are formed by the sum of two primary colors: cyan is green + blue, magenta is red + blue, and yellow is red + green. Simple enough.

Image Description

The secondary colors are opposite on the color wheel to the primary colors. Hence:

Red – Cyan

Green – Magenta

Blue – Yellow

Another six tertiary colors are created by mixing primary and secondary colors. But we don’t need to get into that in detail right now.

The primary and secondary colors, and their relation to each other, are important for us to know. In the Curves adjustment layer you can effect color in the red, green, and blue channels separately. So, for instance, any adjustments upward of the diagonal line in the red channel increase the red in the image. Lowering, below the diagonal line, increases the cyan. The other channels are the same: Upward in the green channel, green; lower, magenta. Upward in the blue channel, blue; lower yellow.

src="http://tutorial9.s3.amazonaws.com/wp-content/uploads/2010/03/curves.gif" alt="Image Description" width="600" height="203">

Blockbuster/Fashion Look

src="http://tutorial9.s3.amazonaws.com/wp-content/uploads/2010/03/main.jpg" alt="Image Description" width="600" height="309">

Ok, now that we got that covered, let’s begin. This style is used a lot in big summer movies, such as the Transformer films. It’s also popular in fashion photography.

First off, take a look at the picture above. In an effort to create this look, determine the color hue and tint of the shadows, midtones, and highlights. Most importantly, the shadows and highlights. You’ll notice that the shadows are very bluish and the highlights – mainly the part of the image containing the skin tones – are, well, the color of skin.

This is a complementary color scheme. Meaning the colors used, blue and orange, are opposite each other on the color wheel.

When working with humans in your compositions, you have to take the skin tone into account. You can’t have people turning green, magenta, or blue. That would look odd. Skin will always be between orange, orange-yellow (tertiary), and yellow. Therefore to complement the subject, generally use opposite colors: between cyan, blue or blue-violet (tertiary).

Now that we know this, let’s stylize our photo.

Step 1: Apply a Curves adjustment layer to your image.

Quick Tip

Nearly every colorist starts color correction with the shadows; then the highlights; and lastly the midtones.

Step 2: In the color dropdown menu, change from RGB – which affects the overall brightness and contrast of the image – to blue. We’ll work backwards up the list, starting with blue and ending with RGB.

src="http://tutorial9.s3.amazonaws.com/wp-content/uploads/2010/03/curves_blue.gif" alt="Image Description" />

What we’ll want to do is bring the lower end of the curves slider up. This will increase the blue in the shadows. Next, to compensate for our first adjustment, we’ll want to decrease the blue in the highlights – taking it towards yellow – so that the skin tones stay closer to being correct.

Step 3: You’ll notice that the image has quite a purple tint to it. This is because the green and red channels are at equal intensity. To get a more blue color you can either go to the green channel and raise the shadows, or go to the red and lower the shadows. But there’s a difference here and you would do well to note it: If you were to raise the green shadows, the image would get slightly lighter and loses contrast. If you lower the red shadows, the image gets darker and gains contrast. The first is subtracting color and the second is adding.

In most cases, you’ll want to go with the option that subtracts, not adds.

src="http://tutorial9.s3.amazonaws.com/wp-content/uploads/2010/03/curves_green.gif" alt="Image Description" />

And that’s what we’ll do. Go to the green channel, and bring it up just enough to take the purplish-tint out of the image. This is where you can decide between how much blue-violet or cyan you’d like in your blue-tinted shadows.

Step 4: At this point, you may need to go back to the blue channel and make sure the skin tone looks good. Not too blue and not too yellow. Adjust the highlights and midtones until you’re satisfied.

Step 5: Now we can go to the RGB or master channel. Finalize the luminance and contrast of your image. All I had to do with this image was lower the shadows.

I’m sitting pretty with a great look.

Step 6: Lastly, you can complement your image with one more filter. Increasing the blue in the shadows flooded the image with a bit too much color. Add a Hue & Saturation adjustment layer and drop the saturation to around -10.

The change is ever so slight. But, it’s perfection. And now you’ve got a blockbuster or fashion-style image. Smashing.

src="http://tutorial9.s3.amazonaws.com/wp-content/uploads/2010/03/bf1.jpg" name="Image10" width="600" height="311" border="0" id="Image14" />

Rollover Image

Bronze

Like in the film, 300, you can give your image quite a cool bronze look. This is similar to a sepia effect; however, the image shouldn’t be monochrome. Vibrant colors and those opposite to the bronze tonal region are still visible and actually stand out nicely, while the lights and the darks take on the bronze tint.

Let’s use a picture with more colors and a larger tonal range. It’ll be easier to see what’s happening.

Step 1: Start by applying a Photo Filter adjustment layer to your image. Change the filter color to Sepia and set the density between 90 to 100 percent. Make sure the preserve luminosity box is checked.

Step 2: Add a Hue & Saturation adjustment layer next. Desaturate the image anywhere from -10 to -50. Do what looks good to you.

Step 3: Add that trusty Curves adjustment layer. The bronze-style looks quite good with extra contrast. Make a nice contrast curve.

src="http://tutorial9.s3.amazonaws.com/wp-content/uploads/2010/03/bronze_adj.gif" alt="Image Description" width="600" height="296">

Step 4: An optional step, one which I think looks good, is to add a little diffusion. You can achieve this by duplicating your image layer (and keeping it under the effects). Next, apply a gaussian blur to the layer. Do not blur too much! If you put too much blur, your final image will look like it’s from a dream sequence – very soft.

For this picture, I’m using a 2.5 pixel blur.

Change the blending mode of the blurred image to Overlay. You’ll notice how contrasty your image gets. To keep it from getting too soft, change the fill anywhere from 25 to 50 percent. Then, compensate for the contrast accordingly with your curves layer.

That’s it for the big, bold, bronze look. This kid is vicious on his scooter. Watch out.

src="http://tutorial9.s3.amazonaws.com/wp-content/uploads/2010/03/bronze1.jpg" name="Image15" width="399" height="600" border="0" id="Image15" /> align="center">Rollover Image

Conclusion

Bear in mind that there are many ways to achieve these looks and styles. There is no correct process or proceedure. Different colorists use different tools. To each his own. Find out what works best for you.

Also, remember that each picture you add these effects to will react differently. You shouldn’t expect these settings – or one specific procedure – to work equally well on all your pictures. It will vary due to the levels or amounts of shadows, highlights, colors, and contrast, etc.

The tendency can be to go overboard with effects. Do your best to use them sparingly and appropriately. When in doubt, less is more.

Go out and take your knowledge further by emulating styles and effects you see in magazines, films, or on the web. That’s a great way to learn. Have fun.



  • No Related Post

 

Top 8 Dreaded Favors Asked of Web Designers

Category: Technology, Tips and Tricks    |    13 views    |    Add a Comment  |   

Long before you officially take the profession of graphic or web designer, your friends and family will support your ambitions by developing your talent. At first, your loved ones inspect your work and if they like what they see, you’ll get flooded with their requests for one page flyers, t-shirt designs, logos, and company websites. When you are just starting out, you welcome their requests because it gives you a chance to grow your skill set as a designer. After all, it’s almost like dealing with real clients, right?

The drama comes when you actually become a full time designer. The friends and family who drew upon your talent during your newbie years are still standing around with their hands out, and now you also must contend with two more groups of favor askers: clients and anonymous foreigners who contact you through Twitter.

Here are 8 of the most common and eye-rollingly annoying favors all designers encounter at one point or another. For ease of reference, we’ll call the offending party “Dude.”

1. “Hey, can you take a look at my site and tell me what you think?”

At first glance, this seems like a harmless five to ten minute project. Dude asks for your opinion, and you both know that you are an esteemed and dedicated design pro. You optimistically click on his website link, and you’re teleported back in 1998 with a Geocities-reminiscent design so horrifying it makes MySpace look professional. After you try hard not to lose all respect for Dude, you carefully suggest that he get rid of the Flash intro. You are then met with an uncomfortable defensiveness, where Dude refuses to accept your professional advice.

Lesson learned: Decipher whether your friend is looking for actual advice or just a pat on the back.

2. “Um, would you mind designing my site… for free?”

It’s shocking how many people feel truly entitled to a free web design. If you’ve ever had the pleasure of introducing yourself as a web designer, you may notice the wheels instantly starting to turn in your acquaintance’s mind. Everyone, even those without any product or any relevant thing to say, want, demand and need a website. These are the people, especially, who will want such a website produced for free. They may lure you with the distant hopes they use to fuel their own insanity: “Once I get some visitors, I’ll direct them to your services” (Standard practice, regardless).

Lesson learned: Limit your charity cases to those you can do in your free time and only do it for charity because the only reward you’ll reap is psychological.

3. “Can you help me design my site to look like ______?”

This request is closely related to the first two requests. Perhaps Dude has taken it upon himself to designed a website, already had a moment of epiphany and now realizes that it sucks. At least you’re on the same page. Then comes, “I’d like my site to look just like Avatar. You know, all 3D and stuff.” Once you realize that Dude is serious, another realization also sinks in. If you take on this “consulting” project, all of your time and energy will be engulfed by this vortex, and you won’t be getting paid for your trouble. What’s the solution? Direct Dude to Yahoo! Answers? No, he’ll never go for that, because this is a top secret idea.

Lesson learned: Find your inner ineptness and apply it to this situation. Feign ignorance, suggest peripheral design ideas such as blue color palettes and wait for your friend to get bored of the idea and come to his senses.

4. “I think I have a virus.”

No one likes to hear these words, and if someone’s sharing this information with you, they usually want one of two things: sympathy or help, sometimes both. When you hear these words come from a client, you must assume they are referring to a computer virus (let’s hope). This your client’s passive/ aggressive way of getting you to offer assistance. If you, wisely, remain silent, he or she will shamelessly ask you for your help. Just because you work in front of your computer all day does not mean that you qualify for tech support. You have to Google things just like everyone else.

Lesson learned: Get the courage to finally direct someone to Let Me Google That For You. However, for professional relationships, avoid the snark and actually lightly research the problem, but make no promises and waste no longer than 15 minutes.

5. “Let me help you with any of your extra work.”

This favor comes in the form of a donated favor. In other words, Dude is suggesting that he’s doing you a favor, when he’s actually just trying to get paid. One morning you open your email box, and there’s an email from some dude you’ve never heard of. He wants you to lend him some of your work. Depending on your level of job-related stress, you may be inclined to offer him some work, but what’s this? No portfolio? No website? No spell-check. Wait, is Dude even located in the same hemisphere as you?

Lesson learned: You get what you pay for.

6. “So, it’s been a minute… How much longer is it going to take?”

Just when you’ve got your Good Samaritan on and decided to help Dude during your free time, he starts becoming a diva. Never mind the impossible requests to make his website look just like *let your imagination run wild on this one,* or the countless revisions to a perfectly designed logo, or the endless hours you spent over IM trying to explain why putting an invisible list of keywords at the bottom of the webpage is unnecessary. When you least expect it, expect to receive a phone call, email, direct tweet saying, “Hey, so, um… when’s the project going to be finished?” You reply back, “Dude, I told you I was going to fit this in between my actual work from actual clients that actually pay.” To this, Dude replies, “I didn’t think it was going to take this long, maybe I should just get this professionally done.” Oh, that’s a killer. First of all, Dude has no consideration for the amount of time you’ve invested in this project. Secondly and more importantly, you are a professional. Why not offer you money so that you can prioritize his project?

Lesson learned: Clearly state from the beginning that it will take you some ridiculously long amount of time to complete the project for free and if Dude’s still on board, he’ll be happy if you finish it sooner than expected.

7. “Can I use your server until I get my own hosting?”

What’s so wrong about this request? You have extra space and you can afford the bandwidth. The problem is that Dude will never get his own hosting, and eventually he’ll forget about his site. A year later, you’ll remind him, “Hey Dude, you know you still have your stuff on my server? I’m moving to another server, so is it alright if I get rid of it? You have a back up, right?” Dude will do one of two things: he’ll respond with indignant anger, upset that you’re rushing him to get his act together or he’ll pretend to be okay with it, all the while, holding a grudge.

Lesson learned: Friends don’t let friends use their servers.

8. “Hey, I volunteered you to re-do my co-worker’s step-daughter’s wedding album.”

You can replace this with any task in which your mom volunteers your services for free. It’s always lovely to deal with someone who’s happy to accept your honest labor for free, because we all know they won’t make any unreasonable demands. The most difficult part of this ordeal is having to contend with your mother in her role as the merciless middleman who nags you for quality, timeliness and her good reputation.

Lesson learned: Grin and bear it? There’s no real way to avoid this nightmare.

What are some of the most annoying favors your friends and family have asked from you?

About the Author

JacquelineJacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.

  • No Related Post

 

10 Useful Website Analytics Tools

Category: Technology, Tips and Tricks    |    11 views    |    Add a Comment  |   

When you start a website, no matter if you have chosen a top business hosting package or a cheap website hosting package, you will find various website analysis tools in your web hosting admin panel. Website analysis tools, such as Awstats, are typically included in both business hosting and cheap website hosting packages and these tools are indeed good. However, if you want options when it comes to website analytics tools, here are some suggestions.

JAWStats

website analysis

If you like Awstats, you will certainly appreciate JAWStats as well. JAWStats runs in conjunction with Awstats and produces more graphics than Awstats.

goingup!

website analysis

Goingup! is one more tool website stats freaks will love because it offers many kinds of statistical data, which is represented in visually attractive ways. A substantial part of the functionality of goingup! is SEO-related, so if you don’t use any other SEO-tools, this tool will do this job as well.

Clicky

website analysis

Clicky also made the list of useful website analysis tools not only because it has tons of great features but also because it is one of the few website analysis tools you can use from your iPhone.

Google Analytics

website analysis

Google Analytics is rightfully considered one of the best because it is really a comprehensive tool, which gives you tons of useful data about your site.

W3Counter

website analysis

W3Counter is a free, hosted website analytics solution for answering the key questions about your website: who’s your audience, how they find your site, and what interests them.

Woopra

website analysis

Woopra is another excellent website analysis package. It has many, many features and there are webmasters, who name Woopra, not Google Analytics, the most comprehensive website analysis tool.

W3Perl

website analysis

W3Perl can use server’s logfiles and/or be used as a page tagging tool. The perl scripts analyze logfiles and produce HTML/PDF reports. It can be run from the command line or from the web interface.

Piwik

website analysis

Piwik has all the features you can expect from analysis application. Its main advantage is that its features come in the form of plugins, which means you can choose which features to get and which to skip.

TraceWatch

website analysis

TraceWatch lets you keep track of the visitors to your website in real time with detailed statistics and deep analysis using an innovative user interface for FREE and helps you make your website more effective. It can be easily installed on any website supporting PHP and MySQL. You only need to upload some files to your server.

Snoop

website analysis

Unlike almost all the other tools on the list, which are either used on the server of their developer, or have to be installed on your web host, Snoop is a desktop application. Snoop has a Windows and Mac version and after you install it, it runs in your tray and you get notified if an important event on your site occurs.

Certainly there are other great and useful website analysis tools in addition to the ones we have listed. If you try them and see that they aren’t what you are looking for, rest assured – there are many more website analytics tools for you to try! You can always start with the website analysis tools in your web hosting account but sooner or later you will feel the need to find more tools and get more data in addition to what you are getting for free with your business hosting or your cheap website hosting.

About the Author

Vanessa Davis writes for WHS, which lists reviews of leading hosting companies. She is deeply involved in writing web development and webhosting articles covering almost all topics from best cheap best hosting to business hosting.

  • No Related Post