Month: February 2009

Hello, welcome to the coding tutorial of the portfolio #10 layout. In this tutorial il explain the steps to take in slicing and coding the layout. Before attempting this tutorial i highly suggest you create the layout before hand and have it ready, you can also download the CSS layout for FREEEE using the download button above, there is no licence with the download so your free to manipulate it as you wish. (just dont rip me off and decide to sell it). The whole of the css document is well documented with every style entry comment coded on what it does.

Right lets get started, the first thing you need to do is create your template directory, just make a folder on your desktop called “portfolio” within this folder you need another folder called “images”, a blank HTML document and a blank CSS document. Once you have those in place your ready to rock and roll.

Now when i code from a PSD file i generally code from the top and work my way down and slice the images as needed. When saving your images save them as a PNG file within the images folder, and try to use a name which corrosponds with the image. Right lets take alook at our PSD and work out what we need.

Right looking at the image above we need a container div which will hold all our content in, a header wrapping div which will hold our logo and navigation, inside the header wrapper div we need a logo div and a navigation div. Then we need to set up a class for our content. Why use a CLASS and not DIV i here you say??? well a class can be repeated as many times as needed, a DIV shouldnt, a DIV should be a unique element of the site. So our HTML structure should look like this.

[sourcecode language=’html’]

[/sourcecode]

Add the following code to your HTML document, once your done with the structure of the document add the code below inbetween your HEAD tags. Without the code below your CSS style sheet will be useless.

[sourcecode language=’html’]
[/sourcecode]

Open up your styles.css document in dreamweaver ready for your styles. The first thing we need to style is the main body of our document, we want to set all margins to 0, set our default font, size and color. We also need to set our background color and image. Head over to photoshop, flattern your layers into one layer (DONT SAVE IT THOUGH), select the rectangular marquee tool and make a selection like this.

The selection should cover your topbar and background up to the footer. Copy and paste the selection to a new document and save it as “bg.png” in your images folder. Now in the step above i mentioned we need to set our background color, well the background color we need to choose is the color in which ends at the bottom of the selection. You can get the color code by using the eye dropper tool in photoshop. How it works is the background image will be displayed up until the point it ends, then the background color will take over. Right now for the CSS.

Right thats our containers sorted, now we need to add our logo or website text in our case. You can do this two ways, the 1st one is save the website text and box as an image BUT doing this means you’l have to edit the image each time you want to update your text inside the box. The 2nd way is to just slice the box into an image and add the text using CSS. Now the choice is yours on the route you take. Im going with the 2nd one as it offers the most flexability and is quickest. The way we go about it is first you need to hide all your layers on your photoshop document except the rounded see through box.

Select the rectangular marquee tool and draw a box around your rounded box, make sure you include the drop shadow, its best if you zoom in and just follow the last pixel on the drop shadow. Once you’ve made the selection just goto “image > crop” (DONT SAVE PSD FILE) save the image as “logo.png”. Now for the code.

Right you will notice height and width of the logo is the same specified in the CSS file this is important, your’s might be different though as depends on where you made the selection in the PSD cutting stage. Also the HEAD_WRAP DIV is also 90px high which also corrosponds with the logo. The head_wrap DIV is the box which will hold our logo box and navigation, there is no need for the head_wrap DIV to be any higher than our logo. We have also set a h1 tag within our logo DIV this will be the actual text of our website I.E yourname, the #logo P tag is our slogan underneath our website title. Add the following to your HTML file within the logo DIV.

[sourcecode language=’html’]

yourname

Digital Portfolio

[/sourcecode]

If you view your HTML document you should see everything display similar to your PSD file. The background, logo box, website title and slogan.

Right the next part we need to code is our navigation, firstly lets draft the navigation bar in our HTML document. Put the following code in your navigation DIV.

Thats it for the top half, save your work and test it out in your browser. Were now going to code and style our content box, dont forget the content box will be a CLASS not a DIV. Your going to need to slice your content box image, to do this you need to hide all your layers in your PSD file and leave in view the content box and the pattern, goto “edit > merge visable” (DONT SAVE PSD) draw out your selection using the rectangular marquee tool, either crop it or copy & paste to a new document then save as content_box.png

You can now add the styling to your content class, which looks like this.

The height and width refer to the actual dimension of your content_box.png image. Yours might be different depending on where you made the selection. Once you’ve added the styles above you can view the HTML file and your content box should show up. The content inside the content box will each have there own classes and will be coded like this.

