PVM Garage » Web Design

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

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)

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

Happy 4th of July in Pictures

Max — Mon, 04 Jul 2011 08:47:32 +0000

Hope you all get a chance to check out some live fireworks…

Icons-Land: Quality Icon Source

LaylaP — Mon, 20 Jun 2011 23:48:18 +0000

“I think you have the best looking icons of anyone on the web.”

I couldn’t agree more. Icons-land has an extensive collection of stock icons, vector icons, and emoticons. A lot of stock icon sites are difficult to use, forcing you to sledge through image after image. Icons-land has a clean, easy-to-navigate site, with clear link menus.

Each collection gives details on price, format, and sizes; therefore making selection easy. Icons are a great addition to websites because they transcend (for the most part) language. People speaking many different languages will still recognize a truck or doctor and therefore, these can increase the easy of usability on your site, application or program.

The following are some of my favorite collections from Icons-land:

Vista Style Weather Icons Set

I love the clarity of the weather icons, the detail is impressive especially for such small images. The options available are extensive, your weather icons can be more precise than typical weather sources. Weather icons are great not just for weather-related apps and websites, but also for hotels, restaurants, or venues. Any site that is promoting to tourist who would be impressed that weather information is included with other details.

Vista Style People Icon Set

The Vista Style People Set has a great diversity of people; covering uniforms, culturally-specific clothing, historical dress, as well as typical demographic variances such as gender and age. These are great for human resource programs, presentations, and social networking and dating sites. This collection is also offered as a Vector Set, allowing for further creative manipulation.

POI Vector Icons

The POI Vector Icons are great for navigation programs, maps, or any site/application that wants to include point-of-interests. This vector series offers icons for gas stations, movie theaters, churches, subways, and more. The images are clear but bright, making them easy to understand and decipher. These could easily transfer to print or packaging.

Custom Design

If this extensive collection doesn’t fit your needs, Icons-land also offers customized icon design services, allowing you two options:

Designing Exclusive Icons Set: this service is best when needing icons designed exclusively for you. They design icons in the style you need and do not sell them to anyone else.

Extending Existing Stock Icons Set: this service is best when you have purchased one or more icon sets, but need something specific that is not in the set. An extension of the set will be created for you, in the same style.

More details can be found on Icons-land’s Custom Design page.

This service is wonderful for those who would like to focus on designing larger projects or who only need a few icons for their site. Overall, I’m really impressed with the dedication to detail Icons-land offers and the real diversity of options within the categories. Others feel the same way:

“Icons-Land icons gave my iPhone application the exact cohesive look and feel I was looking for, along with great personal service to meet my custom needs. The turnaround time for delivery was absolutely amazing, especially in a world where time-to-market means everything!”

“The custom icons created for us by Icons-Land are a key part of our re-branding strategy. They are professional, communicative and the service was excellent. I would recommend Icons-Land to anyone who needs custom illustration or icons for their web applications.”

*all quotes from icons-land’s site.

How to Create a Flash Website

MotoCMS — Tue, 17 May 2011 15:35:55 +0000

Hello there! This post is for those who’re looking for a low-cost variant of creating a
Flash website. There are a few situations when this article will be of a great use to you:

- you don’t have time (money, patience, will, etc) to hire a professional web developer to build a Flash website of your dreams;
- you don’t like web developers at all (or you are afraid of them because of a bad experience in the past);
- you want to create a Flash website without any external help but you are not sure that your skills and knowledge are good enough;
- you are a geeky developer and you have hundreds of orders from premium clients for website creation but you can’t do everything at once.

So, I want to share my experience in Flash developing with you. You probably heard a lot about MotoCMS company, but you’ve never tried their products yourself. Besides, the free 30-days demo version of professional Flash CMS is a cogent argument to start working.

Among the variety of Flash templates I chose the theme #33054 which looked rather attractive with a splendid photo gallery – it was a perfect variant for my purposes. By the way, did I say that I was going to create a website for a tour firm?

After a short registration I received an email with the demo access data and the link where I could find my template. And the MotoCMS admin panel is at my disposal.

