PVM Garage » Mohammad Jeprie

Design a One Page Portfolio Site in Photoshop – Part 2 Coding

Mohammad Jeprie — Sat, 26 Nov 2011 01:52:24 +0000

This is second part of designing a one page portfolio tutorial series. In the first tutorial, we had created a simple and elegant Portfolio PSD mockup. Now, we’ll convert the PSD to a HTML5 and CSS3 with some jQuery goodness. Make sure you have read the first tutorial and make the design in Photoshop, or you can just grab the final PSD mockup from there.

Take a look at our PSD mockup first. Our portfolio design has a simple one column page with a large white-space, big and bold header, a slider to put some portfolio items, and a contact form on the footer. We’ll play around with some fancy CSS3 effects like text-shadow on the header, semi-transparent background on the navigation menu and border-radius on the portfolio slider and contact form. We’ll also use a jQuery slider plugin named slides.js to create the slider. Let’s get started!

Final Result

Click on the image below to see the final design in HTML.

Step 1: File Structure

Create a new directory in your computer and give it a name whatever you like. Inside this newly created directory, create another directory called img to put all the images that we extracted from PSD file.

Grab Slides.js and place it inside the directory.

Step 2: Exporting the image files from PSD

Before we started coding, we need to export all the necessary images from the mockup such as background, portfolio items, and social media icon.

1. Background

Activate Zoom tool and click several times on the canvas to maximum magnification. Create a selection using crop tool. Click menu File > Save for Web and Device (Ctrl + Shift + Alt + S) and save it as bg.jpg in the img directory.

2. Slider Background

Head over tothe slider area and make a selection on the portfolio background using crop tool. Save it as detail_bg.png.

3. Portfolio Items

Create selection around the portfolio image and save it as items1.jpg. Grab the other image by switching the layer visibility on the item and save each item as items2.jpg and items3.jpg.

4. Slider Navigation

First, convert the circle shape to smart object by right clicking on the layer and select Convert to Smart Object. This way, we can select the layer and its layer styles. Create guide around our newly created smart object. Make selection with crop tool along the guide. Hide background layer to get a transparent background and save it as PNG-transparent file named nav.png. Repeat this step on the active state circle shape, save it as nav_a.png.

5. Separator

Merge all layers inside layer group “separator” by right clicking it and select Merge Layers. Then create guide around the merged layer. Create selection with crop tool and then hide the background layer. Save it as separator.png.

6. Social Icon

We will export all social icons as a single image instead of separate images, we’ll then use CSS sprite to separate the icons in the webpage. Shift the position of each icon until there are no gap between each icon, then create selection with crop tool after hiding the background layer. Save it as social.png.

7. Submit Button

Merge submit button shape and text into a single layer and then create guide around the new layer. Create selection with crop tool after hiding the background layer and save as submit.png.

Step 3: Basic Structure

We’re done with the images, now grab a coffee and let’s start on the coding. Open up your favorite code editor and write our first HTML markup.




	
	My Awesome Portfolio

Our HTML begins with typical document structure consisting of doctype, link to stylesheet file, link to jQuery slider and jQuery library from Google API, and an HTML5 hacks script for IE. We’re also embedding a google webfont, Lobster, with WebFont loader (personally I like this method because I can adjust how things look during and after font loading by defining CSS rules).

The CSS style begins with a simple reset to get rid the browser default style, and then some basic setting such as typography, color and background image.

/* ----- Resetting CSS ------ */

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/* ----- Layout ------ */

body {
	background:#c6c6c6 url(img/bg.png);
	color:#444;
	font-family:helvetica,arial,sans-serif;
}

Step 4: The Navigation

Our first element in the markup is the top navigation. We’ll use

element as our navigation wrapper and then place the menu as an unordered list. Since our page is just a single page, the menu works as a shortcut to jump to element that matched with the ID’s that we specify in the menu.


	
		Home
		Portfolio
		About
		Contact

Step 5: CSS

As in the mockup, our navigation menu has 37 px height and 5 px border in the bottom with a semi-transparent background. We’ll also make the navigation position static, to keep the navigation at the top of page when we scroll down the page.

nav#top {
	background:rgba(68,68,68,.5);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#55444444', EndColorStr='#55444444'); /* IE specific hacks to make transparent background */
	background-clip:content-box;
	border-bottom:5px solid rgba(255,255,255,.5);
	box-shadow:0 0 5px rgba(0,0,0,.5);
	font-size:16px;
	height: 37px;
	line-height:37px;
	position:fixed;
	top:0;
	width:100%;
	z-index:100;
}
	nav#top ul {
		list-style:none;
		margin:0 auto;
		text-align:center;
		width:780px;
	}
		nav#top li {
			display:inline;
			padding:0 20px;
		}
		nav#top a {
			color:#fff;
			text-decoration:none;
		}

Step 6: The Header

The next element is the header and a short introductory sentence. The syntax is pretty simple, we’ll use a

element to wrap the title and tagline, and then use

on the introductory sentence.

John Doe

designer by day, superhero by night

I am a web and graphic designer. I design interface for web and mobile apps.

Our site title design have a nice 1 px border and text-shadow to make the title stand out. Fortunately, we can make this effect with just using CSS3 text-shadow. We’ll also use text-shadow to make letterpress effect on the rest of the design.

header {
	padding:102px 0 130px;
	text-align:center;
}
header h1 {
	font-family:'Lobster', Georgia, Serif;
	font-size:64px;
}
header h1 a {
	color:#fff;
	text-decoration:none;
	text-shadow:
		3px 3px 0 #444,
		1px 1px 0 #444,
		-1px 1px 0 #444,
		1px -1px 0 #444,
		-1px -1px 0 #444
	;
}
header h1:hover {
	opacity:.8;
	filter:alpha(opacity=80);
}
header h2 {
	font-size:14px;
	line-height:2;
	text-shadow:1px 1px 0 #fff;
}

p.hello {
	font-size:30px;
	font-weight:bold;
	line-height:1.2;
	margin:0 auto 100px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
	width:620px;
}

Step 7: The Slider

Now, we move to Slider section. We’ll use a

as a container of the slider. Inside this container we’ll place an

title and a series of our slider items. Don’t forget to add separator before and after the slider.




	Featured Project
	
		
			
				
			
			
				News Icon
				Icon Design
			
		
		
			
				
			
			
				Go Design
				Logo Design
			
		
		
			
				
			
			
				Desain Digital
				Web Design

To make the slider works, we’ll need to initialize Slidejs by adding a script inside the element. Place this following script below the Google Webfont script.

$(function(){
	$("#portfolio").slides({
		container: 'slider',
		slideSpeed: 500,
		play: 4000
	});
  });

Let’s add style to the slider. Our slider container will have an 8 px rounded corner and a little shadow. We’ll also add a 70 px top and bottom padding to create large white-space. Slidejs automatically generate pagination to the slider, so we also need to style them using graphic circle from our PSD.

.separator {
	background:transparent url(img/separator.png);
	display:block;
	margin:0 auto;
	height:28px;
	width:780px;
}
section#portfolio {
	margin:0 auto;
	padding:70px 0;
	width:778px;
}
h3 {
	font-family:'Lobster', Georgia, Serif;
	font-size:36px;
	margin-bottom:25px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
}
section#portfolio .slider {
	border-radius:8px;
	box-shadow:0 0 5px rgba(0,0,0,.5);
	display:block;
	height:414px;
	width:778px;
	margin-bottom:30px;
}
section#portfolio .items {
	background:#444;
	border-radius:8px;
	border:5px solid #fff;
	margin-bottom:30px;
	height:404px;
	width:768px;
}
section#portfolio .items figure img {
	display:block;
}
section#portfolio .items .details {
	background:#7e7e7e url(img/detail_bg.png);
	height:49px;
	line-height:55px;
}
section#portfolio .items .details a {
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
section#portfolio .items .details a.name {
	float:left;
	margin-left:10px;
}
section#portfolio .items .details a.category {
	float:right;
	margin-right:10px;
}
ul.pagination {
	list-style:none;
	text-align:center;
}
ul.pagination li {
	display:inline-block;
}
ul.pagination li a {
	background:transparent url(img/nav.png);
	display:block;
	height:18px;
	margin:0 5px;
	width:15px;
	text-indent:-9999px;
}
ul.pagination li.current a {
	background:transparent url(img/nav_a.png);
}

Here’s a preview of our current work.

Step 8: About Section

We’re done with the slider, so let’s jump to About Section. We’ll use

again as the wrapper of the content and place some text and social media link inside the wrapper. Don’t forget to place separator after the section.


	Meet The Hero
	I'm John Doe, a web & graphic designer. As a web designer, I am best known for making some kickass website. As a graphic designer, especially icon design, my work was used by one of the largest social network on earth, Twitter.
	If you want to know more about me, you can reach me via contact form below or one of these social network.
	
		Facebook
		LinkedIn
		Twitter
		Last FM
		Blog

We’ll transform the social media link into a nice icon that we have created before. Since the icons is wrapped in a single file, we need to configure each icon position to match the correct link by modify the background position. This method is called CSS Sprite.

section#about {
	margin:auto;
	padding:70px 0;
	text-align:center;
	width:460px;
}
section#about p {
	font-size:14px;
	line-height:18px;
	margin-bottom:18px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
}
.social {
	display:block
}
.social a {
	background:transparent url(img/social.png);
	display:inline-block;
	height:30px;
	width:33px;
	text-indent:-9999px;
}
.social a:hover {
	opacity:.7;
}

/* CSS Sprite */
.social a.fb {
	background-position:0 0;
}
.social a.linkedin {
	background-position:133px 0;
}
.social a.twitter {
	background-position:100px 0;
}
.social a.lastfm {
	background-position:67px 0;
}
.social a.wp {
	background-position:33px 0;
}

Step 9: Contact Form

Our last element is the contact form. As usual, contact form is just a series of some input text, a text area and a submit button wrapped in a

container.


	Drop Me a Line
	
		
			Your Name
			
		
		
			Your Email Adress
			
		
		
			Message Subject
			
		
		
			Message Text