The width and height in the content_thumb class will refer to the height and width of your thumbnail image, we create our thumbnail image by merging the thumbnail and thumbnail border layers as one, then simply copy and paste to a new document, save as what ever thumb.png. Right lets insert out content into our content box. We need to place our thumbnail in there, our header for the image, descriptive text and then our footer app and date.

Created In: Adobe Photoshop

Created On: 01/01/2009

[/sourcecode]

Check your HTML document in your browser you should have everything placed nicely. If you wanted to create another box for another project just copy and paste everything in the content class. so from DIV CLASS CONTENT to CLOSING DIV CLASS CONTENT then paste it underneath. You will just need to edit the thumbnail and content within the box to your new project, as easy as that.

The footer background image will refer to the footer slice, you should no how to create the footer image by now 😉 similar to how we created our background image, just make a selection about 4 pixels wide. The image will then be repeated in CSS. You just need to add your P tag in your HTML document.

[sourcecode language=’html’]

Copyright yourname | All Rights Reserved

[/sourcecode]

Thats it basically all done, dont forget you can download the FREE css template from the button at the top. Spread the word and i hope to see all your portfolios out and about 😉 you’ve got no excuse not to have one now.

ADDITIONAL STEPS

You can make your portfolio more intresting by adding abit of jquery interaction. These extra steps will get your images loading up in lightbox. The simple lightbox jquery plugin were using is by by Lokesh Dhakar, i havent really tested out alot of plugins but i no this one works and does the job. All the files needed for the lightbox are included in the download in a folder called lightbox. Just copy & paste the folder into portfolio directory. Open up your index.html file and reference the files like we do our CSS file.

[sourcecode language=’html’]
[/sourcecode]

The files are referenced find your thumbnail code and just add rel=”lightbox” within the A tag.

[sourcecode language=’html’]

[/sourcecode]

Upload your files to your server and test it out 😉 Note lightbox only works with images and you need the full size image of the thumbnail in a folder somewhere on your server.

Many thanks for reading this tutorial, dont forget to subscribe VIA twitter and our RSS feeds. Till next time.

Hello, welcome to my next tutorial on hv-designs sorry for the slight delay its been abit hectic. In this tutorial were going to be creating a simple straight to the point portfolio. Ive had tons of emails requesting for a portfolio layout. So here it is, il also be showing you how to code this layout in the next tutorial. Right lets get started, create a new document 800×750 pixels double click your background layer then press ok when the box pops up. Your background layer should now be unlocked and editable. Add this gradient overlay to your background layer.

At the top of your canvas create a rectangle about 33 pixels in height and the same width as the canvas, you can create the rectangle using the rectangular marquee tool or the rectangle tool. Fill your rectangle with any color then add these layer styles.

You should have something like this.

Select the rounded rectangle tool with a radius of 10px, Draw out a fairly decent size rectangle, move the rectangle to the top of your canvas on the left.

Right click the rectangle and goto “fill path” color doesnt matter at this time. Then select the pen tool, right click your rectangle and goto “delete path”. Add these layer styles to your rectangle.

Set layer blending mode to 50%, you should have something like this.

Inside the box add your name and the word digital portfolio, the font i used is arial with a style of black (after bold). On the right hand side in the little bar add your portfolio sections.

With the rounded rectangle tool once more create a bigish rectangle underneath everything eles.

Add these layer styles to get it looking like mine.

For this next bit we need to make a diagonal lines pattern, create a new document 25×25 pixels copy the pattern below.

Once you’ve copied the pattern got to “edit > define pattern” Close your document and head back over to your orginal document, create a new layer above your content box layer. Click the little thumbnail image in your content box layer whilst holding down the CTRL key on the keyboard this should load a selection. Select your new layer and the paint bucket tool at the top of your document change forground to pattern, select your pattern from the drop down box and fill your selection. Set layer opacity to 21% and give the pattern a white color overlay from within the layer styles window. You should have something like this.

With the rounded rectangle again create another rectangle inside your big rectangle.

Add these layer styles to your inner rectangle to match mine.

Click the thumbnail in your layers pallette on the inner rectangle layer whilst holding the CTRL key, this will load the selection. Goto “select > modify > contract”. Contract the selection by 8 pixels. Copy your desired thumbnail preview to the clipboard, now goto “edit > paste into”, your desired image will now be pasted within the boundries of your selection.

On the right side of your image add your descriptive text, title, created date and the program your created it in.

