I wonder if he still has a job?

With private label SEO resellers, your business provides search marketing services for
its own clients without having to create these services yourself. In a more traditional form of marketing, companies that are looking for marketing services have to turn to a firm that creates and then distributes their own unique marketing packages. On the other hand, when your company uses a private label SEO reseller strategy, you will get these marketing services from an outside business that specializes in search engine optimization services.

Private label SEO does not require you to be educated or knowledgeable about search engine marketing. In fact, many businesses that utilize private label SEO packages have never before experienced what it is like to resell these services. When you utilize private label SEO, your clients will never know that they are getting marketing services from an outside company. They will be under the impression that you are creating these services for them, meaning there will be less confusion about the services and where they come from.

It is very rare that a company gets an opportunity to bolster their own income while at the same time helping their customers succeed as well. Private label SEO reseller approaches afford online organizations this very opportunity. When you get involved with this form of marketing, you can watch your income go up without spending valuable time helping members of your company learn about search engine marketing. Start initiating communication with some SEO reseller firms on the web that can provide you with private label marketing and help you get started providing these packages for your customers. Once you get past the initial set-up and get established with the rhythm of SEO reselling, you will begin enjoying greater profits and business income as well as a much higher level of customer satisfaction thanks to the great help you provide your clients with their own marketing pursuits on the world wide web.

• The logo should be as simple as to be understood and identified. A simple and understandable logo can increase the demand of a particular product.
• It should be of such a type that people can memorize it within a short period of time. It should stay simple by nature with an effective principle included in it.
• An effective logo should not be created for a specific time being but it should be created for an endless period of time.
• Various other principles are to be followed. It should be versatile in its size, color and graphical representation.
• Along with all these a logo should be created keeping in mind the organization and its product. It should be appropriate and meaningful.

A logo designer should be very technical and loyal in his profession. They should have the entire knowledge of the creation and also about the enterprise they designing for. Thus all among these some important questions are to be asked before taking a new logo designing project. These questions are mentioned below.
i. Getting all the relevant details about the company
As it is one of the tough tasks to decide the name of an enterprise, similarly designing it logo is also a tough task. You need to evaluate all the details regarding the company such as, the product they are dealing with, name of the company, the motive behind the formation etc. And also a brief description about the competitor of the said company is essential.

ii. Competitors and age of the business
The rivals and the competitors are the close enemies of a particular company, thus you need to ask your client about the competitors and depending upon that you need to create an exceptional design. Beside this the other thing that should strike in your mind is about the time period or the age of the said organization, as it will help you to know about the popularity of the organization and thus keeping in mind you could create a meaningful logo.

iii. The message that the logo needs to say or the best symbol you prefer
Before starting to project a logo you should ask your client about the message he/she wants to deliver by means of logo or what promotion they wants to make. As it has been a nature of logo that it should be meaningful. Along with this you should also get a suggestion about the symbol or graphical representation from your client. This will make your work easier and very high in quality.

iv. Deadline or the time period of delivery
Time is considered to be the most valuable thing. So the next you should ask your client about the deadline or the time period for the delivery of logo. Thus if he/she provides you a deadline, you need to complete your work within that. It will help you to work faster and efficiently. Always try to listen about the deadline from your client as if it is short period you need to rush and complete your project. Thus deadline is one of the important questions to be asked.

v. Budget
Money is one of the important factors for both the client and the logo designer. A company always has a budget related to its any of the work. Thus you need to ask your client about the budget.

You should better know that how much of fund your client wants to invest in the creation of logo. Depending upon this you should perform your work.

vi. Exact design of the logo and presentation
The next and foremost question that should appear in your mind is about the entire design and its presentation. Often some of the enterprise doesn’t even know how to display their name in the logo. So you need to discuss these in details with your client about the exact design and how will the logo look like.

And what about your individual goals? You work hard to create a good name for yourself by doing the right thing and exercising personal integrity. You dress nicely and take care of yourself so you can create a positive impression on the people you encounter in your daily life. But all that counts for nothing on the internet; your entire life is distilled to whatever happens to be on Google’s front page. And, unfortunately, Google’s front page is not always flattering, honest, or fair.

Internet image is simply a new sphere you must be cognizant of and attend to. Luckily, by enlisting the reputation management services of the right companies or consultants, you can stay on the right track and achieve the optimal reputation that will help you move forward in life.

How do reputation management companies use their expertise to help you improve your business or your life? The first step is an analysis phase. Will your reputation management campaign address specific issues, such as a particular website or a discrete article? Or is it simply a preventative effort meant to build up your defenses against future attacks and strengthen the image you have in mind? Exactly what goals are you trying to accomplish through your reputation management efforts? The answers to these questions determine the direction that your reputation campaign will take. Different goals take different approaches to accomplish.

