Carbon Style Icon

Good afternoon everyone, welcome to tutorial number #170, in this tutorial il show you how to create a custom carbon styled icon for you to use for your website or desktop. YOU CAN DOWNLOAD the PSD/ICONS for this tutorial for FREEEEE using the download button above. Right lets get started create a new document im using 600×200 but you can use what ever size you want depending on how many icons you want. Im also using a nice bright background so i can see everything abit more clearly. Select the rounded rectangle tool, change all the settings in the top tool bar to reflect the image below.

Draw out your icon onto your canvas, you should have something like this when you draw out your rectangle.

Select the pen tool, then right click in the middle of your rounded rectangle and goto fill path, the color doesnt matter as we will be changing it in a minute. Now right click once again and goto delete path.

You should be left with a rounded rectangle/square ๐Ÿ™‚ now add these layer styles.

You should have something like this.

For this next part you need to create a custom pattern, create a new document with a transparent background 4×4 pixels, zoom in 1600% then create whats in the image below,

Once you have created it goto “edit > define pattern”, save your pattern as carbon or something, what ever you like. Now head back to your orginal canvas and click on the little thumbnail image in the layers pallette on your rounded box layer whilst holding the CTRL key on the keyboard this should make a selection. Create a new layer above your rounded rectangle called pattern. Select the paint bucket tool, in the top tool bar switch to pattern, then select your pattern in the drop down box.

Fill your selection with the pattern. Now zoom in on your rounded rectangle and add a layer mask to pattern layer. Press the D key on the keyboard HOTLINK = default background and forground colors. Then press the letter X HOTLINK= switch forground and background colors. Select the gradient tool with a reflected gradient. Drag from point 1 to point 2 (shown in the image below).

Right-click the pattern layers mask and goto apply mask, this should merge the mask and the layer as one. Now add yet another layer mask this time select the linear gradient. Press X on the keyboard to switch the colors again. Drag from point 3 to point 4 (shown in image below).

Apply the layer mask once again. You should have something like this.

Using the pen tool make a path like the image below.

Fill the selection with the color white on a new layer above your pattern layer. Set layer opacity to 5%.

Select the rectangular marquee tool and create a small thin bar across the bottom of the icon, make the ends overlap by a couple of pixels.

Add these layer styles to your little bar.

You should have something like the image in step 15. Zoom in quite abit, on a layer underneath the bar layer make a selection like in the image below using the polygonal lasso tool.

Fill your selection with a slightly lighter color than the actual bar. Do this for both sides of the bar.

Label your bar using a simple small arial font, then add your icon inside the space provided.

What are you waiting for go create your own masterpiece. ๐Ÿ˜‰ Till next time, see you all soon. Dont forget to subscribe to our rss/twitter.

The HV-Designs Shop Downloads

As your all aware there are free downloads available in the hv-designs shop which requires you to sign up to the actual shop before downloading well, if you dont want to sign up to download the files you can now download them directly from the HV-DESIGNS tutorial pages by clicking the download source button at the top of the tutorial. If you dont fancy going through pages of pages to find the post…. then use the search facility ๐Ÿ˜‰

Hope this makes it easier for you guys and gals to get your hands on them.

WordPress Layout #4 Tutorial

Layout inspired by soh tanaka

Hello welcome to another tutorial by hv-designs, in this tutorial il show you how to create an efficient wordpress mockup layout in photoshop. Pleaseย note: Theย layout is inspired by soh tanaka, the layout must not be replicated in any way shape or form. This tutorial is purly for learning purposes only.ย Ok lets get started, create a new document 900 x 1300 pixels fill your background later with the color #0f181f. Select the rectangular marquee tool and create a rectangle the whole width of your canvas and about 70 pixels in height. Set your forground color to #18222e and background color to #101921. Fill your rectangle with a reflected gradient using the gradient tool. Then add the layer styles below.

You should have something like this.

At the very top of your canvas on top of your rectangle create a 1-2 pixel single line going all the way across the width of your canvas. Fill the line with the color #1d8dcf.

Add your wordpress title and slogan to the left of the rectangle.

Add these layer styles to your website title.

The word “my” (in white) uses the same layer styles, just a different gradient overlay, using a combination of white colors. Add your navigation text on top of the same rectangle, at the start and end of the navigation add two dividers. Also add a state of hover on the navigation bar, do this by using a rounded rectangle with a radius of 10px. Fill the hover with a gradient overlay.