Duplicate all the content layers as required, although you only really need one as it can be duplicated using CSS when coded. Duplicate your top bar and drag to the bottom of the canvas, add your copyright information with the bar. Your end result should looke something like this.

In the next tutorial il show you how to code this into a working CSS website. See you in a day or two. Dont forget to subscrive via twitter and our RSS feeds.

Welcome to the 1st EVER competition hosted on hv-designs

*Please Note* The competition is pointless and just for fun, although for everyones efforts there is a prize for one lucky participator.

Objective:Be the first person to post the 100th comment

The Prizes:
5 PSD Files from the hv-designs online shop, chosen by the winnerOR
1 CSS Template from the hv-designs online shop, chosen by the winner

The Rules:There can only be one winner
NO Spamming
No posting under different names (il be checking)
Persons must use a valid e-mail address, failure to do so will result in no prize
There has to be a comment infront of yours before posting again
All comments must be photoshop related

Good morning fellow photoshoppers how are we today?. In this tutorial il show you how to create some galaxy type text, the inspiration behind this tutorial is “mario galaxy” on the nintendo wii. Before we start you might want to grab the PSD file from the button above and yes its FREEE to download. Included in the zip file is a galaxy image which you can use. Ive created a new document 600×400 pixels for the purpose of this tutorial, feel free to use your own size. Drag your galaxy background image onto your canvas.

Select the type tool and type out the word “galaxy” or another word that tickles your fancy. 🙂 The font im using is called “whoopass” which is also included in the zip file.

Make the text fairly big then right click your layer and goto “rasterize type”. Goto “edit > transform > perspective” drag one of the bottom corner anchor points outwards. Only need to drag it out a touch.

Label your layer “galaxy text”, now whilst holding down the ALT key on the keyboard hit the down arrow key 26 times, everytime the arrow key is press the text should shift down 1 pixel and create its very own layer. Once you have done it 26 times merge all the DUPLICATED LAYERS ONLY into one layer then move the layer underneath the layer “galaxy text”. Label your other layer “text underneath”. Add these layer styles to your “text underneath layer”.

You should hopefully have something like this.

Click the little thumbnail image in your layers pallette on the “text underneath” layer whilst holding down the CTRL button the keyboard, this should load a selection, whilst the selection is active create a new layer above your text underneath layer BUT underneath your “galaxy text layer”. Label the new layer stroke then goto “edit > stroke” use the settings below.

The reason why we did a stroke this way and not through the layer styles menu is because when you apply the stroke in the layer styles menu you get alot of jaggys, using “edit > stroke” create a much more clear line. You should have something like this.

Duplicate your “galaxy text” layer and just hide it for now as we’ll use it later. Open up the galaxy image included in the zip file in a new document, copy it to the clipboard then head back over to your orginal canvas. Click your “galaxy text” layer whilst holding down the CTRL key to load the selection then goto “edit > paste into” this should then paste your galaxy image inside your text, you can freely move the image around inside the text and even resize the image.

Position the background image so its not overly busy when your happy right click the layer with your mask on and goto “apply layer mask”. Label your layer “galaxy text inside”. Remember we duplicated our plain white galaxy text a few steps ago???…. undide that layer and drag it above your “galaxy text inside” layer. Load a selection of that text using the CTRL + Click method then goto “select > modify > contract” contract the selection by 3 pixels and hit enter. When your returned back to your canvas hit the delete key.

You should have something like the image above, now add the layer style below. Rename your layer to “text top”

Click your “galaxy inside text layer” using the CTRL + Click method to load a selection make sure your shine layer is selected in the layers pallette then goto “select > inverse” then hit the delete key, set layer opacity on the shine layer to 10%.

Zoom in on your text, create a new layer, using the rectangular marquee tool create two 1 pixel lines next to each other, Fill the 1st one with the color #bbbfc1 and the 2nd one with the color #898b8e. Place them where the creases would be if you had 3D text.

Your finished image should look like this.

Many thanks for reading the tutorial, hope you enjoyed it. Dont forget to subscrive via twitter and our RSS feeds. You can also promote this post using the share and enjoys buttons below.

Hi there welcome to another tutorial, in this tutorial il show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner. Oh yes and before i forget you can download the source files for free using the button above.

When the button is clicked it rolls out a box full of links, when the button is clicked again it rolls back in. This can be done using jquery and in this tutorial il show you how to do it. Right lets get started, firstly lets get our button done out the way so we can then focus on the code. Open up photoshop and create a new document with your desired size of button, your button can be any size your wish. Im using a size of 182 x 32 pixels, double click your background layer and add a simple gradient overlay.