Each form will have a rounded corners and dark grey background, while the submit button is replaced with graphic image that we exported from photoshop earlier.

section#contact {
	margin:auto;
	padding:70px 0;
	width:460px;
	text-align:center;
}
section#contact form div {
	display:block;
	margin-bottom:35px;
}
section#contact form div label {
	display:block;
	font-size:14px;
	margin-bottom:8px;
	text-shadow:1px 1px 0 #fff;
}
section#contact form div input {
	background:#444;
	border-radius:5px;
	color:#fff;
	margin:auto;
	padding:0 5px;
	height:35px;
	text-align:center;
	width:290px;
}
section#contact form div textarea {
	background:#444;
	border-radius:5px;
	color:#fff;
	margin:auto;
	padding:5px;
	text-align:left;
	height:240px;
	width:450px;
}
section#contact form input {
	background:transparent url(img/submit.png);
	cursor:pointer;
	display:block;
	margin:auto;
	height:38px;
	text-align:center;
	text-indent:-9999px;
	width:145px;
}
section#contact form input:hover, section#contact form input:focus {
	opacity:.7;
}

Step 10: Final Touch

Actually, our portfolio is already done and works well. But we still need to add one final touch to make our site more fancy. We’ll add a jQuery scrolling effect to make a smooth scrolling on our navigation menu. Place this script inside element.

$(document).ready(function(){
	$('a[href*=#]').click(function() {
		if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,")
		&& location.hostname == this.hostname) {
			var $target = $(this.hash);
			$target = $target.length && $target
			|| $('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				$('html,body')
				.animate({scrollTop: targetOffset}, 1000);
				return false;
			}
		}
	});
});

Final Result

We’re finally finished coding this portfolio. I hope you enjoy the tutorial. Click on the image below to see the final design in HTML.

Download Link

Download One Page Portfolio (HTML)

Design a One Page Portfolio Site in Photoshop

Mohammad Jeprie — Fri, 25 Nov 2011 13:03:34 +0000

In this tutorial, we will learn to design a one page portfolio site in Photoshop. In the process we will use subtle pattern and lots of layer styles to make a simple and interesting design. Let’s get started!

This tutorial is a collaboration with a young and talented web designer from Indonesia, Aris FM.

Preview

Click on the image below to see it in full size.

Step 1

Open Photoshop. Click File > New or hit Ctrl + N to make a new file. In the dialog bos, set its size to 1340 × 2598 px.

Step 2

Make new layer. Click foreground color on toolbox and change its color to #c5c5c5. Hit Alt + Delete to fill it with foreground color.

Step 3: Make Pattern

Make new file with size 6 x 6 px..

Step 4

Set foreground color to default, black, by pressing D. Activate Brush tool with brush size 1 px. Make new layer and then draw two diagonal lines as seen below.

Step 5

Click eye icon on front of Background layer to hide it. Click Edit > Define Pattern to save the picture as a pattern.

Step 6

Let’s return to our site design. Activate background layer we have just made in Step 2. Double click layer and add Pattern Overlay. Select pattern that we have just created.

Here’s the result of our background in 100% magnification.

Step 7: Guides

Reveal ruler by pressing Ctrl + R. Click and drag from vertical ruler onto the canvas to make new guide. Place the guides on 280 px and 1060 px.

Step 8: Main Menu

Draw a rectangle shape with color: #434343 on top of the site. Make sure to make it big enough until its top, left, and right sides are outside the canvas. Set its layer Opacity to 50%.

Step 9

Double click rectangle shape layer to open Layer Style dialog box. Add Drop Shadow and Stroke with following settings.

This is the difference with and without Layer Style.

Step 10

Use type tool to write main menu.

Step 11: Main Content

Start writing main content of this site, the owner’s name. We are using free Lobster font.

Double click text layer. Add Drop Shadow and Stroke.

Step 12

Add subtitle. Add layer style drop shadow to add letterpress effect onto the text.

Step 13

Add a slogan that define the site owner’s principle. Again, add same layer style to add letterpress effect.

Step 14: Separator

We’re done with main content section. Before adding another section, we need to make a custom shape separator between each section.

Activate Custom Shape tool. From the option bar activate shape layer and select indicated shape below.

Step 15

Click and drag on the canvas to draw the shape.

Step 16

Select another shape from the option bar. Shift-drag to add shape onto the layer shape.

Step 17

Select shape we have just created with Path Selection tool. Alt-drag shape to duplicate it. Perform transformation (Ctrl + T), right click and select Flip Vertical.

Step 18

Repeat previous step, this time to all shapes. Select all shapes and then Alt-drag to duplicate them. Transform (Ctrl + T), right click and choose Flip Horizontal.

Add following Drop Shadow onto the shape.

This is the result after adding Layer Style.

Step 19

Let’s hide the custom shape layer by clicking on its eye icon. Use Pencil tool to draw two 1 px lines, black and white, in a separate layers.

Step 20

Set black line layer Opacity to 40% and white line layer Opacity to 60%.

Step 21

Place both lines into a group layer, by selecting both of it and hit Ctrl + G. Alt-click Add Layer Mask icon to hide both lines. Activate brush tool. Use big and soft brush. Paint indicated areas with white.

Step 22

Reveal custom shape that we have made earlier.

Step 23: Featured Project

Write title of the next section.

Add following Drop Shadow to add letterpress effect.

Step 24

Draw a rounded rectangle under the title. Make sure it fits the content width.

Add Drop Shadow and Stroke with following settings.

Below is the result.

Step 25

Paste a picture on top of the shape. Convert it to Clipping Mask by pressing Ctrl + Alt + G. This will force the picture goes inside the shape.

Step 26

Draw a rectangle on lower part of the shape. Convert it to Clipping Mask (Ctrl + Alt + G). Add following layer style Gradient Overlay.

Step 27

Draw a 1 px line with color #939393. Add a Drop Shadow.

Step 27

Add project title and its category.

Add Drop Shadow to give it 3D appearance.

Step 28

Add more pictures for another project.

Step 29

Draw a small circle shape for slide navigation.

Add following Drop Shadow, Gradient Overlay, and Stroke.

Here’s the result after adding Layer Style.

Step 30

Activate Move tool. Alt-drag the circle twice to duplicate it.

Step 31

Select one of the circle. We need to change its appearance for active condition. Edit layer style with following settings.

And below is the slide navigation with one of them in active condition.

Step 32: Section Owner Description

Let’s continue working on next section. Duplicate section separator. Add section title and make sure to use layer style settings as the previous section title on Step 23. Add short description about the site owner.

Step 33: Add Social Network Icons

Grab some social network icons. Place them under the owner short description. In layers panel, select all their layers by clicking on first layer and then Shift-click the last one.

Step 34

Activate Move tool. From the option bar, click Align vertical centers and Distribute horizontal centers to perfectly align all the icons and distribute them equally.

Step 35: Section Contact

Before moving on to next section. Let’s duplicate the separator first. Alt-drag the separator to duplicate it.

Step 36

Add section title. Make sure to consistent using same layer style as the other section title.

Step 37

Draw simple rounded rectangle for the contact form input box. On top of each input box add clear description.

Step 38

Let’s working on its submit button. Draw another rounded rectangle shape but this time use lighter color.

Draw following layer styles.

We add subtle noise inside the button using Inner Glow. notice that in the setting we use small Opacity, max out the Noise setting to 100%, and increase the Size setting.

Below is our button.

Step 39

Write Submit on the button. Add layer style Drop Shadow to make it 3D.

Final Result

We’re done with this design. Click on the image below to see it in full size. Don’t missed next tutorial, because we will convert this design into a functional HTML page, complete with its image slide.

Download File PSD

Download file PSD

Draw a Realistic Wacom Bamboo Tablet – Part 2: Photoshop Tutorial

Mohammad Jeprie — Thu, 03 Nov 2011 21:21:47 +0000

Draw a Realistic Wacom Bamboo in Illustrator and Photoshop – Part 2

In this second part of the tutorial, we are going to draw a realistic Wacom Bamboo. Make sure to read the first part, drawing the path in Illustrator.

Preview

Below is the final result of this tutorial.

Resourse Used

Following resource is used in this tutorial:

Fabric Patterns

Step 1: Import Vector Path from Illustrator

Select all the paths we have made in Illustrator. Copy (Ctrl + C) and then paste it (Ctrl + V) in Photoshop.

In Photoshop, you will get a dialog box asking type of paste that you want. Because we want to export the vector path, we choose Path.

All the paths is now imported in a new path. You can find them inside Paths panel. Double click the path and change its name.

Step 2: Wacom Main Shape

Select wacom main shape path. Copy and then paste it on a new path. Click black and white icon on Layers panel to add new Adjustment Layer. Select Solid Color and set its color to #222327.

Step 3

Make new layer on top of previous shape. Fill it with white. Set its blend mode to Multiply. Convert it to Clipping by pressing Ctrl + Alt + G. Click Filter > Noise > Add Noise.

Step 4

Below is our result. The shape now has subtle texture on its surface. If your texture is not enough, you can simply duplicate the layer by pressing Ctrl + J.

Step 5

Make new layer. Set foregound color to white. Activate brush tool. Paint some highlights on indicated areas below. To get best result, make sure to paint patiently using low Opacity brush.

Step 6

Select inner shape of the wacom and paste it on a new path. Add new Adjustment Layer with color #111113.

Add following Layer Styles.

Step 7

Select main pad area path. Paste it on new path and add new Adjustment Layer Solid Color with color: #111113.

Again, add Layer Style Bevel and Emboss and Gradient Overlay.

Step 8

Hit Ctrl + J to duplicate the shape. Transform (Ctrl + T) it to 99% of its original size.

We still use previous Layer Style settings. But, this time set Direction on Bevel and Emboss to Up.

Here’s our current result.

Step 9: Reflection

Duplicate Wacom inner shape that we have created in Step 6. Change its color to white and remove all its Layer Styles. Add a triangle shape and set its mode to Intersect.

Step 10

Reduce layer Opacity to 10%.

Step 11

Add Layer Mask onto the shape. Draw Linear Gradient from white to black until the reflection fades away.

