Business Layout #2

Create a new document 900×850, double click your background layer to unlock it, double click your background layer once more and add this layer style.

Select the rounded rectangle with a radius of 10pixels, drag out a small square, fill the square with the color white. Select the polygonal lasso tool and create a small selection on the bottom left corner. Hit the delete key to remove the selection.

Now select the elliptical marquee tool and create a small circle at the bottom of the button. Fill the circle with the color white then click your circle layer whilst holding the ctrl key to load the selection. Now goto “Select > Modify > expand” expand the selection by about 4 pixels. Now select your button layer and hit the delete key.

Add a small arrow in the middle of the circle and you should be left with this.

Merge all your layers together apart from the background layer then move your button to the top left of the canvas, duplicate as many times as need then add this drop shadow.

The result.

The next couple of steps you will need some stock images and a coffee stain brush. Find an image of a pen and a mobile phone, remove the background from them and place them on the side of the navigation bar. Load up your coffee stain brush and also add a coffee stain underneath.

Select the rounded rectangle tool and draw out a small rectangle underneath your phone and pen layer but on top of the coffee stain layer.

Add these layer styles to your rectangle to comeplete the effect.

Duplicate your rounded rectangle, drag the layer underneath your orginal, then rotate it slightly to the right. Add your contact information to the top rectangle, you should have something similar to this.

Add your business titile and logo under your navigation bar in a biggish font, im using the font arial.

This next part requires a coffee cup stock photo this one is from http://stock.d2.hu. Cut the cup from its background and place next to your coffee stain. Select the rectangular marquee tool and create a rectangle like this.

Fill with the color white, then set opacity to 40%. Add a layer mask then drag a linear gradient from the middle of the rectangle towards the right hand side, you should have something similar to this.

Add a short description about your business with the rectangle but leave some space at the bottom for some images that will be adding in a moment. Also place a more information button under your text.

Create 2 pink boxes using the color #d5979a and the rounded rectangle tool, you also need to find some business stock images, the site mentioned above has loads. also add them at the bottom of your rectangle, but be creative with the placement. See image below.

Merge your pink boxes and your stock images together, add a layer mask and drag a linear gradient over the top like we did with our rectangle. Underneath your rectangle add 2 more rounded rectangles big enough for some content, in my case some client testimonals fill with the color #eae9e4 then add a 1 pixel stroke using the color #838274.

Add your content for the two boxes and add a simple read more button. You could also find a happy business man and add that to the side of the box.

Now for the sidebar were going to add a simple search field using a white rectangle and a magnifying glass found on google images or the stock website listed above.

With the text tool add a few business articles, using the rectangle tool add a simple pink rectangle underneath the dates to make them more visable and important.

Then finally add a simple footer to complete the layout.

2D Image Into 3D Model Using Photoshop

This tutorial can only be performed in photoshop CS3.

Start off by opening your image up in photoshop, im going to use a simple cardboard box image.

Select your desired cutting tool and cut the object from the image, copy and paste the object to a layer on its own.

Select the layer your object is on then goto “filter > vanishing point”.

Once vanishing point has loaded up select this icon from the menu on the right.

Start off by clicking on the top four corners of the box one at a time, you will see its abit like the pen tool, once you have clicked the fourth corner you should be presented with a blue grid “yellow” and “red” grids are BAD. You should have something like the image below.

Now hold down the CTRL key on the keyboard, while its down drag the middle anchor point down, you should see a continuous grid being applied to the other side of the box.

You may need to adjust the grid after the above step so it align’s with the object. Now select the middle achor point on the next grid and drag to the right.

You should end up with this, the grid wont fully align with my last side of the box for some reason, but ive aligned it up as best as i can.

Once your done with the grid click the arrow at the very top of the screen by the menu and click “return 3D layer into photoshop”.

Now press ok, photoshop will do its magic and you will then be presented with 1 extra layer and a extra object.

Hide your “named layer” in my case the cardboard box layer, then double click the little thumbnail on the “temp” layer.

Now that you’ve double clicked that little thumbnail aload of new menu items are now available at the top of the screen, these options will allow you to roatate, slide, shift etc… your new object. This object can also be used in adobe flash to create cool 3D animations. Heres a quick video of my result. Enjoy.

CLICK HERE TO WATCH MY RESULT.

CSS Menu With Icons

Firstly lets create our navigation in photoshop, create a new document 600×200 pixels with a black background. Create a rectangle 600×40 pixels with rectangular marquee tool, you can create specific sizes by changing the style to “fixed size”.

