Business/Product Layout FREE PSD

The Tutorial

You can view the full tutorial HERE, if you haven’t already seen it.

License and Attribution

This PSD is licensed under the Creative Commons license and can be used for personal purposes ONLY. Attribution is required and is always appreciated.

What We’ll Be Creating

Click image for full view.

Resources Used In This Tutorial

• Woofunction 178 Amazing Icons

Lets Get Started

Create a new document 1200 x 1225 pixels with a white background. Set your foreground color to #eeeff3 then select the rectangular marquee tool.

Once you’ve selected the rectangular marquee tool make a selection about 80px in height spanning the width of your canvas. Fill the selection with your foreground color.

Creating The Header

Select the text tool then add your website title and slogan inside the rectangle using the color #70767d.

After your website title create a small divider, to do this zoom in then make two 1px lines next to each other. Color the first line in black (#000000) and the second line in white (#ffffff), once you’ve filled the lines set the layer blend mode to soft light.

Creating The Navigation

Using the text tool create a simple textual navigation, use the color #70767d for the text then add a drop shadow using the settings below.

The result.

On a layer underneath your navigation text create a rounded rectangle using the rounded rectangle tool. Color the rectangle in the color #e0dfe2, your should have something like this.

Creating The Product Featured Area

Select the rectangular marquee tool and make a selection about 370px in height that also spans the width of your canvas. Fill the selection with any color then add a gradient overlay using the settings below.

Once you’ve added the gradient overlay right-click the layer and go to “Convert To Smart Object”. Now go to “Filter > Noise > Add Noise”, use the settings below.

You should have something like this.

At the top of the featured area create a divider using two 1px lines colored black and white. Set the layer blend mode to overlay.

Once you’ve create the divider line at the top of the featured area, duplicate the layer and drag it to the bottom of the featured area.

Adding Content To The Featured Area

Inside the featured area add a screenshot of your product. Make the product screenshot overlap on to the background past the featured rectangle.

Once you’ve added your screenshot add a drop shadow using the settings below.

Above your screenshot add some text, maybe a title or something along those lines.

Once you’ve added your text add a drop shadow using the settings below.

On the right side of the screenshot add a couple of icons from the icon pack provided in the resources list. Underneath the icons add a smaller title with a couple of paragraphs of text. You should have something like this.

Creating The Download Button

Using the rounded rectangle tool, drag out a smallish rectangle. Again make the button overlap the featured area and background.

Now add the following layer styles to your button.

You should have something like this.

Select the type tool and add your desired text inside the button. Once you’ve added your text add a drop shadow to the text layer using the settings below.

You should have something like this.

You can now duplicate the button as many times as you wish.

Creating The Content Area

Set your foreground color to #f1eeea and background color to #ffffff then select the gradient tool. With the gradient tool select select a linear gradient then drag the gradient over your background layer starting from just above the featured area and dragging about 200 pixels downwards.

Now underneath the product screenshot add a small title saying “From The Blog”.

Underneath your small title add one of your buttons which we created earlier. Re size the button quite a bit then add a month of the year inside.

On the right side of the month box add a post title with a description underneath.

Repeat the steps as many times as need until you get a small blog.

Creating The Gallery

Create a new text heading saying “In The Gallery” then underneath add 3 screenshots of your product. I’ve just used my current screenshot for the purpose of this tutorial.

Finish off the gallery by adding a small paragraph underneath the screenshots.

Creating The Seperators

Select the type tool and keep the dash key (-) pressed until you get a row of dashes. Place the horizontal dashes in between the blog and the gallery.

Repeat the process once more only this time make the separator a lot longer. Once your happy with the separator rotate it by 90 degrees and place it along side the left content.

Finish off the separator by adding a layer mask. Once you’ve added the layer mask drag a linear gradient from about about 50 pixels from the top, dragging upwards to the top of the separator. The separator should blend in with the background.

More Content

Finish off the content area on the right by adding more product related content building up your layout. I’ve chosen to go for a demo section where you can see the product in action.

Creating The Footer

Select the rectangular marquee tool and make a selection around the last bit of space at the bottom of your canvas. Fill the selection with the color #b8bdc8 then add a inner shadow and stroke using the settings below.

Once you’ve added the layer styles press “Ctrl + T” to enter into free transform mode. Select the left anchor point and drag out past the canvas. Repeat the process for the right anchor.

Finally add your footer text somewhere on the footer area.

That’s it all done, hope you enjoyed this tutorial, look out for more tutorials coming soon. Thanks.

Sleek Aluminium Hard Drive Over At Design Instruct

I look forward to your comments.

Mobile App’s Layout #2 Freebie

The Tutorial

You can view the full tutorial HERE, if you haven’t already seen it.

License and Attribution

This PSD is licensed under the Creative Commons license and can be used for personal purposes ONLY. Attribution is required and is always appreciated.

Apple Mac Mini Over At Design Instruct

I look forward to your comments.

Fei Long

Circus

Theme 54 Tower

The Marsh Monster

Legend

Witchfinder General’s Parlour

Greed

Masquerade

My Best Friend

Little Lo

Aion Love

Fly Me To The Moon

Gintama Jouishishi

They Used To Bow

Haha It’s A Game

Pinkitude

Sea Monkey

Chillaxin

D2m3k34

Thanks to all the artist’s for sharing there work, do you know of any great work??? feel free to share it with us.

What We’ll Be Creating

Click image for full view.

Resources Used In This Tutorial

• Iphone Icon
• Iphone Button Icons
• Iphone 3G/3GS PSD

Lets Get Started

Create a new document 1200 x 1200 pixels with any color background. Change your foreground color to #f3f3f2 and background color to #d2d2d2 then select the gradient tool with a reflected gradient.

Drag the reflected gradient over your canvas starting from about 400 pixels down from the top of your canvas. Your looking to get something like this.

Creating The Navigation

Select the rounded rectangle tool from the menu then change the radius of the rectangle to 10px (should be 10px by default).

Drag out a rectangle on the right side of the canvas. The rectangle should be quite smaller than your average navigation.

Once you’ve created the rectangle add the following layer styles.

You should have something like this.

Inside the navigation bar add your textual links using the color #676767. Leave the first link set to the color white.

Now using the rounded rectangle with a radius of 5px create a rectangle around the first link. Fill the rectangle in the color #8f8f8f and make sure the layer is underneath your text layer.

Once you’ve created the rectangle add a drop shadow using the settings below.

You should have something like this.

Creating The Website Title

On the left side of the canvas add your website title using the text tool. Once you’ve add the text add the following layer styles to the text layer.

You should have something like this.

Adding The Iphone Information Area

Download the 3G/3GS iphone PSD file from the resources list then open up the PSD file in photoshop. In the layers window find the two layers “front” and “back black” once you’ve found the layers drag the two layers into your layers window.

Expand the “front” layer to reveal the rest of the layers inside the group. Once expanded find the reflection layer then hide it by clicking the little box next to the layer.

Now resize the all the layers in the “front” group by highlighting the group in the layers window and pressing “CTRL + T” on the keyboard. Resize the iphone so it fits underneath the title text.

Now resize and rotate the other iphone making it much smaller. Place the iphone behind the bigger one.

Adding The Iphone App Icons

Download your desired iphone icons using the icons from the resources list. Place each icon in a list next to the big iphone underneath the navigation.

Next to each icon add some example text.

Creating The AppStore Button

Using the rounded rectangle tool with a radius of 10px, create a small rectangle underneath your apps list.

Now add the following layer styles to your rectangle.

You should have something like this.

Were now going to make a custom diagonal pattern, create a new document 25px x 25px with a transparent background, select the pencil tool with a 1pixel black brush and duplicate the image below.

Once you’ve created the custom pattern go to “Edit > Define Pattern”, give your pattern a name and save it.

Head back to your original canvas and load a selection around your rectangle, to make a selection highlight the layer and go to “Select > Load Selection”. Once you’ve loaded the selection select the paint bucket tool and change “Foreground” to “Pattern”.

Fill the selection with your pattern on a new layer then set the layers opacity to 1%.

Inside the rectangle add the iphone icon from the resources list then add the text “Available on the iphone AppStore” once you’ve added the text add the following layer styles.

You should have something like this.

Creating The Content Area

Using the text tool add a content title underneath the big iphone, once you’ve added the text apply the following layer styles to it.

On the right side of the content title text create two 1 px lines on top of each other, color the top line in black and the bottom line in white then set the layers blend mode to “Overlay”.

Underneath the title add some example text and a small image gallery using a small selection of images.

Creating The Footer

Repeat the creation of the two 1px lines on top of each other only this time make the lines span the width of the canvas. Once you’ve created the lines add a layer mask to the layer and drag a reflected gradient from the middle of the line outwards. The line should blend in from each side.

Finally add your footer text underneath the line.

That concludes this tutorial, hope you enjoyed the read. I’ll look forward to all your comments.

Clients are the people for whom every one of us works. We encounter several types of clients in our daily life. Some are easy and supportive; some are stubborn and hard to crack. But all of us have to find a way out of each and every kind of client we see. The reason being, clients are the people who pay the bill.

In the graphic design industry, the scenario can even be worse. Sometimes, you have to face really silly and weird questions and terms and conditions of your clients. The weird questions and comments can range from “I can design this better than you”, to “This is not going to work for me”. Now the question remains, how to deal with these types of clients? Let’s have a look.

1. Ask, Ask and Ask

With the first encounter with your client, the only thing you should do is, let him do all the talking. Let him spit out what all he has in his mind. Do not interrupt the process. And most importantly, ask all the possible questions you want to. That helps in getting a clear picture of the project on both sides. It has been proved that the reason of most of the failed projects is the miss-communication between the client and the service provider.

2. Dont Lower Your Standards

You will eventually come across such clients in your design career, who want to get the best results, still are reluctant to pay the price for it. Always remember one thing, “All great things come with a price tag”. And if you happen to come across a client, who is not ready to pay up to your standard of expertise and experience, the best bet would be not to go ahead with him. Believe me, it’s more important to retain your standards and wait for the right client, instead of jumping in whatever comes in your way.

3. Have A Clear Goal

Many of the web designers do not define their boundaries and goals at the beginning of their project. The result? A client yelling, “This is not what I wanted”. To make sure you never get in to such situation is, prepare a solid path and set your goals at the very start of your project. This helps in creating a plan so that you are never left out of the league. Also, keep updating your client about the progress of the project.

4. Break It Down

Not every client understands the complexity and the amount of work you put into a project. All they care is about the final result. And to make sure, you don’t get it all wrong in a jiffy, break your project into small and independent modules. After you are done with a module, consul with the client over it and take his/her feedback. After he is satisfied with one module, move on with another. This way, you’ll be able to keep things in shape.

5. Never Deliver Unless The Client Pays

Make it a rule of thumb. No matter if the client is your wife’s dad, or your best pal. “Never, ever deliver your work until and unless you have the payment”. Trust me on this. I’ve been in many projects, where the client convinced me about a so-called trust factor and I was left with no-payment ever. So, invoice your billings effectively and make it a habit of taking some amount of down-payment as you start off with the project. This way, your hard work would never go in vain.

Conclusion

Not every person on this earth is alike. We always come across people with different mind sets and mentalities. But all we have to do is, make a strategy to deal with them, effectively.

Thanks Rishabh

Please give thanks to Rishabh for this post. Hopefully we’ll see more in the future.

I Love Music

By Paulo Roberto Dgrafico

Rain London

By Neslirawles

Not Again

By Neslirawles

More Than Human

By The Brok

Be Happy 2

By Ricardo Fx’s

Global Control

By Ricardo Fx’s

XR13

By Ricardo Fx’s

Dance With Me

By Ricardo Fx’s

Space Girl

By Ricardo Fx’s

Pink Angel

By Ricardo Fx’s

Psicodelico

By Ricardo Fx’s

So Wet

By Ricardo Fx’s

Super Flower

By Ricardo Fx’s

Sexy And Lovely

By Ricardo Fx’s

Exploding Head

By The Brok

Hiphop Dance

By Clovesboo

Swirls

By Ricardo Fx’s

HS1961

By Blackpixi 7

Doberman

By Buddabart

Poker

By Buddabart

Planet Earth

By Buddabart

Rainbox Deer

By Buddabart

Join The HV-Designs Flickr Group

Do you have some artwork you’d like to share with us?? maybe you could concider submitting it into the HV-Designs Flickr Pool.

Metal Text PSD File

You can view the full tutorial HERE, if you haven’t already seen it.

Mobile App’s Layout PSD File

You can view the full tutorial HERE, if you haven’t already seen it.

Scrollable Website Template

You can view the full tutorial HERE, if you haven’t already seen it.

Photography Layout PSD File

You can view the full tutorial HERE, if you haven’t already seen it.

License and Attribution

This FREEBIE PACK is licensed under the Creative Commons license and can be used for personal purposes ONLY. Attribution is required and is always appreciated.

The Live Demo

Click the image to see the full working demo.

Resources Needed In This Tutorial

• jQuery Libary 1.4.2
• Pre-Made PSD File

Lets get started…

Slicing The Images From Pre-Made PSD File

Before we start create a new folder on your desktop called template, inside the template folder create a further 3 folders. Label the 3 folders “Images”, “Js” and “Stylesheets”.

Next download the pre-made PSD file then open it up in photoshop. The PSD should look like this.

We need to slice 3 items from the PSD file which will make up our demo, the rest can be done in CSS. The items we need to slice are “The Background”, “The Title” and “The Graphic Top”.

Using the “Rectangular Marquee Tool” make a selection around each item then save them inside the images folder. Be sure to put each image on a transparent background and save the files as “bg.png”, “title.png” and “top.png”.

Creating The HTML Markup

Inside your template folder create a blank HTML file then inside your stylesheets folder create a blank CSS file. Once you’ve created the files open up both files inside your favorite code editor.

Inside your HTML file start the mark-up, which looks like this.

[sourcecode language="html"]
<div id="top">

<div id="title">
</div><!–title ends–>

<div id="navigation">
</div><!–navigations ends–>

<div id="homepage">
</div><!–homepage ends–>

<div id="about">
</div><!–about ends–>

<div class="top">
</div><!–top ends–>

<div id="gallery">
</div><!–gallery ends–>

<div class="top">
</div><!–top ends–>

<div id="portfolio"">
</div><!–portfolio ends–>

<div class="top">
</div><!–top ends–>

<div id="contact"">
</div><!–contact ends–>

<div class="top">
</div><!–top ends–>

</div><!–container ends–>
[/sourcecode]

Lets look at the mark-up abit more closer.

• DIV Top – The div top is our container div, this div will be the div which holds all the elements to our layout. You’ll be pleased to know that there is also a reason why its labeled as “top”.

  When we click “Back To Top” which will be a link underneath each section the animation will scroll to the top of this div called “top”.

• DIV Title – The div title will simply be a div which will house our title image.
• DIV Navigation – This div will be the div in which our navigation will sit.
• DIV’s Homepage, About, Gallery, Portfolio and Contact – These div’s are the sections in which the animation will scroll down to when the desired item is click in the navigation.
• Class Top – The classes top in between each section will house our fancy separators and contain our “Back To Top” link.

Adding Our Elements

Inside the “Title” div insert your title.png image.

[sourcecode language="html"]
<div id="title">
<img src="images/title.png" alt="jQuery Animated Scroll" />
</div><!–title ends–>
[/sourcecode]

Inside the “Navigation” div create a simple unordered list for your navigation items. Each link should contain the class “Scroll”, this class is needed for the scroll animation to work. Also take note of the hyperlinks in each navigation item, the hyperlinks are actually the names of the DIV’s in which are used in the HTML code.

[sourcecode language="html"]
<div id="navigation">
<ul>
<li><a href="#about" class="scroll">About Me</a></li>
<li><a href="#gallery" class="scroll">Gallery</a></li>
<li><a href="#portfolio" class="scroll">Portfolio</a></li>
<li><a href="#contact" class="scroll">Contact Me</a></li>
</ul>
</div><!–navigations ends–>
[/sourcecode]

Inside each of the sections “Homepage, About, Gallery, Portfolio and Contact” insert a H1 tag which will contain the section title. Also inside the H1 tag add a description of that section wrapped in a span class.

[sourcecode language="html"]
<div id="homepage">
<h1>Homepage <br />
<span class="description">This is the Homepage</span></h1>
</div><!–homepage ends–>

<div id="about">
<h1>About <br />
<span class="description">This is the About Page</span></h1>
</div><!–about ends–>

<div class="top">
</div><!–top ends–>

<div id="gallery">
<h1>Gallery <br />
<span class="description">This is the Gallery Page</span></h1>
</div><!–gallery ends–>

<div class="top">
</div><!–top ends–>

<div id="portfolio">
<h1>Portfolio <br />
<span class="description">This is the Portfolio Page</span></h1>
</div><!–portfolio ends–>

<div class="top">
</div><!–top ends–>

<div id="contact">
<h1>Contact <br />
<span class="description">This is the Contact Me Page</span></h1>
</div><!–contact ends–>

<div class="top">
</div><!–top ends–>
[/sourcecode]

Finally inside the classes “Top” add a simple P tag containing the words “Back To Top”, add a link to the words which should link to our top div. Don’t forget to add the class “Scroll” to the link, without this jquery wont work.

[sourcecode language="html"]
<div id="homepage">
<h1>Homepage <br />
<span class="description">This is the Homepage</span></h1>
</div><!–homepage ends–>

<div id="about">
<h1>About <br />
<span class="description">This is the About Page</span></h1>
</div><!–about ends–>

<div class="top">
<p><a href="#top" class="scroll">Back To Top</a></p>
</div><!–top ends–>

<div id="gallery">
<h1>Gallery <br />
<span class="description">This is the Gallery Page</span></h1>
</div><!–gallery ends–>

<div class="top">
<p><a href="#top" class="scroll">Back To Top</a></p>
</div><!–top ends–>

<div id="portfolio">
<h1>Portfolio <br />
<span class="description">This is the Portfolio Page</span></h1>
</div><!–portfolio ends–>

<div class="top">
<p><a href="#top" class="scroll">Back To Top</a></p>
</div><!–top ends–>

<div id="contact">
<h1>Contact <br />
<span class="description">This is the Contact Me Page</span></h1>
</div><!–contact ends–>

<div class="top">
<p><a href="#top" class="scroll">Back To Top</a></p>
</div><!–top ends–>
[/sourcecode]

Adding The CSS

The CSS for all our elements look like this.

[sourcecode language="css"]
body {
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#top {
width: 950px;
margin-top: 50px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}

#title {
margin: auto;
width: 495px;
clear: both;
}