After the analysis phase comes a planning phase, in which the reputation management consultants chart out the methodology they will use to address your reputation issues. Search engines can take dozens of different aspects of a website into account when determining its placement on their results page. The planning phase involves coming to an understanding of how exactly to leverage these different factors in order to craft an effective campaign.

After planning comes implementation. At this point, the expert’s reputation management services involve creating optimized content and promoting positive existing content, thus effectively removing the damaging websites from sight. Reputation management bases itself on the proven assumption that people are more likely to see information located on the front page of a search engine than, say, information buried on the fifth page.

What steps have you taken to ensure that your reputation (or the reputation of your business) remains untarnished in the long run? You are on the right track by reading articles like this one—becoming educated is always the first step to achieving a positive change of this type. And as internet reputation becomes a more and more important consideration, those who are on the cutting edge will be rewarded.

This tutorial (which includes a screencast) teaches you how to add custom arrows to your photos and includes freebie downloads. These arrows would be great for presentations, or adding information to photos.

This tutorial walks you through how to create staples, or if you want to skip the tutorial, you can scroll to the end and download. This is a pretty simple tutorial and the use for these is almost endless.

This tutorial shows you how to make tileable wallpaper. I hope you enjoyed this roundup, and be sure to check out Pugly Pixel for more great photoshop treats and downloads.

*All photos from PuglyPixel.com

Here are my favorites:

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.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>My Awesome Portfolio</title>
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="slides.min.jquery.js"></script>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script type="text/javascript">
		WebFontConfig = {
			google: { families: [ 'Lobster::latin' ] }
		};
		(function() {
			var wf = document.createElement('script');
			wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
			wf.type = 'text/javascript';
			wf.async = 'true';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(wf, s);
		})();
	</script>
</head>
<body>

</body>
</html>

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 <nav> 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.

<nav id="top">
	<ul>
		<li><a href="#head">Home</a></li>
		<li><a href="#portfolio">Portfolio</a></li>
		<li><a href="#about">About</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul>
</nav>

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 <header> element to wrap the title and tagline, and then use <p> on the introductory sentence.

<header id="head">
	<h1><a href="#">John Doe</a></h1>
	<h2 class="desc">designer by day, superhero by night</h2>
</header>

<p class="hello">I am a web and graphic designer. I design interface for web and mobile apps.</p>

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 <section> as a container of the slider. Inside this container we’ll place an <h3> title and a series of our slider items. Don’t forget to add separator before and after the slider.

<span class="separator"></span>

<section id="portfolio">
	<h3>Featured Project</h3>
	<div class="slider">
		<div class="items">
			<figure>
				<img src="img/items1.jpg" alt="Portfolio Items" />
			</figure>
			<div class="details">
				<a href="#" class="name">News Icon</a>
				<a href="#" class="category">Icon Design</a>
			</div>
		</div>
		<div class="items">
			<figure>
				<img src="img/items2.jpg" alt="Portfolio Items" />
			</figure>
			<div class="details">
				<a href="#" class="name">Go Design</a>
				<a href="#" class="category">Logo Design</a>
			</div>
		</div>
		<div class="items">
			<figure>
				<img src="img/items3.jpg" alt="Portfolio Items" />
			</figure>
			<div class="details">
				<a href="#" class="name">Desain Digital</a>
				<a href="#" class="category">Web Design</a>
			</div>
		</div>
	</div>
</section>

<span class="separator"></span>

To make the slider works, we’ll need to initialize Slidejs by adding a script inside the <head> 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 <section> 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.

<section id="about">
	<h3>Meet The Hero</h3>
	<p>I'm John Doe, a web &amp; 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.</p>
	<p>If you want to know more about me, you can reach me via contact form below or one of these social network.</p>
	<div class="social">
		<a href="#" class="fb">Facebook</a>
		<a href="#" class="linkedin">LinkedIn</a>
		<a href="#" class="twitter">Twitter</a>
		<a href="#" class="lastfm">Last FM</a>
		<a href="#" class="wp">Blog</a>
	</div>
</section>

<span class="separator"></span>

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 <section> container.

<section id="contact">
	<h3>Drop Me a Line</h3>
	<form action="#" method="post">
		<div>
			<label for="name">Your Name</label>
			<input type="text" id="name" />
		</div>
		<div>
			<label for="email">Your Email Adress</label>
			<input type="text" id="email" />
		</div>
		<div>
			<label for="subject">Message Subject</label>
			<input type="text" id="subject" />
		</div>
		<div>
			<label for="message">Message Text</label>
			<textarea name="message" id="message" cols="30" rows="10"></textarea>
		</div>
		<input name="submit" id="submit" type="submit" value="Submit" />
	</form>
</section>

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 <head> 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)

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