Fill your navigation with the color black then add these layer styles.

You should have something like this.

Select the rectangular marquee tool again and create a selection like this.

Fill with the color white, then click on your naviagtion layer whilst holding down the ctrl key on the key board to make a selection.

Once you have made the new selection goto, “select > inverse” then hit the delete key. You should be left with this.

Lower the opacity to about 5% then add your naviagtion text.

Now select the rounded rectangle tool and create a small rectangle next to your navigtation text. The icons should be no bigger than 32×32 pixels. Althou you can make them bigger if you want you just need to adjust the CSS code when we come to code it. Add these layer styles to each of your round rectangles.

Your navigation should now look like this.

Inside the round rectangles we want to add our icons, im going to use some preset shapes in the custom shapes libary that came free with photoshop. Once you have chosen your icons and added them inside the rectangles add this outer glow.

Your navigation should looks something like this.

Looks abit cramped up, but it doesnt matter as we can set the spacing of each item in css. For this bit we need to zoom in abit, select the pen tool with the color #008aff, draw a line underneath your 1st item.

Now add this layer style to your line.

Thats it for your naviagtion, you end result should be something like this.

Now that we’ve finished we need to slice our navigation up, so go ahead and create a new folder on your desktop called navigation, then inside that folder create another 2 folders called “icon_images” and “navigation”. Inside the “icon_images” folder we need to save each icon as seperate images dont forget they need to be 32×32 pixels and on a transparent background, save each of them as .PNG files. Heres mine.

We also need 2 chunks of our navigation one being the main background and the other one being the mouseover. Head back over to your naviagtion which should still be in photoshop, hide all your layers apart from your main navigation and the mouse over.

Make each seperate image 300 pixels wide, you may need to stretch your mouse over line over more so it fits like the image below. Save these 2 files as “nav_background” and “nav_hover”.

Next you need to create an empty text file and save it as styles.css in your root naviagtion folder. After you’ve done that its time to open dreamweaver. Create a new html document and straight away save it as index.html or whatever you want to call it save the file in your root folder with your styles.css file. Edit your title text and link your style sheet.

[sourcecode language=’html’]

[/sourcecode]

After this bit of code we need to map out our navigation using the standard UL and LI tags which looks like this.

[sourcecode language=’html’]

[/sourcecode]

You will notice that next to each link there is a “EM CLASS” this will refer to our icons in the style sheet. You will also notice like the 1st navigation tutorial we have set “LI CLASS CURRENT” which basically means the link on the navigation will stay in mouseover state for that certain page.

So you HTML code should look like this.

[sourcecode language=’html’]

 

[/sourcecode]

Thats all the HTML code we need, so now head over to your styles.css file. At the top of your css file add a comment code, which looks like this /* NAVIGATION ELEMENTS */ after that we start to add our navigation css rules.

[sourcecode language=’css’]
.navigation {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:40px;
background:#1841c8 url(navigation/nav_background.gif);
}
[/sourcecode]

padding:0 0 0 20px = A shorthand property for setting all of the padding properties in one declaration.
margin:0 = A shorthand property for setting the margin properties in one declaration.
list-style:none = removes the bullets from the list.
height:40px = height of our navigation bar.
background:#000000 url(navigation/nav_background.gif) = sets our naviagtion background color to black, and also sets the background of our navigation which refers to our image we created in photoshop.

Our next bit of css code is.

[sourcecode language=’css’]
.navigation li {
float:left;
}
.navigation li a {
display:block;
float:left;
height:40px;
line-height:40px;
color:#FFFFFF;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
font-size:11px;
}
.navigation li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
[/sourcecode]

float:left = The float property sets where an image or a text will appear in another element. In our case left.
display:block = The element will be displayed as a block-level element, with a line break before and after the element.
line-height:40px = The line-height property sets the distance between lines.
color:#FFFFFF = Color #ffffff is white.
text-decoration:none = Defines normal text.

The next bit of css defines our “current” class and “mouseover” image.

[sourcecode language=’css’]
.navigation li.current a {
color:#FFFFFF;
background:url(navigation/nav_hover.gif);
}
.navigation li a:hover {
color:#00CCFF;
background: url(navigation/nav_hover.gif);
}
.navigation li a em {
display:block;
float:left;
width:30px;
height:40px;
}
[/sourcecode]

Take note of the background: URL as the links relate to our mouse over image we created in photoshop. Also double check your image paths which is something i should of mentioned ealier, if you images dont show when we text in the browser then more than likely it will be the image path.