After your last divider add an RSS icon. Your header/navigation should look like this.

Still with the rectangular marquee tool create a bigger rectangle underneath your header/navigation rectangle the height should be about 180-190 pixels. Set forground to #0576bb and background to #3ea6e5 then drag a linear gradient over the top (make sure selection is still active). You should have something like this.

For this next part you need some “cloud brushes” ive had my cloud brushes for a long time and cant remember where i got them from, but there are loads available on the internet. Add your cloud brushes on top of your bigger rectangle, delete any excess clouds that go over it.

On top of your clouds add a quotation of some sort, or just leave it blank. The layer styles used are the same as the header title layer styles. The drop shadow has been altered a little bit so the text looks more visable.

Now for the sidebar, select the rounded rectangle tool then at the top on the toolbar change the settings to, paths, radius = 10 pixels and then add to path area (+). (OR see image below).

Draw out a small box for our search field, make sure you fill the selection with a color that matches the bottom of the big rectangle mine is #3ea6e5.

Inside the blue box add your search field and button, and maybe a magnifying glass of some sort so people can reconise it as a search box.

Now with the rounded rectangle once again change the radius to 20 pixels. Now create two small boxes either side of your search field box fill them with the same color as the background. You should have some nice rounded corners providing your layer organisation skills are up to scratch.

Now the sidebar will pretty much follow the same rule through out, it goes like this, icon, sidebar section name then blue box underneath for content.

The icons used for the sidebar are from dryicons.com, they have a nice collection of icons to use, just remember the credited link ๐Ÿ˜‰ Im not going to create a major advanced sidebar, just something nice and simple with some nice icons.

Now lets create the footer, duplicate your header/navigation rectangle. Drag it to the bottom of your canvas, press CTRL+T then drag the bottom anchor tag down to expand it.

The same for your website title and slogan. Drag them down and place in the left corner, use the type tool and add your copyright info.

Still with the type tool mimic the widgets you’d have running in the footer, seperate each part with a divider.

Now your footer is in place, lets use the rest of the space for our main wordpress posts. Using the rounded rectangle tool with a radius of 20pixels draw out a rectangle make it quite long as we will be doing some masking in a moment. Fill your rectangle with the color #0b1116 and add a 1 pixel stroke using the color #15222c. Now we need to merge the styles with the layer, create a new layer above your rectangle, HIDE ALL the layers in your layers window apart from the empty one and the rounded rectangle then goto “layer > merge visable” your empty layer an rounded rectangle layer should now be merged into a single layer with the layer styles applied. You cant edit the layer styles at this point. Now add a layer mask to your rectangle then drag a linear gradient over to the top, hopefully the bottom bit of the rounded rectangle should disapear and you should be left with something like this.

Fill your rounded rectangle with your post content.

Duplicate all elements of your post to create more posts. When you’ve reached your last post add a divider at the bottom with your page numbers.

Thats it all done heres the finished peice. Dont forget to subscribe to our RSS/Twitter.

Layout inspired by soh tanaka

Business Layout #4

Good afternoon, welcome to another tutorial by the hv-designs team in this tutorial il show you how to create a sleek professional looking business layout, currently the 4th business layout in our tutorial library. The layout were going to create features icons from the dryicons website, the set we will be using you can get here. Right lets get started, create a new document 900×1000 pixels. Fill your background layer with the color #e6e7eb, select the rounded rectangle tool with a radius of 15pixels, draw out a rectangle just short of the width of your canvas about 845pixels wide and about 250pixels in height. Select the colors #3c362c & #23201b then drag a reflected gradient over your rectangle. You should have something like this.

Select your type tool and add your business name and slogan on the left hand side. Add these layer styles for your website title.

Add these layer styles to your slogan text layer.

Your website title and slogan should now look like this.

Next to your website title we want to add a nice sleek divider to seperate the header abit. Using two 1 pixel lines next to each other create your divider, the colors are in the image below.

Choose one of the icons from the dryicons icon set and place on the right side of the header with a some descriptive text and a header. Also in the icon set there are two blue signs one with and question mark and one with a exclamation on, place those two icons outside the header area in the top right hand corner. Add the words about and help next to each icon. Your layout should now looks like this.