Even on the screenshot you can see many useful tabs and buttons which will help you to create Flash website without any troubles (you should definitely try all of them yourself). If you don’t mind I won’t describe all those functions as you can have a good look at them any time. I’ll go into details on some features only.

I appreciate the template’s look greatly but I want to have a unique Flash photo gallery so, I need to do some customizations. The first thing that I start working with is the background – I want it to be green. You know, green is a very lovely color. It always associates with new life and fresh emotions. And after a few minutes of googling I found an amazing light-green background (if you want to do the same, make sure that your image is in a .jpg formant).

To upload a new image to the Media Library click once on the background and the Background Image Slot is ready to serve you.

A double click will open the Media Library with all your photos, videos and sound items.

And the Media button on the upper left corner of the window will help you to upload all necessary materials in a matter of seconds. It sounds fantastic but, believe me, it’s true! The next double click on the uploaded picture will set it as a background on every template’s page.

But now blue pictures’ frames on the green background don’t look good so, I want to do something about it. Checking my pictures one by one I change image properties in the Splash Button Slot located on the right of the template. There is a Blend Mode drop-down tab. What I like most of all are the Darken and Multiply parameters, so I choose them.

And one more thing, I’d like to change an order of displaying sub-galleries’ pictures on the Splash page. For this I just need to drag and drop these images to wherever I want. Also there is an opportunity to re-size and rotate images.

Giving the final touch to my Splash page I decided to change the title. It was as easy as ABC. A double click on the title section displays the Company Name Slot, that’s where you choose the label you want to modify and write whatever you want!

Now you can easily work with other website pages. Double click and drag-and-drop principles perfectly work with every template’s element and on every page, so I think you’ll have no troubles. You can choose the page to work with through the top menu panel or with the Current Section tab.

You can also easily manage the Contact form of your Flash CMS template. Open the Form widget with a double click (or through the menu panel) and arrange the form fields or press the Configuration button for more details.

There are several blue navigation buttons on different template’s pages which should be made green like the background is. I offer you to select the button with the mouse pointer and then click the Content Part Color tab on the right panel. By shifting left and right scrolling bars you’ll be able to choose the right hue, saturation, contrast, brightness and so on.

By the way, this stunning and professional Flash CMS allows you to edit control panel and website preferences. It is well known that Flash websites are very attractive but they are very hard to promote. From now on your interactive content is easily arranged for search engine bots crawling. So, SEO-friendly settings of all Moto Flash templates will definitely please you. Frankly speaking, when I saw that every Flash page has its own URL and can be indexed by search engines I was totally amazed too.

And the last note: don’t forget to press the Compress button before logging out of your admin panel. It will save your time and secure your XML files from errors while saving the template’s modifications.

And now I’m ready to present you my lovely Flash website which was made by myself in two hours. After everything was done all I needed were some good texts to run the website up.

At the very end of my review I’d like to say that Flash templates with the Moto content management system appear to be very convenient and user-friendly. I didn’t have any substantial problems while working with this system. It is a perfect chance to create a magnificent flash website without extra efforts and frustrations. So why wouldn’t you try it?!

Website Roundup

LaylaP — Thu, 12 May 2011 12:24:37 +0000

If you are a “font nerd” or just generally interested in typography, these sites might already be known to you. For everyone else, here’s a website roundup:

Llamafont.com is a hilarious website, where you can use “llama font” to spell things out. You can then save the text, share on facebook or send to a friend. Although this site only has one font, it’s a funny and unusual one.

Steedicons.com, offers a set of 300 icons for $30. What a great idea, everything from hand-drawn twitter icons to Star Wars characters. I think this a great idea for graphic designers. Many people don’t need a large project, but rather an arsenal of small icons to play with or add to their site.

Thursday, shows you how to advertise your font nerdiness with her tutorial on making your very own “font nerd” tee-shirt. Very cool.

I stumbled into the Sci-fi section of dafont the other day, and I had a lot of fun messing around with the fonts from some of my favorites, I’m looking at you SEGA. Go to dafont.com to check them out.

