Step 1: Getting Started

Setting Up The Layers

So lets get on with the tutorial. First thing to do is open up PS, (yes that’s short for Photoshop), and make a new image, sized at: 590×200. Then create a new group named Dark Button. This is obviously where the dark button is going to be placed. A new layer is now needed called BG. You can now delete the original Background layer that photoshop adds to every new file. Then fill in the BG layer, (which should be inside of the Dark Button group), with #1b1b1b.

Another new layer is now needed. First create the layer ‘Button’; this is where the actual button will be designed…But wait!…How will we position it? Well that’s where the helpful guides come in. Grab a guide from the top and place it 50px from the top. Another one 50px from the left then just continue with the right and bottom.

Step 2: The Button Design

So for the button we need to grab the Rounded Rectangle tool, (right click the Rectangle Tool. Keyboard shortcut is U). Make a selection inside of the guides like so:

The Layer Styles

Now the fun part happens. Making it look good. So for this we’ll use layer styles. The colours are: #474747 to #262626. Below I’ve included an image that demonstrates how to apply each layer style.

Step 3: The Text

It’s time to give our button some text. I’ve decided to go for a nice light colour with some drop shadow and a nice gradient. The first thing to do is to make a new text layer by either choosing it in the Text Tool or by hitting the shortcut key T. Now make a selection inside of the guides, it should be roughly 65px-70px in height. Here are the font options I chose:

• Typeface: Myriad Pro
• Font-Weight: Bold
• Size: 50px
• Anti-Aliasing: Crisp
• Align: Center
• Colour: #f1f1f1 (Colour doesn’t really matter since we’ll be using a Gradient Overlay)

Next thing to do to our text is to add the gradient and outer-glow. Just double click the layer and the layer styles box will appear. The colours used for the gradient are: #c6c6c6 to #ffffff. Here are the options I chose:

Step 4: The HTML & CSS3 Awesomeness

Let’s get this show on the road, shall we? So the first thing to do is set up our files, we need an index.html and that’s pretty much it. Next it’s the code.

The HTML

Let me explain. The HTML is all pretty basic, to be perfectly honest I wanted the HTML to take a back seat in this tutorial so all I’ve done is the following few lines:

<div id="container">
     <div class="button">
          <a href="#">CSS3 Button Baby!</a>
     </div><!--end .button-->
</div><!--end #container-->

The container is just used to center our fancy CSS3 button on the page; Then we have the actual button. If you’re going to use a selection of buttons, (like we have in our new design), then I would suggest using an Unordered List but for this a simple div will do. Inside of the Div we have an Anchor link to hold our text, this will also be the actual element to be selected in the CSS.

The CSS…With Added CSS3

This is where the tutorial actually gets interesting. Below I’ve included all the code used for the button. It may seem like quite a chunk to get through but if you keep reading then It’ll be planted firmly in your brain in no time at all!

Non-Commented Version