The last bit off css code is for our icons. Again dont for get to comment code /* ICON ELEMENTS */.

[sourcecode language=’css’]
/* ICON ELEMENTS */

.navigation li a em.home {
background-image: url(nav_icons/home.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.templates {
background-image: url(nav_icons/templates.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.psd {
background-image: url(nav_icons/psd.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.tutorials {
background-image: url(nav_icons/tutorials.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.shop {
background-image: url(nav_icons/shop.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.contact {
background-image: url(nav_icons/contact.png);
background-repeat: no-repeat;
background-position: center center;
}
[/sourcecode]

Were only setting 3 simple rules for each of our icons as most of the important stuff is inherited from the other CSS RULES. The most important again is our individual images or icons that we made previously. If you look at our HTML code in our links you will see each icon has its own individual class that relates to there own snippet of code in the css file.

To see the navigation bar live, click HERE

Web Design Layout #7

Create a new document 850×1000 pixels, fill your background layer with the color black. Select the rectangular marquee tool and create a rectangle about 760 pixels wide and about 290 pixels high, fill the rectangle with the color black then add this stroke to it.

Using the rounded rectangle create another rectangle above it about 45 pixels high but the same width as the 1st rectangle, fill with the color black. Place at the top of your 1st rectangle (see image below, ive marked the rectangle as a selection, with it being so dark its hard to see).

Add these layer styles to your rounded rectangle.

You cant actually see alot so theres no screenshot of this step. You’ll see more detail as the tutorial goes on. On the rounded rectangle add a rounded shine at the top, and add your navigation text.

Inbetween your navigation text add two 1 pixel lines next to each other, to create a divider.

Select the magnify tool and zoom right in on the naviagtion, create a 1 pixel line across the bottom of the navigation bar using the pen tool or the pencil tool in the color #aa4282. Add this outer glow to your line.

Next add a mask to your line and drag a reflected gradient over the top, dragging from the middle outwards to either the left or the right, you should have something like this.

Next find a cool abstract image or a good photoshoped image of yourself, im going to use a wallpaper found HERE. Add your desired image to your square rectangle your created earlier.

Now add a small description about your site to the right of the image. Once you have done that select the pen tool and create a selection like this.

Fill with the color white, lower opacity to around 10%, add a layer mask, then drag a linear gradient over the top to blend it in abit. Your final image should look like this.

With the rounded rectangle tool create a further 2 boxes underneath your square rectangle, Copy/Paste the layer styles from the square rectangle to the two new rounded rectangles.

Label your content boxes with your content.

The little pink icons were made using the rounded rectangle tool and just a plus sign on the keyboard in the type tool. The layer styles for the pink box are.

Add your content to each of your content boxes.

In the last little abit of space thats left add your footer, Duplicate the navigation elements apart from the dividers and the navigation text, drag to the bottom of your canvas then add your copyright/footer text.

Thats it all done.

Simple CSS Menu

Firstly lets create our simple navigation in photoshop, select the rectangular marquee tool and create your navigation, make it about 600 x 50 pixels you can create a fixed size rectangle by changing the style setting at the top of the screen.

Fill your rectangle with any color than add these layer styles to it.

Yout navigation should look like this.

Now using the text tool add your navigation text, of course we will be adding the text to our navigation in html, this is just so we no it looks ok.

Now on our navigation id like to add some sort of a rollover, so select the rectangular marquee tool and create a box under your text layer, im using the color #e1e1e1.

The rollover aint finished yet 🙂 now add to triangle top and bottom of the navigation.

Thats it for the designing part, we will now code it in css to use for a website. You might want to save your PSD file at this point incase you need to use it again. After you have saved it hide your text layer, then goto “layer > merge visable”. Believe it or not we only need two images to create this navigation in css. Zoom in pretty close with the magnify tool then select the rectangular marquee tool and create a selection like this.

The dimensions for the selection are 1pixel wide and 50 pixel’s in height and the selection starts right at the top of the stroke and ends just as your drop shadow disapears. Create a new folder on your desktop called naviagtion, open your folder then create another new folder called “images”. Head back over to photoshop then press “ctrl + c” to copy your selection, then goto “file > new” press ok, your dimentions of selection should automatically be entered into the new dialog box. Just goto “edit > paste”. Now goto “file > save for web & devices” or if your using cs2 it will say “save for the web”. Navigate over to your folder and save it as “silver_nav_background.gif”.

Thats our first image, now lets create our 2nd image create a new document 200×50 pixels. Re-create your mouse over look.

Once you have re-created it goto “file > save for web & devices” or if your using cs2 it will say “save for the web”. Navigate over to your folder and save it as “silver_nav_mouseover.gif”.

Thats all we need to do in photoshop, head over to your naviagtion folder, backout of the images folder then open up notepad. Once it opens just goto “file > save as” and save it as style.css (DONT FORGET TO ADD THE .CSS part in the filename). Open up dreamweaver and create a new HTML document, also got “file > open” and open the style to css text file your prevously created. You should have to two pages open now in dreamweaver, you can switch between the two pages by clicking these two buttons.

Click your HTML page and click “code” to see the code view of that document. You’l be presented with this code.

[sourcecode language=’html’]




Untitled Document




[/sourcecode]

We can leave all that just change the title where it says “Untitled Document”, Change to what ever you want il call mine navigation tutorial. Inbetween the “BODY” tags mark out your naviagtion to do this we add our starting DIV tags and create our text and links.

[sourcecode language=’html’]

[/sourcecode]

You will notice in the HTML code above in the 1st link there is a “class=current” this means when you change pages the rollover will stay active for that specific page. You will have to add the class to each link on there own pages. We have also got to add some css in the style sheet for it to work.

You webpage should look like this in dreamweaver at this stage.

Thats all we need for the naviagtion, we just need to add one more bit of code. Inbetween the “HEAD” tags add this little bit of code.

[sourcecode language=’css’] [/sourcecode]

This snippet of code attches our style sheet to the HTML document. You HTML document should now look like this.

[sourcecode language=’html’]




Navigation Tutorial | HV-Designs.co.uk



[/sourcecode]

Save your HTML file as index.html in your naviagtion folder on your desktop. Now open your CSS file and add this at the very top of your file.

[sourcecode language=’css’]
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
}
[/sourcecode]

This bit of css sets the margins around the page also known as the “BODY”, we want our navigation to go right to the end of our browser so it looks nice and neat, the only margin we need is the top margin which is set at 20pixels. Now add this underneath your body item.

[sourcecode language=’css’]
/* ———————- silver nav ———————- */
.silver #nav{
position:relative;
display:block;
height:50px;
font-size:11px;
font-weight:normal;
background:transparent url(images/silver_nav_background.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
text-transform:uppercase;
}
[/sourcecode]

The code above means.

position:relative = The position property places an element in a static, relative, absolute or fixed position.
display:block = The element will be displayed as a block-level element, with a line break before and after the element.
height:50px = Height of the navigation, this needs to be changed if your navigation images arn’t 50 pixels high.
font-size:11px = Sets the size of the text to 11pixels.
font-weight:normal = bold or not.
background:transparent url(images/silver_nav_background.gif) repeat-x top left = This part is IMPORTANT as it sets our navigation background image in our case the image we created within photoshop.
font-family:Arial,Verdana,Helvitica,sans-serif = Fonts to use.
text-transform:uppercase = Text is all in capitals.

Your navigation should now look like this.

Now add,

[sourcecode language=’css’]
.silver #nav ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}
[/sourcecode]

The code above means.

margin:0px = Margin around the unordered list.
padding:0 = Padding around the unordered list.
list-style-type:none = The listStyle property sets all list properties in one declaration.
width:auto = Wdith of the unordered list is set to auto so the its centered no matter what size the browser window is.

Now add,

[sourcecode language=’css’]
.silver #nav ul li{
display:block;
float:left;
margin:0 1px 0 0;
}
.silver #nav ul li a{
display:block;
float:left;
color:#3A3A3A;
text-decoration:none;
padding:14px 22px 0 22px;
height:28px;
}
[/sourcecode]

A breakdown of the above styles listed below.

display:block = The element will be displayed as a block-level element, with a line break before and after the element.
float:left = The float property sets where an image or a text will appear in another element.
color:#3A3A3A = The color of our text in a normal state.

And finally add,

[sourcecode language=’css’]
.silver #nav ul li a:hover,.silver #nav ul li a.current{
color:#333333;
background:transparent url(images/silver_nav_mouseover.gif) no-repeat top center;
}
/* ———————- END silver nav ———————- */
[/sourcecode]

This is where we set our mouseover image and activate the “current” class that i was talking about at the start of the tutorial. If you save your style sheet and open your HTML file you should have something like this *(CHECK LINK BELOW)*

VIEW FINISHED MENU.

Futuristic Layout #2

Create a new document 850×850 pixels with a black background. Select the polygonal lasso tool and create a shape like this.

Fill with the color white, but leave the selection still selected. While its still selected head over to the channels pallette and click save selection as channel.

Once you have clicked the save selection as channel button you should have a another layer called “alpha1? select it, press ctrl + D to deselect the selection, then goto filter > blur > guassian blur, blur by 10 pixels. You should be left with this.

Press CTRL + L to open the levels panel, drag the 3 trianglar points into the middle, you will notice the blured shape sharpens and becomes more rounded.

Click your “alpha1? layer whilst holding down the ctrl key on the keyboard to load a new selection. Click back to your layers pallette, create a new layer then fill the selection with the color white. Delete your other layer you created previously with the polygonal lasso tool. Add these layer styles to your new shape.

Move your shape to the very top of your canvas and your result should look similar to this.

Create a white rectangle with the opacity at 10% across the top half of the shape.

Select the colors #232323 and #383838 and create two 1 pixel lines on the navigation shape. Duplicate the lines across both end of the navigation.

Add your navigation text and site title/logo/slogan to your shape. (color code for the blue text is #1a88e4).

Select the eliptical marquee tool and create 2 blue circles using the color code #1a88e4, place them under your shape on the bends where it sticks out.

Goto “filter > blur > guassian blur” and blur them by a couple of pixels, to give them a soft glow effect. Your end result should look something like this.

Next create to shapes similar to this.

Blur the shapes by 15 pixels. Once you have blured them add a layer mask and drag a linear gradient over the top to blend them in abit, you can also lower opacity if you need to… your trying to archieve an effect like this.

Again using the color #1a88e4 add a 1pixel line underneath each navigation item.

Select the rounded rectangle tool with a radius of 10 create a big box underneath your naviagtion and add these layer styles.

Next add your logo but a much bigger version inside the box, then add abit of information about your company.

The little blue arrow by the about us text and the white arrow by the more info text where icons used from adobes custom shapes libary, and the blue light in the corner was made by create a small rectangle then adding this outer glow.

Next create another two boxes underneath the big one, add the same layer styles as thye big box, and add the little light in the corners.

Begin to add your content to your other two boxes.

Finally duplicate all of your header/navigation elements, flip it vertically by going to “edit > transform > flip vertical” then move it to the very bottom. Delete your nav text, site title etc.. and replace with your footer information. Also using adobes custom shapes i add two more buttons.

Thats it all done, hope you enjoyed this tutorial, dont forget to social bookmark it 🙂

Design Studio Layout Tutorial

Create a new document 1200 x 1500, fill your background layer with the color #e9e3c9. Select the rectangular marquee tool and add a big rectangle the width of your canvas at the top. Fill with any color then add these layer styles.

You should have something like this.

Add your website title, slogan and logo to the top of your header, also to the right of your title etc… add a small brief summary about your company.

The layer styles for my title text are.

To make the logo, select the rounded rectangle tool, with a radius of 20pixels. Draw out your rectangle, fill with any color then add these layer styles.

Once you have add your layer styles add your logo in the middle.

Next select the rectangular marquee tool, draw out a smallish rectangle the width of your canvas, again fill with any color. Copy your header title text layer styles to your rectangle, disable the drop shadow. You should have something like this.

Add some navigation text. But color one of them white.

The reason why we left one of them white is because there will be 2nd navigation bar underneath. Create two 1pixel lines next to each other like this.

Your navigation should now look like this.

Select the rectangular marquee tool and make a selection over your white bit of text, make sure the layer is behind the text. Fill with the color #9bcd00. Next make a smaller rectangle across half of the button, fill with the color white, lower the opacity to about 20%. Your button should now have a matching shine.

Using the same method add another navigation underneath, use the same color.

Now add your 2nd naviagtion text. Thats the navigation done, underneath your navigation were going to add 3 featured important posts. Using the same method for creating our site logo add 3 logos for our featured posts.

The icons were made using adobes custom shapes libary. Now add some text to represent each post, also add a divider seperating each one of the posts.

Now select the rectangular marquee tool once more and create a big box for our main content. Fill with the color #a9a282 and add a stroke using the color #7c6c4b.

Inside the big box add a further 4 boxes, which should comprise of our main post content and post content footer.

Format the boxes with text and our thumbnails to look like blog posts.

Continue to add your prefered wordpress items. I wont go into to much detail here as its mainly text and simple boxes.

Finally select the rectangular marquee tool once again and basically mirror the header, copy and paste the title, logo and slogan also add your copyright information.

Finished.