On the right hand side of your button add a little white arrow and a vertical divider. The divide consists of two colors #302f2f & #252525.

On the left side add your little icon and some text, i dont think i need to go into too much detail on the button design, as you’ll make your own to suit your own site. Heres how mine looks. (save your button image into your images folder)

Now for the exciting bit open up notepad and save a blank notepad document as styles.css, save the file into a folder called sliding menu on your desktop. Once saved close notepad, open up your folder “sliding menu” create two new folders one called js and another called images. Goto the main jquery webpage and download the jquery libary “jquery-1.3.1.min.js” rename the file to just “jquery” and stick it into the folder js. Open up dreamweaver and create a new HTML file save the file straight away inside your sliding menu folder. (filename for the HTML file doesnt matter call it what you like, sliding_menu.html might be a good idea.) Now your in dreamweaver click the code view tab.

The most import thing we need to do first is reference our javascript and css files we do this by typing this chunk of code within the “HEAD TAGS”.

[sourcecode language=’html’]

[/sourcecode]

You will notice there are 3 files we have referenced styles.css, jquery.js and a third slider.js (but i havent got a slider.js file i hear you cry.) We need to create that now, open up notepad and save a blank notepad document as slider.js, save it inside your js folder. Open up your slider.js file inside dreamweaver and type out the code below.

Let me explain the code above the 1st line means when the document is loaded run the function in our case the sliding menu. The next line means once an image with a class of menu_class is clicked the menu will slide which brings me down to line 3. The menu will toggle down at a medium speed. You can change the speed if you wish from slow, medium or fast. The second and third line are important as they hold key elements refering to our CSS file which is img.menu_class and ul.the_menu. We havent wrote these yet but will do when we begin to write out our menu. Head over to your HTML in the code view so we can begin to write out our menu.

The first bit of code you see is a simple image which is our button, we specify the width and height of our button we also give it a class. The class will be the images unique anchor point for the js file which we have already wrote. The class also lets us apply any styles via css using the class .menu_class. After that we have a simple unordered list. If we take alook at our menu in our browser this is how it looks.

Open up your CSS file in dreamweaver. Lets set a few style for the main part of our document.

Just some simple text and background styling is needed, set your font family and desired font size, ive also changed the background from white to a darkish grey color. The next bit of styling were going to add is for the ordered and unordered lists, were also going to apply a border to our button image, you may do your border in photoshop on the actual image but i find it best to add it using CSS as changing abit of code is easier then opening up photoshop to change it.

In these styles you can change the width of the open menu, mine has a width of 300px but this can be what ever you like. Ive also given it a 1px border the same as our button. The next bit of styling refers to the background color of our rolled out navigation and also the text colors, sizes and hovers.

The_menu li is the color of the background when the navigation is rolled out, the text in the navigation links wont have any line underneath them as we have used text-decoration:none, we have also spaced out our links by adding 10px paddinig all the way around our links we also want to display the links in a block. The hover styles are pretty simple, padding the same as the last style, font weight bold = bold text and the color changed to a pinkish color. Thats it for the styles you menu should be ready to test. Heres mine.

Just a quick point on positioning, dont use div align to center or right align your button as the rollout will not be aligned up properly, if you want to align your menu button properly wrap it in its own div and position div how you see fit.

See what you can come up with, maybe add some icons to your list objects. Thanks for reading, dont forget to subscribe VIA rss and twitter.

Good evening everyone, this past couple of days ive been sorting out a new design for my portfolio. I’ve had loads of e-mails asking if i have one. I did have one a while back but took it offline as i wasnt really doing much design work. Well now here is the new and improved portfolio, contains ONLY my recent work as all others were lost unfortunetly. Heres a preview.

Good evening welcome to another tutorial by hv-designs, this is just a quick tutorial for you all to try for valentines day. Create a wallpaper for your loved one and secretly set it as there desktop background. 😉 You can download the PSD for this tutorial by using the button above the PSD is free to download. Right lets get started, create a new document the size you want your wallpaper to be im using 800×600 pixels just for the purpose of this tutorial. Double click your bacground layer to unlock it. Apply the gradient overlay using the settings below.

Set the color #ff5ba6 as your forground then select the custom shapes tool. Search among the shapes and find “registration target 2” (see image below) if you dont see as many shapes as me then click the little black arrow in the top right hand corner and goto “all”.