.button a {
    font-size:50px;
    font-weight:bold;
    color:#f1f1f1;
    text-decoration:none;
    padding:20px;
    display:inline-block;
    text-shadow:0px 0px 5px #000000;
    -moz-box-shadow:0px 0px 15px #000000;
    -webkit-box-shadow:0px 0px 15px #000000;
    border:1px solid #525252;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    background:#262626;
    background:-moz-linear-gradient(#474747 60%, #262626);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#474747), to(#262626))
}

.button a:hover {
     border:1px solid #5e5e5e;
     background:-moz-linear-gradient(#525252 60%, #303030);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#303030));
 }
 .button a:active {
     background:-moz-linear-gradient(#262626, #474747 60%);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#474747));
 }

Commented Version

.button a {
    /*Font Values*/
    font-size:50px;
    font-weight:bold;
    color:#f1f1f1;
    text-decoration:none; 

    /*Fundamental Properties*/
    padding:20px;
    display:inline-block; 

    /*Shadow*/
    text-shadow:0px 0px 5px #000000;
    -moz-box-shadow:0px 0px 15px #000000;
    -webkit-box-shadow:0px 0px 15px #000000; 

    /*Border And Background Properties*/
    border:1px solid #525252;
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
    background:#262626;
    background:-moz-linear-gradient(#474747 60%, #262626);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#474747), to(#262626));
}

.button a:hover {
     border:1px solid #5e5e5e;
     background:-moz-linear-gradient(#525252 60%, #303030);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#303030));
 }

 .button a:active {
     background:-moz-linear-gradient(#262626, #474747 60%);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#474747));
 }

Explaining The Code

Since this is an advanced tutorial aimed at people with some experience handling CSS then I won’t go through explaining the #body and #container styling.

To start off with we have set a font-size for our button, this is very important because it will make our button more liquid than fixed, especially helpful if you want it to be flexible. Following the other basic font values, I’ve given it some padding to help give the text some breathing room.

We’ve also added a display:inline; property to the button. This now allows it to to be manipulated, as you would with a Div.

The Shadowy Effects

Now comes the CSS3! The first thing I’ve done is add some shadow, to the actual text and the outside of the button. We have to use the special code for Mozilla Firefox, (-moz-) and Google Chrome/Safari, (by using the WebKit property, -webkit-). If you’re wondering what the values of 0px 0px 15px #000000 mean then let me explain:

• 1.) 0px = The placement of shadow of the X Axis. That means left and right. It can also accept negative, aswell as positive values, (-3px, 3px).
• 2.) 0px = The placement of the shadow on the Y Axis. That means up and down. It can also accept negative, aswell as positive values, (-3px, 3px).
• 3.) 5px/15px = This is referring to the amount of blur on the shadow.
• 4.)As you may have guessed, the #000000 is the colour of the shadow. If you didn’t know that, then please stop reading this tutorial and go and learn what #HEX values are.

The Border Radius

You may notice that the border properties are targeted the same here as with the shadow effects, by using -moz- and -webkit-. Even though I’ve only given one parameter here, (20px, which means round the corners by 20px on each side), you can also have a custom radius on each corner. Try pasting 20px 10px 5px 30px in the place of the single 20px value. You’ll notice that each corner now has a different radius. The first 20px value is for the top left, the second the top right, the third the bottom right and the fourth the bottom left. Just like using the margin property.

The Awesome CSS3 Gradients!

We finally get to the part you’ve been waiting for, the gradients! First we have the Firefox specific gradient. Here’s a run down of everything included for FF.

• 1.) -moz-linear-gradient – This can be used to specify whether our gradient is going to be either Linear or Radial. In this case I’ve used linear.
  • 1.) We start with the lighter colour at the top of the gradient. We make it so it covers a little more of the button, (60%), than the darker colour used.
• 2.) -webkit-gradient – This one can look a little tricky at first, but no worries, in just a few seconds it”ll be embedded into your brain. Also this property does not disclose the type of gradient in the value name.
  • 1.) Firstly we declare that it will be a linear gradient.
  • 2.) We then declare where it will be placed. In this example we have 0 0 (from the left and from the top – top left).
  • 3.) Next is giving the size of the gradient. Here we have 0 100% which means start at the very top, (0), and go to the very bottom, (100% of the element).
  • 4.) After that I think the rest is pretty self-explanitory. Just which colours we’re using.

Final Thoughts

In conclusion I would like to say a big thank you to those people who have stuck around through-out this tutorial. If you have any thoughts, be sure to share them below.

Please Note: This tutorial is almost a carry on from an earlier tutorial I did titled Enhance Your Designs With Simple Techniques.

I’ve found that the best way to learn is to actually get your hands dirty and dig straight in. So here we have our first example, a simple search box with a search icon. The first version to the is a pretty bare-bones example of a basic search box. It’s functionality is obvious to the user.

As you can see in the second version to the right, I’ve given this nice, simple search box more depth and visual appeal by adding the following:

• Very light inner-shadow along the left and top sides of the input field.
• Given the button/icon a nice gradient.
• Added some text. Typography can affect design in more ways than you may realize.

The Navigation

Ahhh the nav, it’s an element that can really make or break a design. There’s definitely a set of certain challenges when giving any project navigation because almost every site has there’s designed differently. Below I’ve again designed a basic element and then transformed it into something more appealing.

OK then, so in the above example there haven’t really been that many changes made; however what I’ve done is try and illustrate the difference between a good piece of design and an out-dated piece of design. The first example is nice enough, it’s not terribly ugly, as I’m sure you know some navs can be and it does what it is suppose to do. The problem is that the design is out-dated by a few years, an obvious point here is the underline and the non-current links.

The second example gives a more up-to-date affect because of two reasons. The first is the way the links are setup, it’s obvious which is the current page link. The second is the single highlight going around the inside of the darker border.

I know from experience that this could have been designed a million different ways but for the sake of this tutorial I wanted to keep it simple with as little changing of the basic design as possible.

The Footer

Now we’re onto the last part of this tutorial, the footer. For this section I’ve designed a nice simple footer, a thick border at the top to give it some detail and just three nicely aligned columns.

Click Image For A Larger Version

In the second version I’ve given some real depth to the footer so that it really catches your eye. The first thing that’s changed is the thick border at the top, as you can see I’ve been able to add detail by first making it look indented. This is a really simple effect that can give your design something fresh. Just make it darker than the actual footer. Then add a border to it that’s a little bit lighter than the lightest background colour. Then to give it even more detail I gave it a very fine gradient. Here are all the details:

• The top border has been refined.
• The hover effect of the links has also been given the same refinement.
• An underlining separator has been placed underneath the headers.

I used the font ‘Blue Highway’ not only for the headers but also for the links. I decided on this since we now have the use of services such as Cufon and developers have also started to use Font-Face a lot more now.

If you want to then you can download the Blue Highway font here. So if you’ve got any good short techniques that you’d like to share in the comments below don’t be afraid to tell us.

Hot Flash Files

First we have a marketplace from the ever growing Envato Network. Formerly known as Eden. This is actually one of the first marketplaces online and it’s still going strong. Some of you might know it as, FlashDen and some of you might only know it by it’s new name, ActiveDen. Either way, you’re still looking at a site that’s going as strong now as it was a couple of years ago. If not even stronger. But what makes this site so popular? Well, today we’re gonna have a closer look at it and try to uncover the secrets to Envato’s success that never seems to stop.

To measure what’s going strong today isn’t that hard. Envato has been kind enough to show everyone a link to the most popular files this week. And I just love it, makes my work a whole lot easier and it saves me alot of time.

The images comes from the “most popular files” tab on ActiveDen So lets see what files and actions are the most popular ones this week shall we?

First we have – XML Flip Book / AS3 (The name says it all)

We even have – Black & White Deeplinking Template. (Yet again, the name says it all)

WordPress And Blogging

Belive it or not, one of the most popular platform to work from today is actually WordPress. And I just have to say, Wow. I remember a number of years back when WordPress first came, and I was impressed on what cool features it had. But to be honest, who ever expected WordPress to become the number one platform to use for all kinds of sites? I guess no one did, but it’s still not a surprise either. Because what platform are as easy to customize to whatever you need as WordPress is today?

Unless you build your own CMS (content management system) I guess no platform will ever be as easy to use as WordPress. Which can only bring us to one conclusion, WordPress is the CMS everyone uses. Everyone from big companies to a beginner in blogging. Just take a look at Envato. They use WordPress for all their blogs, except the marketplaces blogs.

But why you might ask? Well, just because it’s so easy to work with, almost everyone uses it today. And it’s so easy to customize for what you need and what you already have. So this brings us to ActiveDen´s big brother, ThemeForest, and it’s authors.

Just take a look at the sales difference for WordPress themes against Flash files this week and you’ll see what I mean.

Answers From The Expert Himself

And if that’s not enough for you, just take a look at the most popular author on ThemeForest, Kriesi. He’s been making a little over $25K a month selling only WordPress themes on ThemeForest. What’s his secret? Well, to get an answer on that question you just have to ask him. And this is exactly what I did.

And here’s his answer:

And as friendly as a top author can be, Kriesi even gives you new authors/designers out there a little help to why you should never be discouraged from doing what you love.

Conclusion

Thank you Kriesi for answering these questions for us. We know you are really busy with everything so this is strongly appreciated by us here at, BeCreative Magazine and our awesome readers.

This has to conclude the first part of this 3 part series on what’s hot and what’s not. So stay tuned for next part by subscribing to our feed today.

See you all in part II

Personally I love to use sketches, the reason is that I’m a perfectionist and by perfectionist I mean an OCD style perfectionist. Which means that I can waste alot of time creating a wireframe only too trash the whole thing because I can’t get something to look right. As you can imagine, that would waste alot of time for me and a current client or personal project.

A common misconception I’ve found with sketching a design is that it’s a time waster, actually the method is far from it, if you do it right. So lets start of with a simple web 2.0 design sketch.

We’ll start by laying out the ‘Guides’. Here I’ve just given my page a basic border to get me started. If you’re going to go all out on ‘Guides’ then make the outside border heavier than the inner ones.

Note: Before any says it, yes I know I had the paper upside down

Click for a larger size image.

Now that we’ve got our basic outline drawn out we can start adding the content. I always start from top to bottom, (as I’m sure almost everyone would), lets add the logo and tagline.

Click for a larger size image.

The Navigation & Featured Area

I’ve tried to make the design a little different while still keeping it with that Web 2.0 feel, so I’ve joined the Navigation and Featured area together to give a rather stylish effect to it. The point here is that as you add elements you start to get an image in your head of the colours and just how it would look on the web.

You’ll notice that there are three key features here. The first is the rounded corners effect on the top of the Nav and the bottom of the Featured Area. If you’re not clued up on your rounded corners info then let me explain.

The main reason why rounded corners work so well is because they separate themselves from content, for example, straight corners can connect to another element with out leaving any white space; However rounded corners do, so they give a separated effect. As you may have noticed that then gives an even more connected effect to the Nav and Featured Area.

