PVM Garage

Photoshop Treats

LaylaP — Fri, 03 Feb 2012 07:40:06 +0000

I stumbled across Pugly Pixel while searching for quick and easy Photoshop tutorials. Pugly Pixel is ran by Katrina, who has created a great selection of freebies for download. She also offers services/extras for a very reasonable charge. I’m really impressed by her clear instructions and the short and sweet projects she offers. The “freebies” section of her site include tutorials, downloadable images, and blog layouts. This is such a great resource for those just starting out in Photoshop. Here are few of my favorite tutorials:

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

Speed Design From Code Year

Max — Thu, 19 Jan 2012 01:01:02 +0000

I found out about Code Year a couple days ago. It is a website launched by a Y-combinator company called CodeAcademy. They grabbed quite a lot of attention by signing up 200,000 users in just two days. Recently, I stumbled onto this post by the landing page designer about how he designed the CodeYear landing page. I think the key takeaways here are to focus on simplicity and what you want the visitor to do. Enjoy!

Some Of The Earliest Color Photos

Max — Thu, 29 Dec 2011 21:08:14 +0000

The Denver Post has a gallery up of some of the earliest color photos taken during the early 40s. I thought some of the images were pretty cool. Here is the link.

Here are my favorites:

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.

Profile of an Artist – Crazy Mary

Max — Fri, 30 Sep 2011 13:48:45 +0000

This week, I have been vacationing in Holden Beach, NC. One of the more interesting things that I did here was pay a visit to Crazy Mary. She is a local “artist” who collects junk from around the area, and assembles it into, well, crazy stuff. Here is a video:

You can check out her gallery too.

15 Ways to Improve Website Crawling

admin — Thu, 08 Sep 2011 20:04:28 +0000

If you want maximum search engine traffic you need to make sure all your content is indexed by the search engines. Follow these tips below and you will not only improve your site, but you will also improve indexing and traffic gains over the long-term.

1. Create a breadcrumb trail – Not only are these great for improving usability, but they also add structure to your site and help search engines find deep content.

2. Add 3-5 related posts at the end of individual posts – This is possibly the best way to make sure all your content is found. Usually related posts are grouped via tags.

3. Create manual deeplinks to old posts in any new post – Deeplinking using descriptive anchor text not only improves indexing, but can increase your search engine rankings for the keywords used.

4. Create roudnup posts of your best content – Sometimes the best way to keep old content fresh is to create a roundup post of your old posts. This helps search engines and new visitors find new things to read.

5. Post your content to social sites – Always post your content to sites such as Twitter, Facebook and LinkedIn and have social sharing buttons on your site.

6. Add popular posts in the sidebar that change monthly – This is a good way to tell search engines which content on your site is most important and can give those posts more authority in the rankings.

7. Make sure your category links are prominent – Always have direct links to your category pages in a prominent location on every page.

8. Use a consistent navigation on all pages – Good site structure is the foundation of making your site more search engine friendly. If users can’t easily navigate, search engine spiders won’t be able to either.

9. Create an html and xml sitemap – This is easy to do and a very good way to help search engines find all your pages. Submit your xml sitemap via Google Webmaster Tools.

10. Link to your sitemap and other important pages in your footer – Linking to your HTML sitemap not only helps visitors navigate if lost, but it helps search engines understand your site hierarchy.

11. Add content on a regular basis – Fresh content means fresh indexing. Search engines always want new content so if they see your site has great content on a regular basis, they will want to crawl it more often.

12. Validate your website’s code – Again, a search engine friendly site must start with good coding. Validate your site’s code and always follow the latest web standards.

13. Redirect any broken links – Broken links are bad for business. With them, you are often wasting linkjuice, losing visitors and hurting your rankings. 301 redirect any broken links to their new locations.

14. Check Google Webmaster Tools for crawl errors – This tool is your best friend. Look here for any crawling issues that could seriously be affecting your website.

15. Get backlinks to your home page and sub pages – An easy way to get your site fully indexed is to get some natural backlinks from sites that are already being crawled often. Don’t just look for links to your home page, look for links to sub pages as well.

Make these changes and your website will be a search engine spider’s best friend!

Author

Be sure to check out ForHim.com for all your printing needs such as church bulletins, including big discounts for any church printing clients you might have or need.

Facebook and Virtual Birthday Cake

Max — Fri, 19 Aug 2011 20:55:54 +0000

I have a friend who is internet savvy and has adopted the habit of tracking down birthday cake images from google image search and posting it on his friends’ Facebook walls. I tried it myself, and it is enterprisingly easy to find just about anybody’s name on a cake photo. Today is actually my birthday. Here’s my cake!

This one is a pretty cool cake, but it’s hard to see my name on it.