Using the rounded rectangle once again draw out a navigation type rectangle underneath your header. Add these layer styles to your navigation bar.

You should have something like this.

On your navigation add your navigation text, inbetween each text item add a divider using the same method as we did for the header, then on one of the text items add a hover button. Quick tip: when writing the text you dont need to write each text item on a different layer, just write it all on one line, will make it easier when editing if needed.

Using the rounded rectangle tool once again create two seperate boxes next to each other under the navigation fill them with the color #dee2e5 then add a 1 pixel stroke using the color #bfc4c7. Inside the boxes choose two seperate icons from the icon set.

Also inside the boxes add some descriptive text, title and learn more text. By the learn more text use one of the green arrow icons within the dryicons icon set.

Underneath the two boxes you just created create another box underneath, make it the same width has the header box. Fill the box with the color white then add a 1 pixel stroke using the color #b2b2b2.

Inside the big box create a smaller box on the right hand side, use the same layer styles & colors as the two individual boxes we made earlier. Inside the big box add some descriptive text, in the box on the right add another icon from the icon set with some more descriptive text. Finally at the very bottom add your footer information.

Thats basically it, nothing too complicated. You can buy this template in CSS and PSD from using the hv-designs shop. The final product should look like this.

Dont forget to subscribe to twitter and our RSS feeds. Many thanks for reading, till next time i bid you farewell.

The Design Lab: PSD Conversion

Hello, welcome to another layout coding tutorial. In this tutorial il show how to code my design lab layout tutorial. Make sure you have your PSD ready made in photoshop, create a new folder on your desktop called “design lab”, inside this folder create another folder called “images”. Open notepad then just goto “file > save as” save the blank document as “styles.css” save it in the “design lab” directory. Open up dreamweaver start a new HTML document then goto ” file > save as” save the HTML file as “index.html”.

Open up both files (styles.css & index.html) in adobe dreamweaver, put your HTML file in code view by clicking the code tab. Change the text within the title tag to what ever you want your site name to be. Also link your style sheet by adding the snippet of code underneath the title tag. That snippet of code is vital as without it your website will look pretty dull.

[sourcecode language=’html’]




The Design Lab | HV-Designs Tutorial



[/sourcecode]

The way i code my PSD’s are from top to bottom, so we’l start with the main things first like our container, title and naviagtion. The first thing we’ll need is our container to hold the website, then within the container there will be another container for our clouds background. Then there will be our title and naviagtion. We can draft these out in our HTML file which looks like this.

[sourcecode language=’html’]


[/sourcecode]

To keep on top of our code and to see where one div begins and where another one ends we can use coded comments, which you’ll only see when viewing the source code. When creating a div i always start with a comment to say that it starts here, then end it with a comment to reflect the end of the div. from the structure above you can clearly see where one item begins and where one ends. Now before we code out CSS we need to make a couple of images from our PSD. The first one being our clouds background, so in photoshop with your PSD file HIDE every layer apart from your clouds layers (there should be two) a blurred one and a normal one. With all the layers hidden apart from the two clouds images goto “layer > merge visable” your two clouds layers should merge into one. Now you need to make a selection around your clouds image making sure you have it all. Once the selection has been made copy and paste it to a new document with a TRANSPARENT background. Goto “file > save as” then save it as clouds.png in your images folder. Heres my clouds image on my canvas.

your going to need to do this for each item that we copy from our PSD so remember the steps listed above, failure to follow the steps will result in choppy images, non transparent images etc,.. Do the same to the website title and the navigation bar.

Save each file as “navigation.png” and “title.png”.

You also need a little chunk of the background as we have used a gradient background. We can repeat the background horizontally across our website.

Save the background as “background.png”. You should now have 4 images in your images folder background, website title, navigation and the clouds.

Now we have our first set of images we can now add our CSS styles to our stylesheet. The first set of styles we will write will be our body styles which will be repeated through out our whole site.

[sourcecode language=’css’]
*{
padding:0;
margin:0;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #797979;
margin: 0px;
padding: 0px;
background-color: #156894;
background-image: url(images/background.png);
background-repeat: repeat-x;
}
[/sourcecode]