Click for a larger size image.

As I mentioned with the Connect and Disconnected effect, this has the same meaning for the search box aswell by keeping one edge straight yet the other rounded.

Also there are a few features in the Featured Area but there not as important to the design as the previous things I’ve mentioned so lets just move on

The Body Styles & Footer

OK I know I’m probably the only person one earth who calls the rest of the design The Body Styles but ol’ well. The body styles are something which no one ever seems to change, especially in web 2.0 and I’m not going to break that tradition.

Click for a larger size image.

All I’ve really done for the body copy is fill the space but leave enough to the imagination to later on consider adding icons and such. I’ve also added a small image under the text to give it some life; Because nobody likes to just read and read and read…Unless it’s a book but that’s different

Conclusion

If you’re still here then thanks for sticking around to look at my crappy drawing skills. I know I couldn’t draw anything to save my life but creating wireframes this way is just easier for me incase I need to quickly change something. I strongly urge you to give it a go on your next design project.

I’ve tried to show not just the most used or over-used methods but the tricks that I as a designer find can really bring a site to life.

1. The Letterpress Effect

This is honestly a very simple trick, especially depending on how authentic you want to make it. There are a few ways to achieve the far over-used letterpress effect in your designs in photoshop.

Multiple Text Layers

This method needs you to make your text darker than you background, then duplicate the text layer, move the duplicated layer behind the original, make the text, (in the duplicate), pure white #FFFFFF then select the Move Tool and using the arrow keys on your keyboard move the duplicate down one pixel and left one pixel. Now just set the duplicate to Overlay and adjust the Opacity accordingly.

The Stroke Method

Quite allot of work right? Well there is a second option which doesn’t look as good but works just aswell. So just create your text layer like before but his time right-click on the layer and go to blending options, now go down to stroke, make it 1px, Outside, Overlay, #FFFFFF and again just tone down the opacity as you need it.

The Result:

As you can see, option one is better but requires more work. It’s really up to you but I would recommend the first technique.

2. Inner Glow and Gradients On Buttons

Giving your call-to-action a little more presence is always a good thing when trying to attract not just people but potential customers. So the first thing when creating eye catching buttons is a nice gradient. As you can see by the two images below, there isn’t allot of difference and that’s for two reasons: 1. I didn’t want to spend 3 hours making the perfect button, which brings me to 2. I wanted to show how a few simple touches can give it more life and enhance its appeal to the eye.

In this image we just have a white background with a border-radius like shape, colored with a dark grey, boring

Now in this image we have a white background with a border-radius like button. I added a gradient of roughly #333333 -> #525252, I also gave the text some very subtle Outer Glow then added these blending options:

3. Three Button States

While this could be added onto to the last technique, I thought that it warranted its own section and breif overview. All buttons on the web should have at least two states: 1.The normal/default state of the button. 2.The active state, (when the button is clicked). You can also add a hover which then just adds to the awesomeness.

Just as I mentioned above, three hover states: Default, Hover and Active. Now something you may notice is that the buttons all look very similar, that’s because you can’t really see the effect until the button is put to use.

Nice Buttons, Bad States

I was on the newly designed COLOURlovers earlier in the year, admiring their awesome new site in all its glory when I noticed something, something which made me as a web designer feel very sad indeed. None of the huge, lovely buttons have anything other than a default state. This made me sad because the buttons are so large a pressable, (real word? probably not), that when I discovered there wasn’t even any hover I thought it was a bug with the new CSS stylesheets. However the new design has been up for a while now and still no new states.

Now I understand their possible reasoning for not having any states. One could be that because there are so many buttons on the site it may get a bit annoying having so many buttons with active graphics happening on every page you go to. In contrast to that I still believe in all three states on buttons no matter what. Leave me a comment below and give me your opinion on what you think about Default, Hover and Active states.

4. Search Fields and Submit Buttons

Ahhh the search field, a beast that has troubled man since WordPress became popular…and of course before that aswell just not as much, since it wasn’t as easy as it is now with blogging platforms and such. Anyway lets now have a look at search forms, sometimes they can seem like more trouble than they’re worth, but trust me, they’re worth it.

So let’s take a look at a few examples of good vs. bad search field design.

Well Designed Search Inputs and Buttons

As you can see on the whole Tuts+ Network the search box has been designed to perfection but not only the search box, when you see this section of the PSDTuts+ site you’ll notice that you also look at the whole area around it as well, and that’s exactly what 90% of search areas should do, they should blend in but also stand out.

On Design Informer the search box is well done because it quietly sits in the corner waiting to be used, but not so quietly that it goes unnoticed. However once you click in the search field to type, it lights up like a Christmas tree. Maybe that was a little too over the top but it does signify when you’re on it and when you’re not, which is much more helpful for UX, (User Experience), than you may realize.