Step 12: Wacom Drawing Pad

Activate Wacom drawing pad and convert it into a new Adjustment Layer Solid Color. Set its color to #2a2a2e.

Add Layer Style Gradient Overlay.

Step 13

Let’s add texture onto the drawing pad to make it appears realistic. Make new layer and then fill it with white. Click Filter > Noise > Add Noise. Set blend mode to Multiply.

Step 14

Activate brush tool. Right click on canvas and set brush size to 1 px with 0% hardness.

Step 15

Make new layer above the drawing pad. Select rounded rectangle path inside the drawing pad. Right click and select Stroke Path.

In the next dialog box, select Brush.

Step 16

Convert layer to Clipping Mask by pressing Ctrl + Alt + G. This way, the stroke will stay inside the drawing pad.

Step 17: Buttons

Activate Pencil tool. Set its size to 1 px. Draw some black lineson indicated areas below.

Step 18

Next to the line, draw another white line. This time, decrease its Opacity to 30%. Combination of these black and white lines will create an inset effect.

Step 19

In the middle of the buttons, draw some white dots.

Step 20

Draw a white rectangular shape on the middle of the buttons. Add Layer Style Gradient Overlay.

Step 21

Draw an elliptical selection on top of the shape. make new layer and then fill it with white. Remove selection (Ctrl + D) and soften it with Gaussian Blur (Filter > Blur > Gaussian Blur). Reduce Opacity and then erase both its end using a very soft Eraser tool.

Step 22

Activate Brush tool and set foreground color to white. Draw subtle highlight on Wacom corner. This subtle highlight will add realism onto the shape.

Step 23: Shadow

Ctrl-click wacom basic shape to make new selection based on its shape.

Step 24

Make new layer and place it under all layers. Fill selection with black and then remove selection using shortcut Ctrl + D. Soften the shadow using Gaussian Blur (Filter > Blur > Gaussian Blur).

Step 25: Label

Draw a rectangle under the pad. You can use any color, it doesn’t matter.

Step 26

Activate pen tool. Click on the rectangle to add new layer. Pull new point down. What we want here is a natural label shape.

Step 27

Grab fabric texture and place it above the label shape. Convert it into Clipping Mask by pressing Ctrl + Alt + G. This way, the texture will stay inside the label area.

Step 28

Make new layer and and convert it to Clipping Mask. Use soft brush tool to paint subtle highlight and shadow on the label. Because the layer has been converted into a Clipping Mask, anything you paint will goes inside the label. Draw black rectangle and put it behind the label. As you can see below, the label appears very natural.

Step 29

Make new layer above the label. Paint subtle shadow from the Wacom on the label.

Step 30

Add white text on top of the label.

Double click text layer and drag black slider on Underlying layer option to the middle.

This slider will bring up black pixel from layers underneath it. The result is natural looking text.

Step 31: Cable

Draw a black rectangle under the pad. Activate pen tool and click on the path to add new points. Drag new points until we have a natural looking cable.

Double click layer and add Layer Styles Bevel and Emboss.

Step 32

Ctrl-click cable to make new selection based on its shape. Move selection down a few pixels by pressing down arrow. Make new layer under the cable and fill selection with black.

Step 33

Soften the shadow by adding filter Gaussian Blur.

Step 34

Erase some part of the shadow to make it appears more realistic.

Step 35: Pen

We have finished drawing the pad, let’s move on to work on the pen. To prevent it from distracting our work, put all layers into a new group and click eye icon on front of it to hide the pad.

Activate pen path and hit Ctrl + Enter to convert it into selection. Make new group layer and then click Add Layer Mask. Next, we will draw the pen inside this group layer.

Step 36

Activate pen main path. Click Add Adjustment Layer icon and select Solid Color. Set its color to #1b1c1e. Double click layer and add Layer Style Gradient Overlay.

Step 37

Use Brush tool to draw highlight on outer side of the pen. Reduce its Opacity to 40%.

Step 38

Draw a rounded rectangle on its center with color #141517.

Step 39

Ctrl-click shape we have just created. make new layer and fill it with white.

Step 40

Move selection up by pressing up arrow key a few times. Hit Delete key.

Click Select > Deselect to remove selection. Soften the highlight by adding filter Gaussian Blur.

Step 41: Pen button

Draw a rounded rectangle and set its color to #1d1e20.

Add Layer Styles Drop Shadow, Bevel and Emboss, and Gradient Overlay to change the button appearance into 3D.

You can see the result below.

Step 42

Zoom in using Zoom tool to see details on the button. Set foreground color to white. Activate Brush tool with radius 1 px. Paint subtle highlight on the button edges.

Step 43: Eraser

Draw a rounded rectangle with color #141517 for pen eraser. Put it under all shapes.

Add Layer Style Inner and Gradient Overlay.

Step 44

Make new layer above the eraser. Paint pen shadow on the eraser using soft brush.

Step 45

Use Zoom tool to see details on the eraser. Draw some subtle highlights using 1 px brush.

Step 46

Our current pen has no proper lighting. So, let’s add one. Our light source is located on top right of the pen. Activate brush tool and paint highlight on the pen.

Step 47: Pen Tip

Draw a small black rectangle on top of the pen. Make new layer and then paint a small highlight on the tip using 1 px brush.

Step 48: Shadow

Remember that our pen is located in a group layer with layer mask. We made the group layer in Step 35. Now, we need to make pen shadow outside the group layer. Ctrl-click pen path to convert it to selection. Press left arrow key a few times to move the selection. Make new layer and place it under pen group layer. Fill selection with black. Remove selection using shortcut Ctrl + D or click Select > Deselect.

Step 49

Click Filter > Blur > Gaussian Blur to soften the shadow.

Step 50

Activate Eraser tool and set its Hardness to 0%. Erase top and bottom part of the shadow to make it realistic.

Step 51

We’ve done drawing the pen. Let’s bring back the pad.

Step 52: Rotating the Pen.

let’s rotate our pen position to make it natural. Activate pen shadow layer and pen group layer. Hit Ctrl + T to perform transformation. Drag outside the transformation frame to rotate the pen.

Final Result

Here is the final result of our drawing tutorial. Click on the image to see it in full size.

Download Source

Draw a Realistic Wacom Bamboo Tablet – Part 1: Illustrator Tutorial

Mohammad Jeprie — Tue, 25 Oct 2011 18:50:17 +0000

In this tutorial, we are going to draw a realistic Wacom Bamboo. In this first part, we will draw it in Illustrator. Next, in the second part, we will export the vector path into
Photoshop and then draw it.

Preview

This is the final result of our realistic drawing tutorial.

In this tutorial, we will draw its wireframe in Illustrator.

Step 1: Pad

Make new file in Illustrator. Activate Rounded Rectangle tool and then click once on canvas. In the next dialog box, set Corner Radius to 2 mm. By doing this, we have just set amount of radius corner on every new rounded rectangle created onward. After clicking OK, you will have new rounded rectangle. You can simply delete it.

Step 2

Click and drag to make new rounded rectangle. Set Fill and Stroke to white and black.

Step 3

Next, we need another rounded rectangle with Corner Radius 10 mm. To do this, click once and set its Corner Radius to 10 mm. Delete created rounded rectangle shape.

Step 4

Draw a rounded rectangle right on top of the previus rounded rectangle. See picture below to see their positions.

Step 5

Select both shapes and then click Unite on the Pathfinder panel.

Now, we have a combination of two rounded rectangles. Its left side has corner radius 10 mm and its other side is 2 mm. This is going to be the wacom basic shape.

Step 6

Inside the rounded rectangle, draw smaller rounded rectangle with corner radius: 5 mm.

Step 7

Activate pen tool and then click indicated points on left side of the rounded rectangle to remove it. Alt-click remaining two points to convert them to corner point. Now, we have a half rounded rectangle shape.

Step 8

Drag left line segment until it snaps on left edge of the bigger rounded rectangle.

Step 9

Draw repeat previous steps to draw another haft rounded rectangle shapes.

Step 10

Draw some rectangles for Wacom buttons.

Step 11

Draw two small rectangles for cable and label.

Step 12: Pen

Activate rounded rectangle tool. Click once on canvas and set Corner Radius to 1 mm. Delete created shape.

Step 13

Draw pen basic shape. Click middle top line to add new point and click the other two points to remove it. Drag the remaining two points down until we have a triangle on top of the shape.

Step 14

Make sure you still have pen tool active. Shift + Alt -drag indicated points below to convert the triangle into an ellipse.

Step 15

Draw a small rectangle on top of the pen for its tip.

Step 16

Draw a rounded rectangle on lower part of the pen for its eraser.

Step 17

Finally, draw two rounded rectangles on center of the pen.

Final Result

Here’s our finish path. In our next tutorial, we will convert it into a realistic image using Photoshop.

Make a Slick and Dark Button Sprite

Mohammad Jeprie — Mon, 11 Jul 2011 12:05:35 +0000

In this tutorial, I am going to show you how to create a slick download button in Photoshop and then use it as a button sprite. We will also cover some basic CSS techniques to make this design fully functional.

Preview

This is the result that we are going to create. The button will have three conditions, normal, hover, and active. Click here or click image below to see its demo.

Needed Resource

To follow this tutorial, you will need to grab this resource:

26 Repeatable Pixel Patterns from PSDfreemium

Step 1: Preparing Background

Start creating a new file with size 400 x 300 px. In Layers panel, click New Layer icon. Click Edit > Fill. Select #314052 for its color.

Double click layer to open Layer Style dialog box. Add Layer Style Inner Glow and Pattern Overlay to add some noise. For the pattern, use one of the pixel patterns from PSDfreemium. Make sure to reduce its Opacity to 5%.

Here’s the result after adding Layer Style.

Step 2: Make Normal Button

Activate rounded rectangle tool and set its radius to 30 px. Draw a rounded rectangle with color #131c27.

Double click layer shape and add following Layer Styles.

This is the result.

Step 3

Duplicate layer shape we have just created in Step 1 by pressing Ctrl + J. Change its color to #213143. Activate move tool. Hit up arrow 5 times to nudge it 5 pixels up.