So we dont want any margins or padding around our website so we set our margin and padding to 0. We want a common font family “Arial, Helvetica, sans-serif;”, with a size of 12 pixels in the color #797979. Our background color will reflect the color at the very bottom of our “background.png” file. Mine is #156894 yours might be slightly different depending on how long your selection was. Just open it up in photoshop and use the eye dropper to select the color of the last couple of pixels. We then want our background image with the gradient on it to repeat along the x axis (horizontally). The next bit of code we need to add is for our container and clouds.

[sourcecode language=’css’]
#container {
width: 850px;
margin: auto;
}

#clouds {
width: 850px;
float: left;
background-image: url(images/clouds.png);
background-repeat: no-repeat;
}
[/sourcecode]

The first div we style is our container which we want to be 850pixels wide the same as our PSD file. We want our magins set to auto, this will center our whole site in our a browsers. We then style our 2nd div which is our clouds div, which will also act as our container but with a background image. We want the width to be the same as our container and we want to float it left within our container, we then set our background image to the clouds image in our images folder. We dont want it to repeat so we set no-repeat. You can view your HTML file in your browser to see how it looks, you wont see alot, but you’ll definetley be able to see if your background color matches. The next part we want to style is our title and navigation which looks like this.

[sourcecode language=’css’]
#title {
background-image: url(images/title.png);
background-repeat: no-repeat;
height: 39px;
width: 243px;
float: left;
margin-top: 45px;
margin-left: 20px;
}

#navigation {
background-image: url(images/navigation.png);
background-repeat: no-repeat;
height: 45px;
width: 434px;
float: right;
margin-top: 40px;
}

.nav_menu li{
list-style:none;
display:inline;
padding-left: 13px;
padding-right: 13px;
float: left;
padding-top: 14px;
}

.nav_menu a {
font-size: 11px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #848484;
font-weight: bold;
}

.nav_menu a:hover {
color: #156894;
}
[/sourcecode]

Okay so the title div first, we set a background image which will be our title image from our images folder, we dont want it to repeat. Then the width and height which is the actual dimensions of our title.png image.

We then want to float it left with a top and left margin to bring the title in abit so its not stuck up in the corner of our container. Next is our navigation similar to our title styles we set a background, width and height, dont forget the width and height have to be the same as your .PNG image in your images folder. Then we just want to add a top margin to bring it down a touch, importantly we want to float it to the right.

Now for our lists, and link styles for our navigation bar. We dont want any list style, setting the list style to none will get rid of the bullet points, we also want our navigation text to display inline next to each other so we use display:inline. We want our text in the middle of our navigation so ive set some padding around the items. Yours might have to be adjusted depending on how big your navigation.png image is. We then style our links and hovers for our navigation text, i wont go into to much detail on the last two styles as there self explanitory. Hit F12 on your HTML file to display it in our browser. This is how mine looks.

If you examine the PSD file you will see we also have some catchy text above our big content box, we can add this the same way we did our title.

The HTML code for the catchy text is as follows.

[sourcecode language=’html’]


[/sourcecode]

We want our catchy text to be inside the same div our big content box will be in, so we add the above content underneath the END of our navigation div. We start with an id of content which will be like our container for our big content box, then simply add our id of catchy text. Then end with our content closing div. The styles for our content and catchy text div are as follows.

[sourcecode language=’css’]
#catchy_text {
height: 55px;
width: 362px;
background-image: url(images/catchy_title.png);
background-repeat: no-repeat;
margin-top: 150px;
margin-left: 65px;
}

#content {
float: left;
width: 511px;
}
[/sourcecode]

Firstly the styles for the catchy text, the width an height relate to the image dimensions of our catchy text, dont forget you will need to create the .png image from the PSD file. The background image refers to the actual image in the images folder, we dont want it to repeat. We have then added quite a big top margin to push the whole thing down quite abit. Ive also added a left margin to center the text abit, you will see its sort of centered when we add the content box.

The content div will be like a container for our content box, we just need to float it left and add a width of 511 pixels which is how wide i want it to be. If you view your HTML file in your browser you should have something like this.

Coming on nicely ๐Ÿ™‚ dont you think…… Right this next part you need to create top, middle and bottom images from your big content box.

Quick Tip: instead of creating your bottom bit of the content box, just rotate your canvas 180 degrees on content box top image then just save it as content_box_bottom. That way your top content box will be identical to the bottom ๐Ÿ˜‰ therefor your styles will also be the same. So you’ve got your 3 individual images saved in your images folder. Lets draft it out into our HTML file.