Poorly Designed/Badly Placed Input Fields

Ohhh Smashing Magazine what have you gone and done? We all love Smashing Magazine but there’s one thing that did annoy after Liam McKay of Function re-designed their site a while back, and that was when all the little tweaks started happening about a week or so after the new design was launched. As you can see from the image above, not a very carefully considered plan there was it?

W3Schools, perhaps the one Website that every web developer has been to at some point in there life. Notice in the image above how they’ve basically got the same design around the search field and button as Smashing Magazine? Well that’s because it’s the windows default styling. Well in Firefox anyway. Not to mention that the search field is so small you can barely see it.

5. Use of White Space

Spacing is a very important tool in web design as it gives designers the ability to properly layout a web site with no restrictions. Looking at the Line25 Blog, it’s easy to see where and how Chris Spooner is giving more visual hierarchy to the post thumbnails by having them jut out of the page.

Elliot Jay Stocks, world renowned designer also uses this technique on his Portfolio and Blog. Notice how parts of the content catch your eye as you browse the page. Because of the odd layout Elliot has done a wonderful job of, like Chris Spooner, adding visual hierarchy to the design and layout.

Conclusion

I know that some of you are thinking:

Well yes in a way it was, but that’s the sort of post I decided on so I could give my point of view more easily.

I’d love to hear how you achieve these techniques in the comments section, it’s always great to know more than one option.

• Program: Photoshop
• Version: CS4
• Difficulty: Easy
• Estimated Completion Time: 30 minutes

Step 1

Let’s start with an idea. If you create this for someone, chances are you have a basic sketch in front of you or at least in your mind an image of how this will look. If you are willing to sell your design as stock, make sure your work is as clean as possible. People like simple, obvious things. When you look at the card, you don’t want to search for the phone number hidden between some design elements do you? So the two things which must be highly visible on the first look is the name and the number. The rest is small text, which shouldn’t be left out. Only if that is the specific need, of course.

So, for this tutorial I’ve chosen a simple and easy design which is not that hard to follow. Nothing fancy or extraordinary, the focus of this tutorial is introducing you to the standards and a quick look on how this is made. Also, you might want to create a 2 sided card. For that, you’ll need to finish this side. Then you can copy it and remove unnecessary text areas and write a company name for example.

This is what we’re going to do today:

Step 2

The dimensions. Before we start, let me explain you how a business card is created. The print company needs a well set up card design, especially if you are serious about it. They might accept less sophisticated files but the end product will not be what the customer wanted. So, the process is the following: They print your card in a bigger size than the end-size. Why? Because they’ll cut it to the final size. Because of this, you’ll need to add a bleed area. The reason behind the name is that the ink will exist on the very edge of the paper as well.

The standard end-size is 3.5" by 2". Bleed area means an extra 0.25" in both directions. Which means 0.125" on each edge. So the working size will be 3.75” by 2.25”.

Step 3

Start by creating a new document. File -> New. Fill out the dimensions – width: 3.75 inches and height 2.25 inches. (If you are not working in inches you can switch here. Or set it in Edit -> Preferences -> Units & Rulers.) Set the color profile to CMYK. It’s important! Do not miss it or you are going to be in some trouble. It’s better to set it in the beginning than in the end when you are finished, and say: oops it should’ve been CMYK. You change the color profile then bam all your colors look different. Don’t worry I’ve got a solution for that problem too but let’s just stay safe for now. Last but not least 300dpi is a must. Do not ever user 72 or anything less than 300 if you are going to print it. You can, but it will look really ugly. Or small if printed with 300dpi anyway. So, set it to 300 then continue to step 4!

Tip: Save the preset to speed up future designs.

Step 4

We’ll add guides to know where to and where not to place artwork and text. Start with the bleed area. The most precise way to add our guides is the following: View -> New Guide…

We need to enter the following numbers:

• Vertical 0.125 in (left)
• Horizontal 0.125 in (top)
• Vertical 3.625 in (right)
• Horizontal 2.125 in (bottom)

I just calculated simply like 3.75-0.125=3.625 etc… You’ll see that anything you place outside this newly formed area will be most likely cut.

Step 5

Before we can work on the actual design there is one more thing to do. To mark the no text area. It’s again a 0.125" space on each side.

So add these too:

• Vertical 0.25 in (left)
• Horizontal 0.25 in (top)
• Vertical 3.5 in (right)
• Horizontal 2 in (bottom)

These are just for you, the print doesn’t really need guides. They need a card which is designed with these things in mind, (this is basicaly padding).

Step 6