Step 4

Next, let’s add some shadows under the button. In Layers panel, Ctrl-click original layer shape to create a new selection based on its shape.

Fill selection with black. Remove selection by pressing Ctrl + D. Soften the shadow by adding Gaussian Blur, click Filter > Blur > Gaussian Blur.

Step 5

Ctrl-click top most layer shape. Create new group and then click Add Layer Mask icon. We will add highlights inside this group. Because we have add layer mask, everything we paint here will always stay inside the button.

Use a big and soft brush to paint white on top of the button. Reduce its Opacity to 10%.

Step 6

Activate pencil tool and set its brush size to 1 px. Paint 1 px white line on top of the button. Delete both its edges using a big and soft eraser tool.

Repeat same porcess on its lower part.

Step 7

Add text DOWNLOAD. Set its color to #dce4eb and add Drop Shadow.

Step 8: Make Hover Condition

Let’s organize the layer structure. Put all layers that created the button into a new group and name it normal. Duplicate group layer normal by Alt-dragging it. Rename the new group layer to hover. Change top shape color to #13202e.

Step 9: Make Active Condition

Duplicate normal group layer by Alt-dragging it again.. Nudge top shape 3 px down by activating mve tool and then press down arrow 3 times.

Step 10: Make Sprite Button

Hide all layers except normal group layer. Hit Ctrl + A to select all. Copy all pixels by pressing Ctrl + Shift + C.

Step 11

Create new file in Photoshop. Don’t change the canvas size. Photoshop will automatically set new canvas size to the pixels we have just copied.

Step 12

Click Image > Canvas Size. Set Height to 300 percent.

Step 13

Hit Ctrl + V to paste the normal button. Place it on top of the canvas. Repeat this process for the other conditions. Make sure to sort place them just as in picture below.

Step 14

Hide Background by clicking on eye icon in front of it. Click File > Save For Web & Devices. Make sure to select file type PNG-24 and check Transparency option. PNG-24 format allows you to store transparency and also store more color informations better than GIF.

Step 15: Background

Use zoom tool to see the background details. Use rectangular marquee tool to create a 6 x 6 px selection. Save it to clipboard by pressing Ctrl + Shift + C.

Step 16

Create new file with size 6 x 6 px.

Paste the image, Ctrl + V. Save it as a PNG-24 file and name it background.png.

Step 17: HTML

Open your favorite text editor. You can use any editor, basic editor such as Notepad is good enough. Paste these lines of code.

Sprite Button

Download

Step 18: CSS

Below is the style used for the button sprite. This style is used right inside the HTML file. Explanation is inline as comment.

Final Result

Below is the end result. I hope you learn something new from this basic web design tutorial. Thank you for reading.

Demo and Source File

Create An eCommerce Site Inspired By Groupon With JQuery Slider (Part 2)

Mohammad Jeprie — Wed, 06 Apr 2011 17:48:04 +0000

In this tutorial, we will code the PSD eCommerce site from the first tutorial. We will learn some neat web design techniques, from simple background replacement with CSS to slide form using jQuery. This design is my collaboration with an Indonesian web designer and developer, Aris FM.

Setting Up Files

First thing to do is set up the files and folders. Create a new folder in your PC and name it kupon. Inside folder kupon, create slider.html, index.html, style.css, and another folder named images. We also need jQuery library for the sliding animation, we can get it from jQuery.com or Google Libraries API. Simply download it to our template directory. Below, you can see current file structure.

Step 1 – Create Basic HTML Markup

In this tutorial we’ll use HTML5 for our markup. Open slider.html in your favorite code editor. Add these codes:




 Kupon | this is awesome

Inside the tag we need to add this 2 lines of code to reference our main stylesheet and jquery library.

Because we use HTML5 markup, we need to add an IE hack to enable HTML5 elements on IE 8 or below. We’ll use Modernizr script from http://www.modernizr.com/ to accommodate IE. We also need unitpngfix.js from to fix PNG transparency in IE 6. Grab unitpngfix.js from Unit Interactive. Download both files to template directory. Below is our current file structure.

Add this code before tag.

Step 2 – Creating Basic Structure

Before we begin, we need to understand the structure of HTML/CSS template from PSD mockup. The slider template is very simple, it consists only header and form. The form is then divided into 2 elements, form_1 and form_2. Below is our basic structure:

As you can see, we’re holding all main sections of the template within #wrapper container. This will help centered the layout easily.

Step 3 – Background

Now we need to slice out the background from the PSD mockup. Open kupon sliding.psd in photoshop and hide all layers except the group layer background. Select the crop tool and create this selection:

Hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save it as JPEG, and name it bg_slider.jpg.

Now open style.css and add this code :

body#slider{
 background:url(images/bg_slider.jpg) no-repeat 350px 0 #be58d5;
 border-top:10px solid #0b0b0b;
 font:13px/1.5 helvetica, sans-serif;
 margin:0;
 overflow:hidden;
}

Here we’re attaching the background image to the of the HTML document and adjust its position 350px from the x-axis. We have also created a 10px line at the top. If you open slider.html in the web browser, you should see something like this:

Step 4 – Logo

Let’s slice up the logo. Make sure you haven’t close photoshop. Create a 167px and 375px selection like this with crop tool:

After that, hide all layers except the group layer logo and hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save as PNG-24 and name it header.png.

Now we get back to our HTML/CSS. We’ll use an

tag and tag inside

to make the logo clickable. Place these elements inside
element. Let’s write this code:

Kupon

Make sure the code is placed between
and
.

Add styles to the logo, we will turn our
element to a block element and float it to the right. We’ll use a method called CSS Background Image Replacement to change
text into an image. We’ll also style the
element with -10px margin-top to put it in front of the top background border. Here is the code:

#slider header{margin-top:-10px;} #logo{ background: url(images/header.png) no-repeat; float:right; height: 167px; width: 375px; margin:0; } #logo a{ height:100%; width:100%; display:block; text-indent:-9999px; }

Here’s what we have now:

Step 5 – Site Description

Return to Photoshop again. Create a selection around the site description text using crop tool. After that, make sure you hide all layers except the site description text layer

Save file for the web as PNG-24 file and name it desc.png.

Back to HTML/CSS. Add following code below the
tag and above the
tag.

Now let’s adding style. The site description will have 60px margin from top and bottom.

.description{ margin:60px 0; }

Step 6 – First Form

Next, we will create main part of the content, the form. Let’s return to Photoshop again. Hide form_2 layer group then make selection using crop tool like this:

Then hide all layers except step_number layer group inside form_1 layer group. Hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save it as PNG-24, and name it step_1.png.

Now let’s create the continue button. Create a selection like image below using crop tool.

Hide all layers except continue layer group. Save it for the web as PNG-24 and name it continue_button.png.

Return to HTML/CSS. The first form will be placed inside

. As you can see, this element consist of 2 classes, form and form_1. The form class is used as global styles of all form, and form_1 is used to style the first form. Inside

tag, create a div called form_container.

Now let’s add some styles. We will add 10px rounded corner and box shadow outside the form. Add this code to style.css:

.form{
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 box-shadow:3px 3px 5px #000;
 -moz-box-shadow:3px 3px 5px #000;
 -webkit-box-shadow:3px 3px 5px #000;
 background:#fff;
 position:relative;
 top:20px;
 left:10%;
 width:470px;
 margin:0;
 padding:10px;
}
.form_container{padding:10px}

Now we’ll create the step number into our form. Add a div called step inside the form_container div, then inside div step add the number image.

The step number is floated on left side of the form. To do that, write this code into style.css:

.step{float:left}

Then create a

below the step div. Inside the

we’ll add an

tag and .


Confirm your city :

Add these styles:

fieldset{
 border:none;
 margin:0;
 padding:0 0 20px 20px;
 }
 fieldset h2{
 font:40px/700 Georgia,Serif;
 color:#8d8a8a;
 line-height:1;
 margin:10px 0 20px;
 }
 select,input{
 border:1px solid #adadad;
 font-size:14px;
 width:290px;
 margin:0;
 padding:8px;
 }

Now, we’ll create button for the first form. Add a div called button below

. Inside button div, add an tag called button_1.


 Continue

Let’s add styles for the button.

.button{
 background:#e1cde2;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 height:60px;
 line-height:60px;
 position:relative;
 padding:5px;
 }
 .button_1{
 background:url("images/continue_button.png") no-repeat;
 float:right;
 height:57px;
 width:172px;
 margin-top:3px;
 text-indent:-9999px;
 }

Here’s our first form:

Step 7 – Second Form

We’re done with the first form. Now let’s create our second form. Move to PSD file again. Show form_2 layer group and hide form_1 layer group. Create a selection with crop tool as shown below.

Then hide all layers except step_number layer group. Save it for the web as PNG-24 and name it step_2.png. Now slice up the continue button for the second step. Create selection using crop tool as seen below.

After done cropping, hide all layers except continue layer group inside form_2 layer group. Click File > Save for Web and Device, save it as PNG-24 and name it see_button.png.

Return to our HTML markup. Actually, the second form have same markup with first form. We just need to modify some elements from first from. So, just copy all the code between

and

and paste inside

Now we have 2 same form in our slider page. Let’s modify the second form. First, replace the tag inside

with this one:

Then replace all the code inside

tag with this:

Enter your email :

Don't worry, your email is safe with us.

After that, replace all the code inside

with this:

Now we’ll style our second form. This form also have same style with the first form. We just need to add some additional codes for the button and form position.

.button_2{
 background:url("images/see_button.png") no-repeat;
 border:none;
 float:right;
 height:56px;
 width:261px;
 margin-top:3px;
 text-indent:-9999px;
}
.formhide{left:119%;opacity:.3;}
.form_2{top:-216px}
.form_2 p{
 font:12px georgia,serif;
 color:#adadad;
}

It’s time to play jQuery! We’ll create a simple jQuery slider animation. So, here’s the concept. When user hit the continue button, the first form will slide to the left then the second form will slide from the right. Add this code just before tag.