Best Free Android Photo Apps Pt. II

LaylaP — Wed, 27 Apr 2011 18:23:17 +0000

This is round two of my review of Android photo apps. I’ve downloaded and used a few more photo apps that I’d like to share with you.

First up is picplz, which is really great for post editing. You can apply different filters to any photo on your phone. They also have a web portal to upload images and share them to facebook and twitter. The amount of effects is quite impressive. What really sold me on this app is that I can use it on my computer too. A lot of photo apps are phone only, so you use them, fall in love and then can only use them on your phone. I think this is a great option for those of us who aren’t pros at Photoshop, but still want some fun effects.

The above is picplz’s website, after uploading the photo you can scroll across to choose which effect you prefer. This function really adds to this app, especially since its free!

Next, is ActionSnap, which is a great app for creating split-screen shots.This app gives you the option of choose different split screens, or a regular camera. You can also add Lomo or Sepia filters before taking the photo. This is a fun app for for capturing kids or dogs running, and I think these photos would look great framed. I’ve used regular cameras that offer the same effect, but ended up with a half a role of film with just my arm in the shot. I do wish that this offered more “effects” such as fish eye and holga, that way I wouldn’t have to switch between this and others. However, the app is super easy to use and the photos turned out great. (I used the Lomo filter on mine).

Next is Little Photo. This app offers a lot of effects similar to Vignette, but also a whole gallery that I think kids would really like. The first gallery of effects is your usual sepia, lomo, etc. The second gallery has things like charcoal and colored chalk. Although these effects are fun, I don’t see them as being useful as they completely distort the photo. One other downside is that the effects are somewhat harsh compared to other apps. However, the app is great in that it keeps an original of your photo and then saves the altered one as well. I really like this because I’ve regretted taking photos with effects on them as there is no way to remove it.

Finally, I’ve added to apps for fun:

Fatbooth. The name says it all. Turn your grannie into a fattie. This app wasn’t free on the iphone, but was free with Android. Win. The app basically takes a photo of you and stretches it out so you look, well, fat. I’ve haven’t gotten sick of this app yet.

Zombiebooth. Similar to fatbooth, this app turns you into a zombie. It takes it up a notch though by adding sound and interaction. (if you touch the screen it will spit blood like it bit you.) The only downside of this app is that it can scare the crap out of you if you aren’t prepared, and the noise is hard to turn off. However, turning yourself into a zombie might be worth it.

Website Roundup

LaylaP — Fri, 15 Apr 2011 16:44:56 +0000

While perusing the web, I found some fun websites.

Polaroin

This website is great for turning photos into Polaroids with the ability to add captions, without the necessity of downloading an app to your phone. I really like this for photos that I already have on my hard drive but want to add the Polaroid edge. Also, its free! Free is way cheaper than the cost of real Polaroid film.

Pintrest

This website recently launched, and is invite only. But it’s really great for keeping track of “inspiring” things you find across the internet. After receiving an email invitation (you can request one on the homepage), you are given a “pin” to drag to the bookmark area of your browser. Then, when you are on a website with an image you like, you simple click on the pin and it lets you add the photo to a “mood board” that you title. I use mine a lot when I run across art photos or other items that I think will be hard to track down again. It then saves all these images in your account, with the original link. You can also access other user’s “boards” if you need some inspiration.

20X200

20×200 focuses on bringing art to consumers in an affordable way. The equation on the site is as follows:

(limited editions x low prices) + the internet = art for everyone

This has turned into a successful site for both artists and consumers. Artists are able to reach a wider audience than the typical corner gallery and consumers have access to pages of art at an affordable rate. Plus, this allows you to be the art expert. You don’t have to pick and choose from what is popular in your area, (where I live they specialize in life-sized bear statues) but can choose what works best for your taste, and decor. I also think this is a great website for young artists who have been known throughout history as struggling. Now consumers can support the artist that they like and decorate their house on a budget. win/win. What new websites have you found?

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