[sourcecode language=’html’]


[/sourcecode]

You’ve already done the content div and catchy text, just add the rest. Content box top and bottom will stay the same but inbetween the content box middle div and ending div thats where your content will be. Also please note content top, middle and bottom are all classes NOT div id’s. Now for the styles.

[sourcecode language=’css’]
.content_top {
background-image: url(images/content_top.png);
background-repeat: no-repeat;
height: 16px;
width: 511px;
}

.content_middle {
background-image: url(images/content_middle.png);
background-repeat: repeat-y;
width: 471px;
padding-right: 20px;
padding-left: 20px;
line-height: 20px;
padding-top: 15px;
padding-bottom: 15px;

}

.content_bottom {
height: 16px;
width: 511px;
background-image: url(images/content_bottom.png);
background-repeat: no-repeat;
margin-bottom: 50px;
}
[/sourcecode]

The first class is the top half of the content box, it has the background image of content_top which is the top part of the big content box, we dont want it to repeat. Height and width refer to the images dimensions. The bottom class is exactly the same apart from it has a bottom margin, the margin is there to ensure there’s spacing between the box and the footer which will be underneath. Also because these styles are classes, they can be duplicated in the HTML file so you can continue to create another content box underneath if need be. The content middle class is abit different, it has a background image but repeats on the y axis (vertically) also note there is no height only the width, the width is 471 pixels, but is exactly the same as 511pixels if you add the left and right padding. You have to count the padding in with your width. If we set a height then the box wouldnt expand with the content. Also note there is some padding in all directions, this is to make the content nice and spacious, you can adjust the padding to suite if you wish.

Add some text and headers to your content middle part and check to see how it looks in your browser. Dont forget to style some head tags ๐Ÿ˜‰ They might look like this.

[sourcecode language=’css’]
h1 {
color: #3b3b3b;
font-size: 24px;
margin-bottom: 10px;
}

h2 {
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
margin-left: 5px;
line-height: 30px;
}
[/sourcecode]

Now for the sidebar, The way the sidebar is constructed is exactly the same as our content box we just created. Only the top half of our sidebar box will contain a big tag saying free quote. Split your sidebar box into 3 sections from your PSD file like we did with the content box. Once your done we’ll write it out in our HTML file.

[sourcecode language=’html’]


[/sourcecode]

We start off with a div called sidebar which will be like our sidebar container, then we have 3 classes similar to the big content box sidebar top, middle and bottom. Inbetween sidebar middle and the ending div thats where your content would go. The CSS for the sidebar is as follows.

[sourcecode language=’css’]
#sidebar {
float: right;
width: 264px;
margin-top: 75px;
}

.sidebar_top {
height: 58px;
width: 264px;
background-image: url(images/sidebar_top.png);
background-repeat: no-repeat;
}

.sidebar_middle {
background-image: url(images/sidebar_middle.png);
background-repeat: repeat-y;
width: 264px;
padding-top: 20px;
padding-bottom: 20px;
}

.sidebar_bottom {
background-image: url(images/sidebar_bottom.png);
background-repeat: no-repeat;
height: 8px;
width: 264px;
margin-bottom: 20px;
}
[/sourcecode]

So we start with our first style which is for our div of sidebar, because we want it to be on the right side of our page we float it right, we also need a margin at the top BUT not as big as the big content box as the sidebar sits slightly higher. Finally the width of the sidebar is 264pixels which should also be the size of our split images for our content box.

The last 3 class top, middle and bottom are the same as we did for the big content box but only on a small scale meaning the images arn’t as wide as the big content box., Just make sure the widths and heights of the top and bottom relate to the images in your images folder. Although the widths should most definetley be identical.



[/sourcecode]

For the footer we just create a new div called container, your content would then go between the footer and footer end div tag. The styles for our simple footer are.

[sourcecode language=’css’]
#footer {
background-color: #115579;
clear: both;
padding: 20px;
}
[/sourcecode]

We want a slighly darker background color so i used an optional background color, Importantly we added clear:both, this means we dont want anything either side of our footer. We then add some simple padding to fill out our text abit. Thats it all done simple as that. Hope you enjoyed this tutorial dont forget to subscribe to our RSS or/and twitter.

Till next time, thanks for reading.