Open your slide.html in web browser. You should see the slider in action. Here’s our complete markup for slider.html.

 

Kupon | this is awesome



	
 


 


 
 
	

	Kupon
	
	
 
 

	
		
			
				
		 	
			

				Confirm your city :
				
			
			
				Continue
			

		
 	 

 	
		
			
				

			
			
				Enter your email :
				
					 

					
				
				Don't worry, your email is safe with us.

Step 8 – Create Basic Structure for Landing Page

Now, we’ll create the landing page. Open index.html in your favorite code editor, then copy code from slider.html until the tag.





 Kupon | this is awesome

Then add below code after tag. This is will be our page layout.

Step 9 – Background

Open kupon single.psd in photoshop, hide all layers except background layer group. Create selection with crop tool like this:

Hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save it as JPEG, and name it bg_single.jpg.

Add following style in style.css.

body#single{
 background:url(images/bg_single.jpg) no-repeat 280px 0 #be58d5;
 color:#444;
 font:13px/1.5 helvetica, sans-serif;
 margin:0;
}

Step 10 – Navigation Menu

As you can see on the PSD mockup, the navigation menu has a gradient background. So, we need to slice the navigation background. Return to photoshop, create a 1 x 66px selection with crop tool. Save image for web as PNG-24 and name it nav_bg.png.

Now, let’s create the markup. Add this following code inside

tag.


featured deals
all deals

how it works

Next step is styling the navigation menu, add this style to style.css.

nav{
 background:url(images/nav_bg.png) transparent;
 border-bottom:2px solid #adadad;
 font-size:20px;
 height:66px;
 line-height:66px;
 width:100%;
}
nav ul{
 list-style:none;
 width:960px;
 margin:0 auto;
 padding:0;
}
nav li{
 float:left;
 margin:0;
 padding:0;
}
nav a{
 color:#f0f0f0;
 display:block;
 text-decoration:none;
 padding:0 10px;
}
nav a:hover,.current_item{
 background:#333;
}

Here’s what we have now.

Step 11 – Logo area

Actually, the logo size and css style is exactly same with slider.html logo. We just need to modify the logo position. So, copy this following code from slider.html and paste them inside

tag.


 Kupon

Adjust its position in style.css.

#single header{margin-top:-68px}

Step 12 – Featured Content

Our next step is creating the featured content area. The featured content is placed inside

tag. Add this following code inside

The ultimate al-in-one. Turbocharged. Start from $1,199.00.

Then add CSS style in style.css.

#featured,#information{
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 box-shadow:3px 3px 5px #000;
 -moz-box-shadow:3px 3px 5px #000;
 -webkit-box-shadow:3px 3px 5px #000;
 background:#fff;
 float:left;
 margin:20px 10px 20px 0;
}
#featured{
 padding:10px;
 width:690px;
}
#single h2{
 font:700 24px georgia,serif;
 margin:15px 0;
}
#deals{
 background:#fbc5ff;
 font:700 17px/1.5 georgia,serif;
 float:left;
 padding:10px;
 width:185px;
}

Now, we’ll create the sidebar for featured content. Return to PSD file again, we’ll slice up the buy ribbon. Create a selection with crop tool like this:

Hide all layers except ribbon layer group. Also hide button layer group inside ribbon layer group.

Save image for web as PNG-24 and name it ribbon.png.

Then, slice up the call-to-action buy button. Create a selection like this using crop tool.

Hide all layers except “button” layer group then save image for web as PNG-24 and name it buy_button.png.

Next, add the buy ribbon to the HTML document. Place this code inside



$1,000



Price$1,199

Disc.15%
You save$199

Recommend it
 to a friend!

Add this style.

.buy_ribbon{
 background:url(images/ribbon.png) transparent;
 display:block;
 height:89px;
 width:244px;
 left:-49px;
 margin:10px 0;
 position:relative;
}
.buy_ribbon p{
 color:#fff;
 margin:0;
 padding:25px 20px;
 text-shadow:1px 1px 0 #000;
}
.buy_ribbon img{
 float:right;
 margin:-64px 20px 0 0;
}
.disc_info{
 float:left;
 margin:10px 0 20px;
}
.disc_info_left{
 float:left;
 width:120px;
}
.disc_info_right{
 float:right;
 width:60px;
}
#deals a{
 display:block;
 margin-bottom:10px;
 text-align:center;
 text-decoration:underline;
}

We’re done with the sidebar. Now, let’s create our main content. First, slice up the featured image. In Photoshop, create selection using crop tool like picture below. Save image for web as JPEG and name it featured_pic.jpg.

Add the code below after

#deals.


Big, beautiful displays
Today's iMac has come a long way from the first 15-inch iMac. Take one look and you'll see just how far. A 21.5-inch or 27-inch display with edge-to-edge glass covers nearly the entire front of the enclosure.


Highlights


21.5-inch: 3.06GHz
1920-by-1080 resolution
4GB (two 2GB) memory
ATI Radeon HD 4670 with 256MB

The CSS styling for the code above looks like this.

.featured_pic{
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:5px solid #444;
 margin-left:15px;
}
.featured_left{
 float:left;
 margin:20px 20px 0 220px;
 width:225px;
}
.featured_right{
 float:right;
 margin:20px 0 0 0;
 width:225px;
}
#featured h3{
 font-size:18px;
 margin:0 0 20px;
}
#featured ul{
 list-style:disc;
 margin:0 0 0 15px;
 padding:0;
}
#featured li{
 padding-bottom:5px;
}

We’re done with featured content. Below is our current result.

Step 13 – Sidebar Area

Put the code below inside

Other Deals

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi nulla, convallis eget malesuada a, accumsan id nunc.

Sed ut eros sit amet justo accumsan elementum sed et odio. Pellentesque pharetra mauris non lacus pharetra pretium. Donec vel mauris

Cras ultrices imperdiet commodo. Curabitur vehicula, sem vel malesuada suscipit, nunc massa lobortis libero, at eleifend justo nisl sit amet sem.

Duis viverra lobortis ante ac aliquet. Nunc sapien enim, aliquet sit amet pellentesque at, pharetra et purus.

Nunc quis velit lorem. Aenean interdum urna ultricies enim sollicitudin interdum. Sed feugiat tellus quis erat convallis et suscipit nulla sollicitudin.

Then add this CSS styles.

#sidebar{
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 box-shadow:3px 3px 5px #000;
 -moz-box-shadow:3px 3px 5px #000;
 -webkit-box-shadow:3px 3px 5px #000;
 background:#fff;
 float:right;
 margin:20px 0;
 width:240px;
}
#sidebar h4{
 border-radius:10px 10px 0 0;
 -moz-border-radius:10px 10px 0 0;
 -webkit-border-radius:10px 10px 0 0;
 background:#fbc5ff;
 font:700 16px georgia,serif;
 margin:0 0 10px;
 padding:10px;
}
#sidebar p{
 padding:10px;
 margin:0 0 10px;
}

We’re done with the sidebar.

Step 14 – Information Content Section

In this section we’ll put our product information. This section also have a sidebar. First, slice up the discussion button. In photoshop, create selection like picture below.

Then hide all layers except button layer group. Save image for the web as PNG-24 and name it discuss_button.png.

After that, put this code inside

in the HTML document.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis magna ut sem condimentum pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean auctor quam nec ipsum vulputate cursus. Nulla molestie odio eget nunc porttitor at rhoncus felis bibendum. Pellentesque vestibulum ornare nisl non ullamcorper. Duis auctor nunc eget est fermentum viverra. Quisque quis massa nisi, nec placerat diam. Nam et nibh odio. Curabitur vel libero quis leo tincidunt hendrerit. Nam lectus mauris, tristique non tempus id, luctus non felis. Cras volutpat pharetra risus.
Praesent semper risus congue est egestas tempus. Etiam sem felis, egestas a vulputate non, pellentesque sit amet lectus. Cras quis tellus nunc, vitae facilisis ligula. Sed mauris mi, ullamcorper auctor pharetra id, feugiat at nibh. Curabitur at ipsum sem. Aenean nisl dui, semper non congue eu, ultricies sed lacus. Vivamus fermentum congue dui, at tempor ante euismod quis. Donec ante enim, pellentesque eu tincidunt vel, porttitor sed neque. Nulla imperdiet condimentum hendrerit. Mauris porta rhoncus venenatis. Suspendisse enim lacus, accumsan eget rutrum vel, accumsan ut magna. Nam eu mi quis nisl pharetra porttitor ac vel justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vitae iaculis massa. Nulla mattis nisi mi. Mauris nec accumsan erat.
Curabitur magna orci, lacinia quis bibendum eu, sagittis in nulla. Vivamus suscipit, tortor non suscipit dignissim, neque massa suscipit ligula, posuere semper lectus lacus ullamcorper nibh. Cras rutrum dictum orci vel gravida. Integer eu gravida diam. Quisque convallis convallis arcu et ullamcorper. Donec sodales commodo scelerisque. Vivamus nisl risus, laoreet sed varius in, gravida eget quam. Quisque sollicitudin quam et neque euismod non sodales tortor molestie. Morbi placerat iaculis feugiat. Duis rutrum risus ultrices turpis gravida fermentum. Etiam libero odio, molestie quis elementum non, interdum et quam. Nam sed diam libero. Sed gravida, magna nec feugiat scelerisque, orci justo eleifend orci, et venenatis nisl eros vitae quam.

Style it like this:

#information{
 width:710px;
}
.text{
 float:left;
 padding:10px;
 width:460px;
}
.text p{
 margin:0 0 10px;
}
.text img.discuss{
 float:right;
 margin-top:10px;
}

Here’s our current layout.

Next step is creating the information sidebar. First, slice up the sidebar images and quote image in photoshop. Create selection using crop tool like this to create sidebar images.

Save image as JPEG and give it name brand_pic.jpg. Then slice up the quote image.

Hide all layer except quote text layer. Save as PNG-24 and name it quotes.png.

Now add this code after

#text



Apple Inc.
Website
Facebook

Cupertino
1 Infinite Loop
Cupertino, CA 95014
408-996-101

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis magna ut sem condimentum pretium.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean auctor quam nec ipsum vulputate cursus.