The previous steps included everything you need to get started. Follow the rest and you’ll learn a bit more about this! I’d start with a gradient. To do that add a gradient adjustment layer. Click on the 4th icon at the bottom of the layers window, then choose "Gradient…" from the menu. Set it from the color #3a5790 -> #0e2138.

It’s a dark blue gradient. Check Dither to avoid ugly stripes. Angle it by -45, and it will be a linear gradient.

Step 7

In this step we’ll add some texture to the gradient so it will look much better. Create a new layer then go Filters -> Render -> Clouds. Make sure your colors are black and white. If not just click the little black and white icon next to them on the main toolbar. Set this layer’s composition mode to Hard light. Then Image -> Adjustments -> Brightness/Contrast. Check the legacy box, then lower contrast to -80. Voila.

Step 8

Now get a nice font from dafont.com. I’ll use the Harabara.

Step 9

Add a text area for the name, and type in Johnathan Doe. Make it 120 pixels big. Align to the right. Place it near the no text guide.

Step 10

Add 2 more text areas. One for the title and another for the number. Title is 75px, the number is 84px big in my case. The number ends up as wide as the title. The point is that they form a text block this way.

Step 11

Add 2 more text areas again. One for the email-website combo and an other one for the multi-line address. Align left the address, right the other. Use 30px font size. Try to position them nicely, so put them always the same distance from the no text guides. I move them with 2 presses of the shift+arrow combination when working at the zoom of 66%. (These pictures are at 50%.)

Step 12

Here you can add a custom artwork or logo. Let’s place a fancy line there. We’ll make a basic wavy thing out of it soon. Select the Polygonal Lasso (Shift+L twice) and on a new layer draw a line shape with a little bit more width on the left than right. Then fill it with white (Paint Bucket – hot-key: G).

Step 13

Add an outer glow layer style (double click on the line layer) with these settings: vivid light mode, 100% opacity, white color, softer technique, 0% spread, 40px size, 20% range. It should look like a light-saber.

Step 14

Go to Filter -> Liquify and choose the Bloat tool. Be extra careful with this, we only want a thin wavy line with changing width. I don’t know about you but I don’t like the pen tool, for this effect liquify is very natural and good. Don’t make the line too wide because the edges will become jagged and will look like an up-scaled drawing. So let’s just make it wavy, with a tiny variation in width. If you are not satisfied with the result you can liquify again and/or paint over it with a 10% opacity white brush.

Step 15

Almost at the end, but our text areas need a little effect. A drop shadow will do the trick, add a 30% opacity shadow in the layer style of one of the text layers. Make the shadow color rich black. Manually type 100% into the C, M, Y, K fields in the color chooser. This is important whenever you use black in CMYK. If you use 100% K and others 0% it will still look black on the monitor but in print it will look dark grey…

Step 16

Right click on the layer you’ve just added the layer style to and copy layer style. Select the rest of the text layers, right click then paste layer style. Voila.

Step 17 – Optional…Sort Of

Important note: ONLY do this if you forgot to set to CMYK in the beginning! I’ve included this tip because it can happen to anyone, and here is the solution.

I have to admit, on my first attempt at creating a card I forgot to set the color mode to CMYK. If it happens don’t panic. You can change it now, but it’s not as straightforward as you think. First try it out, from the Image -> Mode -> CMYK Color. It looks totally bad isn’t it? I mean, it has nothing to do with what we’ve been doing. You can flatten the whole image then do the conversion so it’ll look good but you can’t edit the layers after that. And flattening is truly a no-no!
Thanks to smart objects we can skip this problem very nicely. Select all your layers (you can leave out the text layers), and convert them together to a smart object: right click menu -> Convert to Smart Object. Then do the color mode change as mentioned above. Dialogs will appear, but you are not going to rasterize, merge, nor choose a different profile. If you need any more editing done, you can do so in the smart object (double click on it), which is still in RGB mode, haha!

Step 18

If you are planning on uploading the card to a stock graphics market, or just show it around on the net, create a slice along the bleed area guides. Then use File -> Save for Web & Devices. And create color variations (this is mostly a combination of adjustment layers such as hue/saturation placed above the background but below the wave artwork).

Step 19

You’ve reached the end of this tutorial. Thank you for reading, I hope it was useful, and I wish you luck in your future designs. Here is our finished card without the bleed area. I did a warm version too just for fun. I’d appreciate if you would take a look at my first business card here. Leave a comment below with your thoughts and/or tips.

Final Result

You can see what we’ll be making right here. The website won’t be absolutely stunning design, but it will be very effective for learning.

Step 1

Great, lets get cracking! Open up Fireworks, and create a new file, 900×1000 pixels. Let’s tidy the layers. To do this, open up the “Layers Window” (Window > Layers or F2). Rename “Layer 1″ as “Shapes”. Add another layer “Text”. Note: The layer “Web Layer” can not be deleted.