#navigation {
float:left;
width:100%;
overflow:hidden;
position:relative;
margin-top: 20px;
margin-bottom: 20px;
}

#navigation ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}

#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

#navigation ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:#666666;
text-decoration:none;
line-height:1.3em;
}

#navigation ul li a:hover {
color:#000000;
}

#navigation ul li a.active, #navigation ul li a.active:hover {
color:#000000;
font-weight:bold;
}

#homepage {
float: left;
width: 950px;
height: 800px;
}

#about, #gallery, #portfolio, #contact {
float: left;
width: 950px;
height: 600px;
}

h1 {
color: #5a5a5a;
font-size: 24px;
font-weight: normal;
margin: 0px;
padding: 0px;
}

span.description {
color: #9f9f9f;
font-size: 12px;
}

.top {
background-image: url(../images/top.png);
background-repeat: no-repeat;
float: left;
height: 48px;
width: 950px;
padding-bottom: 35px;
background-position: bottom;
margin-bottom: 20px;
}

.top p {
text-align: center;
color: #999999;
font-size: 10px;
}

a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:hover {
color: #000000;
}
a:active {
color: #666666;
}
[/sourcecode]

Adding The jQuery

Download the latest jQuery library from the jQuery website, place the library file inside your “JS” folder.

Next, open up notepad then go to “File > Save As” save the blank notepad file as “Scroll.js” inside your “JS” folder.

Open up your “Scroll.JS” file inside your code editor then paste the following snippet inside and save.

[sourcecode language="javascript"]
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();

//get the full url – like mysitecom/index.htm#home
var full_url = this.href;

//split the url by # and get the anchor target name – home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];

//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;

//goto that anchor by setting the body scroll top to anchor top
$(‘html, body’).animate({scrollTop:target_top}, 500);
});
});
[/sourcecode]

Test your HTML file inside your browser and see how it works.

That’s it all done hope you enjoyed this tutorial.

Don’t Worry, I Have It Covered

Navi And Ikran

20100314

Mating Season

AN FF AC

Mermaid

Desolate Huntress

Perseverance

Princess

Thank God I’m Pretty

Fleeing Creativity

Human Mage

Infest

Man Eats World

Contract Art Contest

Hold Your Breathe

Online Flirting

Gothic Zombie Girl Face

Space

Fire Mage

Thanks to all the artist’s for sharing there work, do you know of any great work??? feel free to share it with us.