Add CSS styles.

.info_sidebar{
 border-radius:0 10px 10px 0;
 -moz-border-radius:0 10px 10px 0;
 -webkit-border-radius:0 10px 10px 0;
 background:#fbc5ff;
 float:right;
 padding:10px;
 width:210px;
}
#information h3{
 font-size:18px;
 margin:0 0 20px;
}
.info_link{
 float:left;
 margin:0 30px 20px 0;
}
.info_sidebar p{
 border-bottom:1px solid #760996;
 margin:30px 0;
 padding-bottom:30px;
}
blockquote{
 background:url(images/quotes.png)no-repeat left top transparent;
 font-size:13px;
 font-style:italic;
 margin:0 0 30px;
 padding:0 0 0 30px;
}

And here’s what we have now.

Step 15 – Footer Area

This is our last step, create the footer area. Our footer will divided into 4 columns. Add the code below inside

tag.




Company


Home
About Us
Careers

Our Location
Privacy Policy




Learn More

Ask a Question
Read our official blog

Developer / API
Suggest a feature




Follow us on:

Twitter
Facebook

Flickr
RSS Feed
Email





About Us
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non sapien id nisl gravida hendrerit. Morbi imperdiet risus et felis placerat blandit. Vivamus mollis urna mollis lectus aliquet eu pellentesque diam molestie. Nunc ut mi quis augue posuere iaculis lobortis ac felis.

And here’s our footer styles.

footer{
 background:#000;
 border-top:2px solid #adadad;
 color:#ccc;
 float:left;
 margin:30px 0 0;
 padding:0 0 30px;
 width:100%;
}
footer p{margin:0 0 10px;}
footer a{color:#ccc;}
footer a:hover,footer a:focus,footer a:active{text-decoration:underline;}
footer h5{
 font-size:14px;
 margin:0 0 15px;
}
footer ul{
 list-style:none;
 margin:0;
 padding:0;
}
footer li{
 margin:0;
 padding:0;
}
#footer_wrapper{
 margin:20px auto 0;
 width:960px;

}
.footer_column{
 float:left;
 margin:0 20px 0 0;
 width:160px;
}
.colophon{
 float:right;
 width:410px;
}

Final Result

Below is our final result.

Source File and Live Demo

Download Complete Source File

Live Demo

Create An eCommerce Site Inspired By Groupon With JQuery Slider (Part 1)

Mohammad Jeprie — Wed, 30 Mar 2011 17:39:51 +0000

In this two part tutorial, we will create an eCommerce site inspired from Groupon complete with its simple jQuery slider. This design is my collaboration with an Indonesian web designer and developer, Aris FM. Today, we will learn to create its design in Photoshop.

Step 1: First Page — Setup Document

First, download 960 grid template from 960.gs. Inside the downloaded zip file, you will find a Photoshop action file (*.atn). Double click it to load into Photoshop.

Step 2

First, download 960 grid template from 960.gs. Inside the downloaded zip file, you will find a Photoshop action file (*.atn). Double click to load it into Photoshop. Return to Photoshop, inside Actions panel you will find new group named 960 GRIDS. Select 12 Column Grid and click play button.

This action will automatically created a new file in standard 960 grid system, complete with guides to help you design.

Step 3: Set Up Background

Create new group and name it Background. We will put all background element here. Create new layer and fill it with color #be58d5.

Step 4

Grab sun picture and paste it on top left of the background. Set layer Opacity to 46%

Step 5

Paste octopus picture onto the background.

Step 6

There is a problem with this octopus. If you zoom closer, you will find that there is a 1 px white line along its edge. No need to worry, there is a nice tip to fix this.

Step 7

Ctrl-click octopus layer to create new selection based on its shape. Click Select > modify > Contract.

Use Contract By 1 px..

Click Add layer mask icon. This process will hide white pixel on the octopus edge.

Step 8

Ctrl-click octopus layer. Create new layer underneath it. Fill selection with black.

Remove selection by pressing Ctrl + D. Soften the selection by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Use eraser tool to delete upper part of the layer. Now, we should have octopus shadow on the floor.

Step 9

Ctrl-click octopus layer. Make sure marquee tool is still active, right click and choose Transform Selection.

Right click and choose Skew.

Pull top middle handle until the selection is skewed. See picture below for reference.

Step 10

Fill selection with black.

Remove selection (Ctrl + D). Click Filter > Blur > Gaussian Blur.

Delete lower part of the layer.

Set layer Opacity to 20%.

Step 11

Select top part of the site. Create new layer and fill it with #obobob.

Step 12: Logo

Draw an ellipse shape with color #333333.

Draw another ellipse and set its mode to Add to Shape.

Repeat this process a few times until we have clouds shape for the logo background.

Add following Layer Style.

Step 13

Add site name on top of the clouds. Add following Layer Styles.

Step 14: Site Description

Add site description and give it this Layer Styles.

Step 15: Step 1 Interface

Draw a rounded rectangle with radius 10 px and color #ebebeb. Add Drop Shadow.

Step 16

Add text. Draw a circle with same color as the background. Add Inner Shadow.

Step 17

Add number 1 inside the circle and add following Layer Styles.

Step 18

Draw a white rectangle. Add Stroke.

Step 19

Add city name inside the rectangle. On its opposite side, draw a white rectangle shape. Add following Layer Styles.

Step 19

Activate polygon tool. From the Option Bar set Sides to 3 to get a triangle. Draw a black triangle on top of the rectangle.

Step 20

Draw a rounded rectangle with radius 10 px.

Step 21

Draw another roundd rectangle for continue button. Add following Layer Styles.

Step 22

Add text “continue” on top of the button. Add Drop Shadow.

Step 23

Draw a circle shape next to the continue text.

Draw a rounded rectangle. Hit Ctrl + T to perform transformation and rotate it 45 degree.

Repeat previous step but this time rotate -45 degree. Combine both shapes until we get an arrow symbol.

Step 24

Create a rounded rectangle under the continue text.

Draw a rectangle covering half of the rectangle shape. This shape indicates that the process is only halfway and not yet finish.

Step 25: Step 2 Interface

Repeat the same process to create Step 2 interface. You can easily copy the first interface and modify it.

Step 26: Landing Page — Set Up Background

Next, we need to create landing page. User will go to this page after finishing Step 2. Use 960 grids actions to create new 12 column file. Fill background with #be58d5. Add sun ornament on background with Opacity 46%.

Step 27: Top Menu

Fill top part of the file with black and add some site menus.

Step 28

We need to differentiate active menu from the others. Draw a rectangle and fill it with #333333 and put it behind active menu.

Step 29

Draw a 2 px under the menu to add contrast with its background.

Step 30: Content

Draw a rounded rectangle for the page content.

Step 31

Add post title, product image, and some description. Leave empty room on left side of the page to add price info.

Step 32: Buy Ribbon

Draw a tall rectangle on left side of the content page with color #fbc5ff. On top of it, draw another rectangle with color #9928b3 to be used as a price ribbon.

Step 33

Create new layer above the ribbon and paint highlight on top of it using a big soft brush (Hardness: 0%).

Step 34

Activate single row marquee and draw a 1 px selection on top of the ribbon.

Hit Delete key to delete 1 px highlight on the ribon.

Step 35

Ctrl-click ribbon layer to create a new selection based on its shape. Click Select > Modify > Contract. Set parameter to 2 px.

Create new layer. Click Edit > Stroke. Set Width to 2 px and Location to Inside.

Change layer opacity to 30%.

Step 36

Activate text tool and write item’s price. Add Drop Shadow and Outer Glow.

Step 37: Buy Button

Draw a big blue rounded rectangle. Add following Layer Styles.

Step 38

Add text “Buy!” and Drop Shadow to keep it legible.

Step 39

Draw a rectangle with color #9928b3. Put it under the ribbon. Select left lower corner and pull it up.

Add Gradient Overlay.

Step 40: More Content

Add another rounded rectangle to add more post content.

Step 41

Draw a rectangle with color #fbc5ff on right side of the shape. Convert layer shape to Clipping Mask by pressing Ctrl + Alt + G.

The rectangle will goes inside the content shape.

Step 42

Insert some text for the content.

Step 43: Button

Draw a rounded rectangle on end of the post with color #eb582c. Add following Layer Styles.

Step 44

Add text on the button. Apply Drop Shadow to make the text legible.

Step 45: Sidebar

Add some content on the sidebar.

Step 46

Using same method, add another sidebar on the top content.

Step 47

Finally, add simple content for the footer. Use same color background as the top menu explained on Step 27 above.

Final Result

Below is the final result of all three designs we have created. Click on the image to see it in full screen. Don’t miss the second part of this tutorial. We will code this design and turn it into a functional HTML/CSS complete with its sliding jQuery.

Download Source File

Download PSD File

Creating a Simple Photo Site — From PSD to HTML/CSS (Part 2)

Mohammad Jeprie — Thu, 03 Feb 2011 20:21:29 +0000

Hello, welcome to the second part of tutorial creating simple photo site. Before following this tutorial, make sure to read the first part, designing process in Photoshop. In this tutorial we will take the design form Photoshop and code into a working webpage.

I wrote this tutorial with a help from Satrya, a web designer and wordpress developer. Make sure to check his site to see more of his tutorial.

Before attempting this tutorial, first you should choose the code editor. I highly suggest you to use Dreamweaver or Notepad ++.

Preview

This is the final design that we will create. Click here or click on the image to see the demo.

Step 1 – CSS Reset

Before creating layout you must add css reset to maintain browser consistency. You can download the css reset from Eric Meyer. Copy the file to your code editor and save as reset.css. You can read more informations about css reset from Perishablepress article.

Step 2 – Create Template Directory

The first thing you need to do is create your template directory. Just create a folder on your desktop and name it Photofocus, within this folder you need another folder called images, a blank HTML document, a blank CSS document, and of course the CSS reset.

Step 3 – Begin The Layout

Before we started the coding, you need to read a few things to note from the PSD mockup :