Step 2

Let’s make the header. Take the rectangle tool (U) and draw a shape. We’ll position it using the properties panel (Window > Properties). Enter “900″ for the width, “100″ for height, “0″ for X and “0″ for Y (this positions it at the very top). Give it a dark color, using the bucket to open up a color palette. I’ve used the darkest shade of grey for the header. Be sure to name this shape “header” (this is done in the Layers window).

Step 3

Next up is the feature area. Use the same technique as before, using “900″ for the width, “300″ for the height, “0″ for X and “100″ for Y (we want to position it beneath the header). I used the next shade of grey to color it. Also, don’t forget to name this shape “feature”.

Step 4

We still need a body, a projects bar and a footer, so lets continue. I’ll let you make the shapes now, you should know how to do that by now.

Body:

• Width: 900
• Height: 400
• X: 0
• Y: 400

Screenshot Area:

• Width: 900
• Height: 100
• X: 0
• Y: 800

Footer:

• Width: 900
• Height: 100
• X: 0
• Y: 900

Step 5

Onto the text. Enter the “Text” layer we’ve created. Grab the Text tool (T). The properties window we have been using will transform into a Text tool properties window. Choose “Arial” as the font, 40 pixels, bold. Click on your canvas and type “Logo”. Enable “Smart Guide Snapping” (View > Smart Guides > Snap to Smart Guides). Take the pointer tool (V, O) and drag the text to the upper left corner. The smart guides will pop up when the text is in the middle of the header, leave it there. Now add a 20 pixels indent using the properties window.

Step 6

We also need navigation links. Add these, using Arial at 16 pixels, normal width. Type “Home About Blog Contact” with three spaces in between each word. We’ll add these links using HTML, so it doesn’t need to be perfect.

Step 7

I’m going to speed up a bit. Type “Hey there, I’m John Doe” in Arial, 40 pixels (if you like, you can use your own name). Type some more text in 24 pixels until it looks like the image below.

Step 8

Make sure the text you just typed is dead center, using the smart guides.

Step 9

Add text and position it using the smart guides yet again – they’re your friend! See the image below for guidance.

Step 10

Add the word “Projects” to the bar and add buttons, 100×60 pixels, with 5 pixels roundness. Again, use smart guides to position them in the center of the bar. Copy and paste them until you have four of them, 20 pixels margin in between them.

Step 11

We’re almost there! All we need to do is adding some text in the footer. Follow my lead:

Step 12

Hey, take a break, you’ve done great! When you return we’ll be exporting it to Photoshop and coloring the design.

Save your file (file > save) and then “Save as…” (file > save as…) and select “Photoshop PSD (*.psd)” from the drop-down menu. The result looks like this:

Step 13

You can close Fireworks and open Photoshop. Open up the file you just exported. Open up the Layers window (window > layers). Mind you, layers and folder differ between Fireworks and Photoshop. Don’t get confused: in Fireworks a layer is a “folder” containing shapes, or text. In Photoshop a folder contains several layers. Those layers are shapes, or text.

Step 14

Lets give the header bar a nice gradient overlay. Right click the header shape, and select “Blending Options”. This will open up a window with lots of options. Go to the tab “Gradient Overlay” and click on the gradient you see. That will open up yet another window, with the gradient information. Make a gradient from color #244386 to color #2c539e.

Step 15

Do the same to the feature area, only this time using color #a7c7dc to #85b2d3. Result looks like this:

Step 16

Give the body a Color Overlay with #142a5b. This is done just like the Gradient Overlay, only this time you need to pick the tab “Color Overlay”. Do the same to the footer. Give the screenshot area a gradient overlay from #a7c7dc to #85b2d3.

Step 17

It’s actually starting to look like a website! All that’s left to do is to style the content. Select the “Logo” with the text tool, and give it the color #c8d7dc. Do the same to the navigation items. Give the “Hey there, I’m John Doe” text the color #244386.

Step 18

On to coloring the text in the body. Color all the text #85b2d3, including the footer links.

Step 19

The screenshot buttons still look plain. As we don’t actually have any projects to showcase, we’ll give them a generic look using layer styles. First, give them a Gradient Overlay from #244386 to #2c539e. Now give it a 1 pixel Stroke with color #244386. Finally, add an Inner Shadow with color #ffffff, Blending Mode: Screen, Distance: 0 pixels and the Size: 1 pixels. Look in the image below for reference. Apply this layer style to all the elements.

Final Result

And that’s it, we’re finished! Take a look and admire your work. Soon we’ll be coding it up, be sure not to miss that tutorial, so be sure to subscribe today!

Source Download