Drag the shape out as big as you can, when you get to the point your mouse wont go no further just stop and press “CTRL + T” then resize again. Right click with the pen tool and goto fill path. You should have something like this.

Add a layer mask to your shapes layer, select the gradient tool with a radial gradient. Set your forground color to white and background color to black. Drag from the middle of your shape outwards. The effect your looking is this.

With the custom shapes tool select the heart shape, drag it out in the middle of your canvas.

Add your little cupid symbols to your canvas, there is a cupid.PNG file in the PSD download that you are free to use. Place the symbols either side of the hearts, one at the top and one at the bottom. Set there layer opacity to 35%.

Add your valentines text using a nice romantic font (also included in the PSD download).

The layer styles for the text are as follows.

Select the paint brush tool and select the crosshatch brush if you dont see the crosshatch brush click the little black arrow and goto “assorted brushes”.

Toggle the brush pallette and use these settings.

Now with your brush randomly brush your sparkles over your canvas. Your final image should look something like this.

Dont forget to subscribe to our twitter and RSS feeds. Many thanks for reading see you next time. 🙂

Hello and welcome to another tutorial by the hv-designs team, in this tutorial il show you how to create a neat little patch, as in a patch on some clothes. We’l be creating everything from scratch, the material texture, stitches even a safety pin. 🙂 Right lets get started the first thing you need to do is create a document 3 times bigger as you want it, im just using 600×200 pixels for the purpose of this tutorial so i would start with 1800×600 pixels. Double click your background layer to unlock it. Doing this will allow you to add layer styles to the background layer. Add the gradient overlay and the settings in the image below.

create a new a layer above your background layer called texture. Fill this layer with a greyish color #808080. Press D on the keyboard to reset your background and forground colors. Now goto “filter > pixelate > color halftone” use the settings below.

You should have something like this. (dont get dizzy).

Now goto “filter > sketch > chalk and charcoal” use settings below.

You should have something like this.

Now goto “image > image size” and re-size your image to what you wanted in the 1st place in my case 600×200 pixels. Then goto “image > adjustments > brightness/contrast” change your brightness to -100. Also set your layer blending mode to overlay. You should hopefully have something like this.

Select the color #505050 and create two in rectangles within the canvas area, this is best done with the rectangle tool using stroke path with a 1pixel brush. (NOT RECTANGULAR MARQUEE TOOL).

Add this drop shadow to your two inner rectangle lines.

With the rectangular marquee tool make a small selection that covers both lines then hit the delete key, move the selection across then hit the delete key, do this all the way around when your finished you should have something like this.

Create a new layer above the rest and fill with the color black, reset your forground and background colors with the letter D on your keyboard. Goto “filter > render > clouds” set the clouds layer to overlay with an opacity of 50%. You should have something like this.

Select the rounded rectangle tool and the color #d6c8ae, with a radius of 10 pixels drag out a small – medium rectangle.

Click your layer with the rectangle on whilst holding down the CTRL key this should load a selection. Goto “filter > noise > add noise” enter 3% in the amount and make sure uniform and monochromatic are selected. Using the lasso tool make a crazy selection like this.

Goto “select > inverse” then hit the delete key you should be left with something like this.

To make finer rips like i have in the corner, use the “polygonal lasso tool” after you have complete the steps above. Download some crack brushes (ive had mine for a while and cant remember where i got them from) theres plenty around the internet so shouldnt be hard to find. Add some cracks to your patch, set layer opacity to 25%. Apply them using the color #9b9281.

Now you need to add your stitches to your patch, do this in the same way we did our background stitches but only use one rectangle, try and leave a few missing as we’ll be adding loose bits of cotton and our saftey pin.

Where your stiches are missing use the type tool and add some periods (….), also use the pen tool to create swirly bits of loose cotton.

For the saftey pin select the rounded rectangel and create a small rectangle. Right click with the pen tool and goto stroke path. We only need the outline for this.

Using the elliptical marquee tool create a cirlce at one end of the rectangle, use the rubber or the rectangular marquee tool to cut out a peice of the outline.

Add these layer styles to your pin.

Move your need into one of the corners where you have threads missing. Where we cut part of the saftey pin away add two lines at each end, these will look like small creates where the pin has gone through the fabric (shown in red) Its hard to see close up but when u look at 100% they are visable.

Thats it all done, hope you’ve enjoyed this tutorial. dont forget to subscribe to out twitter & RSS.

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.

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.