The header wrap the logo and navigation.
Before the content, we need to create a featured text.
The gallery content should have enough space for 3 horizontal images.
Don’t forget the content navigation.
Our mockup have a simple sidebar.

So here’s our HTML layout:




    
    PHOTOfocus
    
    





    	

        	

            	Logo / Navigation

            


            

            

            	Featured Text

            


            	Content

            


			

				Sidebar

			


        


    

        	Footer

Copy the code above to your blank HTML document. As you can see from the code above, #main area which will be centered the layout(header, content and footer).

Remember to add this code below between your HEAD tags. Without it, your CSS style sheet will be useless.

The first thing to do is setting up the background image. In the first part of the tutorial, on Step 65 we have saved the background file. Make sure to save it as a PNG file and name it bg_body.png.

Now open up your styles.css and add following CSS style

body {
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size: 14px;
	color: #BAC3C3;
	line-height:1.5em;
	background-image:url(images/bg_body.png);
	background-repeat:repeat;
}

a{
	color: #BAC3C3;
	text-decoration:none;
}

a:hover {
	border-bottom:1px dotted #ccc;
	font-weight:bold;
}

#container {
	width:950px;
	margin: 0 auto;
}

The #main area has a width of 950px and are centered using margin: auto.

Step 4 – Header Area

As we know, header area are wrapping the logo and navigation. First, we need to create the logo element. Return to photoshop, hide all layers except the logo. Select the slice tool again and create this selection.

Hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save it as PNG-24, and name it logo.png.

Next, add the logo and the navigation to the HTML document:




    
    PHOTOfocus
	
    





    	

        	

				
					
				


				
					Home
					About
					Contact
					Blog
				


            


            

            

				Featured Text

            


				Content

            


			

				Sidebar

			


        


    

		Footer

Add following css style:

#header {
    border-bottom: 4px double #C3BFC4;
    overflow: hidden;
    padding: 20px 0 10px;
}

#logo {
	width:300px;
	height:80px;
	float:left;
}

#logo a:hover {
	border:none;
	text-decoration:none;
}

You should see the logo appears.

Our next step is fixing the logo transparency in IE 6. Here’s the logo screenshot in IE6.

My favorite tool to fix the transparency is DD_belatedPNG, DD_belatedPNG is a “Javascript library that sandwiches PNG image support into IE6 without much fuss“. This tool is very easy to use, first you need download the javascript file (DD_belatedPNG_0.0.8a.js), then put it in your template directory. After that, add the code below before closing HEAD tags.

Now open DD_belatedPNG_0.0.8a.js then add the code below in the last line

/* ADD YOUR CLASSES HERE e.g. #logo, #header .rss, .icon, .etc */

DD_belatedPNG.fix('#logo');

If you have many PNGs, you can add more CLASS or ID there to fix the transparency of all your PNGs file. Now refresh your IE6, here’s a screenshot of what we get in IE6 when transparency is working.

Step 5 – Navigation Area

Our next step is styling the navigation area, add this css to your CSS document :

ul#navigation {
    margin-top:23px;
    padding:0px;
    float:right;
}

ul#navigation li {
	display:inline;
	margin:0 20px 0 0;
}

ul#navigation li a{
	text-decoration:none;
	color:#929292;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	padding: 4px 13px;
}

ul#navigation li.active  a, ul#navigation li a:hover{
	background-color:#d9d7d7;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	color:#FFF;
    border:none;
}

Some things to note:

By setting the display property to inline for the
elements, the list changes to a horizontal set of elements.
We play with a few CSS3 style, we use border-radius for creating rounded corner when the navigation active or being on hover.

Here’s what we have now.

Step 5 – Intro Area

Next step is adding the intro text. Before we proceed the coding process, you shoud slice the separator. Go to the PSD file again, select the slice tool and create this selection.

After that, click File > Save for Web and Devices. Save as intro.png. Add this CSS code:

#content {
	width:700px;
	margin:5px 10px 20px 0;
	float:left;
}

#intro {
    background-image: url("images/intro.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 20px 0 45px;
    text-align: center;
    width: 700px;
    margin-bottom:30px;
}

#intro p {
    font-size: 26px;
    line-height: 1.2em;
    text-shadow: 1px 2px #FFFFFF;
    color:#B1B1B1;
}

Replace your HTML document with this:




    
    PHOTOfocus
	
    
	




    	

        	

				
					
				


				
					Home
					About
					Contact
					Blog
				


            


            

              

				Hi! Welcome to my personal photo site. This is just a place for me to share my photos. I hope you’ll enjoy it.

            


			Content

            


			

			Sidebar

			


        


    

	Footer

Step 6 – Gallery Area

Our next step is creating the gallery area. First, slice our content box, to do this you need to hide all your layers in your PSD file and leave the content box, then save it as content_box.png

Add the code below after closing #intro in your HTML document.








Photo 1











Photo 2











Photo 3











Photo 4











Photo 5











Photo 6

Add some image with size 185 x 170 px and place it in folder images.

The CSS styling for the code above looks like this.

.content_box {
	background-image:url(images/content_box.png);
	background-repeat:no-repeat;
	margin:0 12px 25px 0;
	width:220px;
	text-align:center;
	height:233px;
	float:left;
}

.thumb {
	padding:20px 20px 0;
}

.thumb a:hover {
	border:none;
}

.text_box {
	height:25px;
}

.text_box a {
	text-decoration:none;
	font-weight:bold;
}

.text_box a:hover {
	text-decoration:underline;
	border:none;
}

We have Div Class Content_box which wraps the image thumbnail and the image title, .content_box use content_box.png which we have previously sliced from the PSD file. You can see from the code above that we have set the image thumbnail padding, its purpose is to centered the image thumbnail position.

So this is our current layout:

If you wanted to create another box just copy and paste everything in the content class.

Step 7 – Content Navigation

Put the code below before Closing Div ID Content:


		 Previous Photos
		 Next Photos

Return to our mockup, hide all layer except for the navigation icon. Select slice tool and create this selection.

You should slice the “previous” and the “next” icon. After that, add this css code :

.content_navigation {
	margin:10px 0 30px;
	clear:both;
	overflow:hidden;
}

.content_navigation a{
	text-decoration:none;
	color:#BAC3C3;
}

.content_navigation .previous a{
    background-image: url(images/previous.png);
    background-repeat: no-repeat;
    float: left;
    height: 21px;
    padding-left: 25px;
}

.content_navigation .next a{
    background-image: url(images/next.png);
    background-position: right center;
    background-repeat: no-repeat;
    float: right;
    height: 21px;
    padding-right: 25px;
}

.content_navigation a:hover {
	border:none;
}

In your browser, you should have everything placed nicely.

Step 8 – Sidebar Area

Next is creating the sidebar area. In this area, we have 5 element such as “about me”, “connect”, “search”, “category” and “from the blog”. The HTML code for the sidebar area looks like this.



				
					About Me
						
						Mohammad Jeprie is an author and a graphic designer wanna be.
Currently running two design blogs, PSDfreemium.com and DesainDigital.com.
				

				
					Connect
					
						
						
						
						
						
						
					
				

				
					Search
				
				
				
				

				
					Categories
					
						Family
						Home
						Children
						Vacations
					
				

				
					From The Blog
					
						Post #1
						Post #2
						Post #3
						Post #4

For the “about me” and “connect” you should slice the “about me” photo and “connect” icon. After that, add this css code :

#sidebar {
    float: right;
    width: 225px;
	margin-top:20px;
}

.widget {
	width:225px;
	font-size:12px;
	color:#cbcbcb;
	margin-bottom:20px;
	overflow:hidden;
}

.widget h3 {
    border-bottom: 1px solid #C3BFC4;
    color: #999999;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 2px;
    text-align: center;
	text-transform:uppercase
}

.widget ul {
	list-style:disc;
}

.widget ul li{
	margin-left:16px;
}

.widget ul li a{
	color:#CBCBCB;
	text-decoration:none;
}

img.author {
	float:left;
	margin:5px 15px 0 0;
}

ul.social li {
	float:left;
	margin-left:16px;
	list-style:none;
}

ul.social li:first-child {
	margin-left:0;
}

ul.social li a{
	border:none;
}

#searchform  input {
    background-image: url(images/search.png);
    background-repeat: no-repeat;
    border: medium none;
    color: #BEBEBE;
    font-size: 12px;
    font-style: italic;
    padding: 7px 0;
    text-align: center;
    width: 220px;
}

Here’s our layout with the sidebar:

Step 9 – Footer Area

This is our last step, add our footer styles.

#footer {
	clear:both;
	background-image:url(images/footer.png);
	background-repeat:repeat-x;
	height:15px;
}

.footer_inside {
	width:950px;
	margin:0 auto;
}

.footer_inside p {
    font-size: 11px;
    line-height: 1em;
    padding: 2px 0 0;
    text-align: center;
}

.footer_inside a{
	color:#BAC3C3;
	text-decoration:none;
        font-weight:normal;
}

The footer background image will refer to the footer slice. All you need to do is creating a selection about 4 pixels wide. The image will then be repeated in CSS. Then add the code below between Div ID footer and Closing Div ID footer



		© 2010 Muhammad Jeprie

Below is our current layout.

Step 10 – Fixing Bugs on IE6

There are two bugs in IE6. There is border in the header and the social network icons is misplaced.

To fix them, after this line

add the code below

Finally, create a blank CSS document in our template directory, save it as ie.css, then add this css

#header {
	float:left;
}

ul.social li {
	margin-left:10px;
}

Ok, looks great now in IE 6

Demo Link

Demo

Thank you for reading this tutorial. I hope you learn some new techniques.

Creating a Simple Photo Site in Photoshop (Part 1)

Mohammad Jeprie — Fri, 21 Jan 2011 14:48:57 +0000

In this tutorial, we are going create a minimalist photo site using Photoshop. We will use subtle effect and texture to give this site a classic style. This is the first of two part tutorial. In the second part, we will code it into functional web page.

Step 1: Set Up Document

We will use 960 grid in this design. So, our first step is download the file from 960.gs.

Step 2

Inside the file, you will find an action file, 960_GRIDS.atn. Double click it to load it into Photoshop.