As some of you might not know, free items are also protected by the Creative Commons Attributions. These attributions are somewhat the same as copyright laws for selling files. A set of rules meant to protect the item author’s rights.

Here is what you should know when using, modifying, or redistributing a free item off the web, keep in mind that all of the following attributions when used by users must not infinge the author’s moral or normal rights. In the attributions where a permission to sell or redistribute in a comercial project is not shown, it’s strongly suggested that you contact the author before using the file for these purposes.

Creative Commons

Attribution

This Common states that the item may be shared, adapted, or transmited, reminded that the notes of that particular item are respected. What does this mean? For example, if the item description states ” Please link back to this site if … ” this not must be respected and followed

Attribution-NoDerivs

These attributions states that the item used, may be redistributed, transited, but must not be edited or modified in any way, neither is continuing where the author left off. If a item is incomplete or is missing elements users are not allowed to modify it.

Attribution-Non Commercial – NoDerivs

These attributions states that the item used, may be redistributed, transited, but must not be edited or modified in any way, neither is continuing where the author left off. If a item is incomplete or is missing elements users are not allowed to modify it.

Attribution-Non Commercial

Items can be shared and give to others as they are ( not sold ) also users may edit or modify the work to their free will and purpose, but the item, altered by the user or in original state must not be used for commercial projects or sold.

Attribution-Non Commercial-ShareAlike

This is the most restrictive attribution of all, users being allowed just to share the item and distribute the item to others (as is , not sold!)If the user plans to modify, or alter this work, the item must be given away as it was received. A good example for this is Linux, there are a lot of versions, each made by someone else yet all have maintained their original free-source status.

Attribution-ShareAlike

Last but not least, this attribution offers users the possibility to share, redistribute ( as is , not sold ) the item, also modify and edit it to their needs, but if the item will be redistributed as a modified version, users must give this version as the original file. If the item was free, no matter what improvements were added users may not sell it.

More Info?

This data is international, if you wish to see the data from your specific country go to Creative Commons and you will find all the information you need for your specific country. Also, feel free to check out Copyright Laws to learn more about the copyright laws and how they apply.

Take a look at the design we´ll be creating today, it´s a very clean and minimal iPhone application site. We have released the final .PSD file for everyone to download for free!

Before We Get Started

What we need to do before we begin is to download the 960 Grid PSD and the iPhone GUI PSD 3.0. If you haven´t seen the ‘iPhone GUI PSD 3.0′ kit before, take a quick look at the image below.

Step 1 – Getting Started

Open up the ’960 Grid System’ in Photoshop and change the canvas size to 1200×1500 pixels. Change the background color to #232323 and add some noise. Go to Filter >> Noise >> Add Noise (use the following settings):

Step 2 – Add the iPhone

Now open up the ‘iPhone GUI PSD 3.0′ and transfer the ‘Vertical iPhone’ over to our document. Get rid of the images under the folder “Sample Screens” and add your own little background.

As you saw in the Final Result I´ve created one myself and named our tutorial application “aura”. Make sure you place the iPhone something like I have done below. (194px down and 130px from the edge)

Insert a nice logo and add the menu. Since this is only an application design we don´t really need an extensive menu, so we will just do a simple one. Place the logo, align it with the left side of the iPhone and put the menu level with the top of the logo and align it to the right like I show in the images below.

Step 3 – Adding Content

Now we will add some content to give the site the look and feel of an iPhone application site. I´ve added some text and some thumbnails to make the design more informative and creative. Use the settings for leading and letterspacing as the image below shows.

Step 4 – Creating the Buttons

To create the buttons we use the “Rounded Rectangle Tool” and create a nice big button to fit our text in. I´ve made my buttons in the sizes 222px wide and 74px high. To give it the nice gradient I´ve added to mine some really simple settings to use. For the gradient I have used a blue color to match the application screen background. Use these colors for the gradient: #1461a9 to #86bef2.

After applying the gradient and other settings you can add a nice shine effect by adding a white half circle with these settings: “Soft light >> 15% opacity” and erase the parts that should be there.

Here is my finished result. The green button uses the same settings as the blue. All you need to do is to use these colors for the gradient instead: #7fb727 to #afdc74

Step 5 – Adding more content

We need to fill the design with some more content, as for this moment it looks quite empty and boring. We need to give it more life and more information about the app itself. I´ve created two lists, one that shows the features and one that shows the requirements needed for the app to work.

Step 6 – Adding a footer

All we have left is to create the footer and give the footer some information. For the footer I´ve created a 390px high background and added a big-border-like-line to give it more depth. For the gradient on the border I´ve used the colors #313231 to #505150 which are a very subtle combination of darker colors. Now all you need to do is to fill it with some nice content

Source Download