Step 3

In Photoshop, open panel Actions. Inside group 960 GRIDS you will find some actions. Select 12 Column Grid then click Play icon to start creating a new canvas.

Step 4: Layer Structure

Before starting the design process let’s take a look at the layer structure of the final file. A clean organized layer will help the process of transferring the design. If you are still new with organizing layer, you can learn more about this in Photoshop Etiquette.

Step 5: Background

Create a new layer and name it Background. Fill layer with white. Let’s just leave it like this for now. We’ll work on this again later.

Step 6: Change Canvas Size

We need more room on the canvas. Click Image > Canvas Size. Change the height to 923. Click OK.

Step 7: Logo

Create new group layer and name it Logo. Grab a logo for the site. I’m using a magnify glass icon from PSDfreemium and rotate it 45 degree. Place the logo on top left corner.

Step 8

Next to the logo, add site’s title. Add following Layer Style.

Step 9

Add tagline under site’s title and add this Layer Style to give it letterpress effect.

Step 10

Create new layer and draw two 1 px horizontal line.

Step 11: Main Menu

Create some text for the main menu and place it on top left of the site. Set its alignment to align right.

Step 12

We need to diferentiate active menu, in this case HOME. Draw a rounded rectangle, place it under the text. Set its color to #d9d7d7.

Step 13

Change active menu text color to white.

Step 14: Site Intro

Create new layer group and name it Content. Inside it create another layer group for site intro.

Step 15

Activate type tool then click and drag to create a text box. Set its alignment to center.

Step 16

Add this layer style on the text to give it letterpress effect.

Step 17

Activate line layer that we have created on Step 10. Activate tool move, Alt-drag to duplicate the lines. Delete right part of the lines. We are going to use it for sidebar.

Step 18

Use eraser tool to delete part of the lines indicated below.

Step 19

Let’s add a classic ornament onto the design. I’m using a nice vector barroque ornaments from WeGraphics. Open this shape on Illustrator. Select it and hit Ctrl + C.

Step 20

Return to Photoshop. Hit Ctrl + V, paste it as smart object. By saving it as Smart Object, we can retain its quality.

Step 21

Resize the ornament and place it in the middle of the line.

Step 22: Photos

Create new group layer and name it Photos.

Step 23

For the first photo, create new layer group and name it Photo-1. Draw a rectangle shape, color: #f7f7f7.

Step 24

Add subtle stroke and pattern by adding these Layer Style. For the pattern, I’m using minimal pattern from WeGraphics.

Step 25

Paste photo thumbnail with size 185 x 170 px. Place it on the middle of the rectangle.

Step 25

Add title under the photo and add this layer style.

Step 26

Create a rectangular selection and fill it with black. We are going to use it as a shadow.

Step 27

Remove selection by pressing Ctrl + D. Soften the shadow by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Step 28

Hit Ctrl + T.

Step 29

Right click and choose Warp.

Step 30

Pull bottom center section up. See picture below for reference.

Step 31

Reduce shadow opacity to 10%.

Step 32

Make sure tool move is active. Alt-drag to duplicate Photo-1 group.

Step 33

Replace the photo and update its title.

Step 34

Keep repeating this process until we have six photos for the site’s content.

Step 35: Navigation Button

Create another group layer and name it prev-next. We’ll put buttons for navigation here.

Step 36

Create a rounded rectangle and add following Layer Styles.

Step 37

Activate polygon tool, on the option bar set sides to 3. Click and drag to create a triangle on top of the button.

Step 38

Label it Previous Photos.

Step 39

Repeat the same process to create Next Photos button.

Step 40: About Me

Let’s start working on the sidebar. Create new layer group and name it Sidebar. Our first component is information about the author. Create another group layer and name it About Me.

Step 41

Create a text box and add the title. Make sure the length of the text box is 3 columns and the text is aligned center.

Step 42

Draw a 1 px line under the title.

Step 43

Insert a profile picture with size 80×80 pixel.

Step 44

Next, we will add text warping the picture. We can’t just add text box because by default text box in Photoshop doesn’t support warping. First, create a rectangular path. Click with pen tool to add points and modify it until we have the path’s shape warping the profile picture. See picture below for reference.

Step 45

Activate type tool and click inside the path. You can see that the cursor is now changing, indicating that the text will be warped inside the path. Write a short description inside the path.

Step 46: Social Network Icons

Create new group layer and name it Connect.

Step 47

Create title and a line underneath it.

Step 48

Here, I’m using another icon from WeGraphics. Place icons. No need to worry about its alignment, we’ll fix it latter. For now, just make sure the first and last icon are snapped onto the grid.

Step 49

Select all layer icons by clicking on the first layer then Shift-click the last layer icon.

Step 50

Activate tool move. Click align vertical centers and distibute horizontal centers icon. These two icons will automatically fix the alignment and distribution of all icons.

Step 51: Search

Create new layer layer group for search box.

Step 52

As usual, add title and a line underneath it.

Step 53

Draw a rectangle. Make sure the box’s width is matched to the column’s width. Add Layer Style Inner Shadow.

Step 54: Categories

Create new group layer for categories. Write list of the photo categories.

Step 55

Photoshop does not support bullet list. So, we need to build it manually. Create a circular selection on front of the list and fill it with color #cbcbcb.

Step 56

Repeat this for the other items.

Step 57: Blog list

Repeat previous step to create list of blog posts.

Step 58: Footer

Draw a rectangle on bottom of the site. Make sure that left, right, and lower side of the rectangle are outside the canvas. For the color use #f4f4f4. Add a subtle Layer Style Stroke.

Step 59

Write copyright info in the middle of the footer.

Step 60

Okay, we are almost done with the design. Let’s step back and see the result so far.

Step 61

Below is the top left section in 100% view.

Step 62: Background Texture

Currently the background is plain white. So, let’s working on the background’s texture. Again, grab a nice minimalist pattern from WeGraphics. We’ll add a subtle red color onto the texture by adding adjustment layer Hue/Saturation. Click Add Adjustment Layer icon and select Hue/Saturation.

Step 63

Use following settings.

Step 64

Hit Ctrl + E to merge adjustment layer and the pattern. Hit Ctrl + A to select all pixels, click Edit > Define Pattern to save selection as a pattern.

Step 65

In the next dialog box, you can name the pattern. Make sure to save this bacground, we’re going to use it in the next tutorial.

Step 66

Let’s return to our design. Make sure layer background which we created earlier in Step 5 is selected.

Step 67

Click Edit > Fill. Select Use: Pattern and pick pattern we have just created earlier.

Final Result

Okay, it’s a wrap! We’re done with the design. Hit Ctrl + H to hide all the guides then hit F twice to see the result in full screen.

Below you can see the final result. Click on the image to see it in full screen. Stay tuned for part two of this tutorial, we will code this design into HTML/CSS.

This is 100% view of the top left section.

Download File Source

Download PSD File (2,86 MB)

How to Draw Globe Icon Using Photoshop

Mohammad Jeprie — Thu, 02 Dec 2010 13:37:57 +0000

In this tutorial, we will draw a nice globe icon using Photoshop. The globe is made from a simple glossy 3D ball with a modified continent map on in.

Step 1: Create a 3D Ball

Our first step is creating a 3D ball. Let’s start by creating a new file with size 512×512 px. Draw a circle on its center. You can see any color you want, it doesn’t matter. We will change it using layer styles.

Step 2

Double click layer shape to open Layer Style dialog box. Add Inner Shadow, Outer Glow, Inner Glow, and Gradient Overlay.

Step 3

I believe we will have this result.

Step 4

Ctrl-click circle shape to create selection based on its shape. Create new layer and paint lower part of the ball with black. Use a very big and soft brush, hardness: 0%.

Step 5

Create new layer and draw a radial gradient from white to transparent.

Step 6

Create an elliptical shape, reduce its Fill to 0%. Add layer style Gradient Overlay from white to transparent and set its blend mode to Screen. This will add a highlight to the ball.

Step 7: Adding World Map

We’re done with the 3D ball. Now, we need to add the continent map. Drawing this manually takes more time and skill. So, we’ll use a nice free vector stock from Vector Open Stock. You can download the stock from Vecteezy. Open the file in Illustrator. We will use vector map from bottom right artwork.

Step 8

Double click shape. Select the dots shape and delete it. This will left us with the map only.

Step 9

Select the continent maps and hit Ctrl + C to copy it.

Step 10

Paste the vector map to Photoshop (Ctrl + V). Click Add Adjustment Layer icon and select Solid Color. Use #005d2c for its color. Copy path from our first circle and paste it onto the map. Select Intersect from option bar.

Step 11

Add Gradient Overlay with this settings.

Step 12

Let’s duplicate continent map layer shape. Change its color to lighter green. Select all continents path, without selecting the circle path, and move it 5 pixel up and 5 pixels left. Next, select circle path only and resize it to 101%. This will add extra tickness to the continent and make it not so flat.

Step 13

This is our globe so far. There’s something wrong with its perspective. If you notice the emboss effect on the continents, it seems flat.

Step 14

Activate lower continent map. Select some of the points using Direct Selection Tool and move them until we have correct perspective. You can see the difference before and after moving some of the points.

Step 15

Activate topmost continent map and add layer style Gradient Overlay.

Step 16

Ctrl-click its thumbnail layer and create new layer.

Step 17

Paint outer part of the selection with black. Use big and soft brush (Hardness: 0%)with low opacity (20%).

Step 18

Let’s add more highlight onto the map. Create an elliptical selection. Add new layer. Fill selection with white to transparent gradient. Deselect and give it a Gaussian Blur (Filter > Blur > Gaussian Blur) with big radius.

Step 19: Draw Shadow

Create new layer and place underneath all layers. Draw an elliptical selection. Create new layer, fill selection with black. Deselect. Soften it by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Step 20: Draw Background

Activate Background layer. Draw a radial gradient from white to #c7c7c7.

Step 21

Duplicate layer by pressing Ctrl + J. hit Ctrl + T and transform layer. See picture below for reference.

Final Result

Here’s our final result. I hope you like it.