hv-designs

No Effects Poster Pt. 2 – The Burger

Aaron — Thu, 02 Feb 2012 07:01:59 +0000

Today we will be working with the most basic tools in Photoshop and creating a very simple illustration, to practice using only the most basic effects. We have now made it over to part two of our tutorial, designing our awesome burger. If you are ready to start design, let’s get started.

Alright, start out with a new document 600px x 600px and fill it with #89c3db. Now grab your rounded rectangle tool and set the rectangle radius to 25. Change your foreground color to #e4bf84 and draw out a rectangle that is 510px x 80px. You are gonna wanna space it somewhere near the bottom. Right now there are no specific pixels for spacing yet. We will worry about the spacing once our hamburger is done.

Now, grab your pen tool and choose the Add Anchor Point tool. Add an anchor point at the center of your rectangle and pull it down to give our bottom bun just a little bit of a rounded feeling.

The Burger

Ok, now we are going to create our simple burger patty. To create our burger patty we are going to change our foreground color to # and then we are going to grab our rounded rectangle tool again. This time I want you to draw out a rectangle that is 550px x 95px.

Now grab your Add Anchor Point tool again and give the top and bottom a slight curvature as well.

The Condiments

We are on our way, now we just have to give our burger that little extra something to make it look delicious: the condiments. We will start out by adding the cheese to our burger. To do this you can either use your polygonal lasso tool or your pen tool. In either case you will want to create a new layer above your burger layer and change your foreground to #f3ad53.

Now make a selection that looks like the cheese is curving over the burger. It’s basically a rectangle on the sides and top, with a triangle at the bottom. This is what we got for our selection:

Now fill your layer and you have your cheese.

Now to draw out the next condiment, our lettuce. Depending on how detailed you want to get with it you can use your pen tool, but I found an easier way to make some nice lettuce. Grab your freeform pen tool so you can just draw out some nice lettuce shaping. If you have a tablet to draw on now is a great time to use it, but you can do it with your mouse as well. I have never seen a perfect piece of lettuce on anything, so why make ours look perfect?

This is our shape, on a new layer and filled with #56b861:

Now for the tomato, my favorite piece of a sandwich. The tomato is made up of another simple rounded rectangle with a little curve to them. So, grab your tool again and choose 10px for the radius and #ca4a4a for your foreground color.

Drag out a new rectangle that is 535px x 65px. Again we want to grab our add anchor point tool and give the tomato some curvature to it. We want to add a little more of a curve to our tomato than anything else.

Oh yea, the condiments are all finished. Now to finish off our burger with the top bun.

The Top Bun

Change your foreground color to #e4bf84 and drag out a circle that is 545px x 300px. It will overlap the rest of our design, which is fine for now. We are going to take care of that in the next step.

Now, buns all have a little curve to them, so we will add that in now. Go ahead and rasterize your layer and then grab your elliptical marquee tool and draw out a large selection with the same curvature that you would like your top bun to have.

Once you have your selection, right click and hit Select Inverse. Once you have the inverse selected you will want to hit your delete key, and that is your top bun curvature. You may need to play with it a few times to get it exactly how you want.

You will notice that the tomato is barely showing, which is what we wanted. The top bun still feels just a little to much like a circle so enter into free transform mode (CTRL+T) and just shrink the buns height a smidge until you are satisfied and enough of the tomato is showing.I shrunk ours down to 95% height to get the right feel that I wanted.

What is our burger missing? Well the top bun is sure missing its sesame seeds and then the burger still feels to be lacking something….grease. Let’s get started on the sesame seeds first as this is one of the easiest steps.

Change your foreground color to #FFF and grab your ellipse shape tool. Now drag out a simple ellipse that is 25×4 and place it on your document. Now just duplicate your layer over and over, moving them around and rotating if you want, to give yourself the sesame seeds.

And to add the grease simply grab your Blob 1 Custom Shape Tool and draw out some grease shapes with #f0a45a set as your foreground color. Be sure your place them underneath your burger layer and there you have it, your grease!

Our burger looks great. Now, you can start playing around with some effects and textures to really get a nice looking illustration. We added a few shadows, some texture to the burger, and an overlayed noise layer and get another version.

Conclusion

We now have our drink and our burger for our Illustrative Poster. Next we will be creating the fries and fry basket and then will put them all together with some simple text to create our poster. Be sure to check out the article that spawned this tutorial series and Part One of the series.

Want to share your results? Go ahead and post them to our Flickr group, Facebook, Twitter, or just post them in the comments for us to see.

No Effects Poster Pt. 1 – The Beer

Aaron — Mon, 16 Jan 2012 04:17:29 +0000

Today we will be working with the most basic tools in Photoshop and creating a very simple illustration, to practice using only the most basic effects. There will be three phases to this tutorial in order to get our final product. Today we will start out by designing a simple glass illustration, using only shapes and the paint bucket tool. Let’s get started…

As always let me show your our final product. Below is the full version of what we will be creating over the next week. Today we will be working on creating the beer glass.

To get started create a new document that is 600px by 600px and fill it with #89c3db

Setting Up Our Outline

Alright let’s get started by drawing out the outline to our glass. Go ahead and change your foreground color to #a1a1a1 and grab your Ellipse Tool. Drag out a circle that is 355px wide by 90px tall. You are going to want to center it horizantally and space it 60px from the top of our document.

Now, this will be the only time we open up the layer styles and that is just to reduce the fill and make it a solid outline circle. If you have your shape styles set up you can just choose a stroke only ellipse to draw, but in case you don’t apply the following:

Awesome! Now you are going to want to duplicate your layer and bring it down 310 pixels. You can do this by selecting your move tool and holding down the ALT key, moving down and duplicating your layer all at the same time.

Now let’s enter into free transform mode, CTRL+T, and shrink our circle to 75%.

Ok, now go ahead and rasterize your layer for your small circle because we aren’t going to need the full circle for our design. Once you have the circle rasterized grab your rectangle marquee tool and draw out a 240px rectangle, drag it down just a little over the top line of your circle, and hit the delete key.

Now, grab your line tool and draw out a 4px line that is 395 pixels tall. Enter into free transform mode again and now we are going to rotate our object to give us one side of our glass. Hold down your SHIFT key and rotate it -7 degrees and line it up with our glass.

Now simply duplicate your layer, enter into free transform and flip horizantal, and line it up on the other side of your glass. Now we have the outline for our glass and it’s time to move onto the next step, the actual creation of the glass.

Creating the Glass

Alright, now comes the glass creation. The first thing you want to do is make a selection that just barely goes beyond our glass and change your foreground color to #c7c7c7. My selection is 367px(w) by 480px(h). Create a new layer above your outline layers and fill it with our foreground color.

Awesome, now unselect your image and move your layer down below your outline. To make things easier you might want to Group together your outlines, that way you only have to bring it below the group instead of the other layers. Now for the very tedious part. Hold down the CTRL key and the SHIFT key and begin selecting each of your layers to have a full selection of your outline.

Now, right click and hit select inverse. Grab your eraser tool and begin erasing away the extra from our grey layer. You will want to really zoom in on the document so you don’t erase any of what we need. This will definitely take some time. Make sure you are letting go of the eraser tool every once in a while just in case you have to go back you aren’t going back too far.

When you have finished lower the opacity of our layer to 50% and you have the makings of the glass.

Create the Beer

Now it’s time to really get going on this baby. Change your foreground color to #eed7a0. Grab your rectangle marquee tool again and create a selection that is 355 by 330 and space it 35px from the top glass spacer and fill it with our foreground on a new layer.

Now, select the thumbnail of our glass layer (holding down ctrl and clicking the thumbnail) so you have a selection of your layer. Now we need to shrink our layer. Go to Select–Modify–Contract and choose 15px so you have a selection. Now select inverse and hit delete. It should look like below-

Awesome, now change your foreground color to #dcd6c0 and grab your ellipse tool again. Drag out a circle that is 305px by 85 px at the top of our glass. Depending on how high you want your foam you can line it up directly at the top, but we kept it down a little bit and showing some of the corners from the beer.

Looks funny right? Well now we are going to be creating the next layer of foam. Duplicate your circle and nudge it up 3px. Change the color to #ece5cb. Now, duplicate your circle one more time and nudge it up 7px. Change the color to #f5f1e4. If you want more foam you just add more spacing and a few more of our last layers. We are sticking with small foam though.

That there could be your beer, if you wanted to go for the most basics, but we are going to add just a few more things to make it look more realistic. We want to add some bubbles to our beer so we are going to grab our ellipse tool, change the foreground to #d5cca7, and draw out some random bubbles, rotate them, to whatever your hearts desire.

Now we want to give a few subtle glass highlights. To do this we are going to create a new layer, change our foreground to standard white, and lower our layers opacity to 45%. Make a selection of our glass layer and fill it with white. Contract the layer by 15, using our earlier method, and then delete the inverse selection. Shrink it down a little bit to get the right reflection for whatever you are doing.

Do the same with the top of the cup, using only our top circle for selection, instead of the full glass. This time when you do your selection you will also want to move your selection down 15px so all you are left with is a line type shape. Lower the opacity to 25% and your are finished!

Conclusion

We now have a super amazing glass of beer without effects. The next stage will be creating our fry basket, continuing with no effects. If you want to take your glass to the next level start playing around with colors on your outline, giving your glass layer more shadows and highlights, different style bubbles, and play with the foam to give it more feeling. Starting out with no effects can really get you the feel that you are looking for and then you can start adding in the additional details to get something really fantastic. Watch our Dribbble feed for what you can turn this glass into.

The Importance of NOT Using Effects

Aaron — Sat, 07 Jan 2012 04:48:51 +0000

Alright guys, I know that you would love to see another tutorial, and believe me we have plenty for you, but I wanted to take some time out to discuss something very important in the design industry that seems to be lacking lately. I know that part of this is our fault as we have not released a tutorial to date stressing the importance of not using too many effects. Our tutorials are design to teach you the ins and outs of Photoshop yes, but we are also here as a guiding hand for you to make your way into the design industry, and that doesn’t always mean to blow out special effects.

Recently on Dribbble there was an excellent No Effects Challenge posted by the amazing Jonathan Ogden (who we are going to reach out to and see about getting a tutorial from his awesomeness) that really inspired this post. Each and every shot in the challenge was, obviously, created without using any layer styles or effects in Photoshop, just standard graphic talent. They are all amazing, amazing shots, but what is the point of them? Why have the layer styles if you aren’t going to use them? The importance and reason are both one and the same in their answer, because it’s important.

I am not by any means saying that we should just give up effects all together, but I am saying that it is VITAL to practice without them. I find that whenever I am strugling for inspiration on a design or wondering what Typography will look good on this poster, that if I just step back from the effects and put everything into an almost matte like look, that it flows together nicely. Let’s take a look at a few areas that can really benefit from using little to no effects.

Typography

Typography is one of the most important aspects of any design, if not the most important. You can have an excellent looking website, but if the typography sucks that’s all people are going to notice. Believe me on this because typography has to be the weakest aspect to my design and it really sets me back sometimes. Honestly, without the great people over on Dribbble and Forrst I would be lost in the dark when it comes to typography, but the best advice I ever got was to just step back from the effects and play on font and placement only, before bringing any of the layer styles into anything.

Here are a few of my favorite Typographic images from the no effect challenge:

A Very Simple Sports Style Typographic With No Effects

Free Binder Cover by Brad Blackman

Berlin Likes Fancy by Julie Ann Horvath

Those are, without a doubt, my top three typographic elements from the No Effect Challenge. Every single submission has been awesome and they just keep building and getting better. If you want to submit a typographic to the No Element Challenge and are a member of Dribbble post it up and let us know in the comments. If you are not a member of Dribbble then post it in our Flickr group so we can see the awesomeness.

Random Elements

Throughout the main challenge there were so many inspiring posts but not really a category to fit them in but I still wanted to show off the most inspiring no effect elements from the challenge, in my opinion.

No Effects Turntable by Alpis Design

NoFX by Jow Fawkes

Rum Runner by Mike Kamanski

I chose those three as my most inspirational because it just goes to show you how versatile design really is and that you can use less effects and still come out with an amazing design, whether all together or just as an element in the design. All three of the above designs can stand on their own as excellent designs or be placed into a project at any point, but most importantly you can then take the basis of what you created, add some effects, and bring your design to the next level, if that is what is required.

Conclusion

Be sure to check out and follow the design contest as I am sure it will continue to grow and post. I hope that what we talked about today helps you guys with any inspirational/technical issues that you might be having. I am interested in hearing what you guys have to say about the subject and seeing some of your no effect work.

Simple App Log In Screen

ChristianJames — Tue, 03 Jan 2012 15:00:37 +0000

Today we will be designing a simple log in screen for an iPhone/Android App. Apps are the newest rage and as a designer chances are you will be asked to design some kind of screen for an app or at least to change up the design for an app, so we decided that we will start doing more app tutorials, as well as other tutorials. Now, let’s get started…

We will be building our application screen at a 960×640 pixel resolution, but will be keeping in mind that screen size will change all the time, so we want our design to be functional as a fluid design, as well as a static design so when the app would be implemented on anything but the iPhone it is easy to bring over. Anyway, let’s get started with our design.

Open up a new document in Photoshop at 640×960 (obviously). Create a new layer and fill it with #343434 and then go download the Carbon Fibre pattern from Subtle Patterns (http://subtlepatterns.com/?p=22). Go into your layer style options and apply the CF pattern we just downloaded, changing the scale size to 55%.

Alright, now let’s start with our logo implementation. In a normal design process you will already have a completed logo ready to use on the app, but for now we are going to just be using a text filler logo with some basic metallic styling. Grab your favorite font and type out whatever you want for the logo. We are going to be using the Carbon Block Font, 110px, #e6e6e6. You will want to horizantally center the text/logo on your document and space it 110px from the top of our document. (If you are following our guide then the left and right margins are 202px)

Now to give it a metallic look you will want to apply the following texture, if you are following our color scheme.

Now, just underneath you will want to add your site tagline if you have one. We are using an #e6e6e6 30px Caviar Dreams for our tagline, Photoshop Tutorials.

Amazing! Now let’s begin to work on the sign in form for our log-in screen! We want to use the two main aspects of a log-in, username and password, as well as the obvious submit button and then a recover p/w option as well as a Register feature.

Because this is a mobile app I am going to diverge away from the standard label to the left or top and we will be putting the label into the actual input field. With such a limited space and the fact that users are using this on their phone you want to keep the information as readily accesible as possible.

We will start our by changing our foreground color to #efefef and grabbing our rounded rectangle tool. Set your radius to 10px and drag out a rectangle that is 510×75 pixels, horizantally center it, and space it 65px from the bottom of your site tagline or logo (If your logo is a little smaller then you may want to add some additional padding between the logo and first input area).

Now to make it look just a little bit better we are going to add in some simple styles that will give it that extra pop.

Now to add in the label. Grab your text tool and choose whatever font you want. We are using Comfortaa, a free font you can find and download at Google Fonts and is safe for Web Use, but you may want to use a safer font, such as Tahoma or Arial. Whatever font you choose pick a size that is relevant to the image below, and use #979393 for the color. Type out whatever label you want, ,such as Username or Email Address, and space it 20px from the left and vertically centered.

Now grab our two layers we just created and duplicate them to create our second input field. Space our second input box 60px from the bottom of our first one. I recommend using rulers to keep to the left and right side grid so everything remains pixel perfect.

Alright, now lets get to work on our two call to action buttons, cancel and log in. We will start work on the Cancel button, using very simple layer styles and effects to create an amazing button. Grab your rounded rectangle tool again and set the radius to 5px this time and your foreground color to #a31313. Drag out a rounded rectangle that is 150×70 pixels. Line it up with your left hand ruler and space it 65px from the bottom of our last input box.

Now to give our button a little bit of style, apply the following layers:

Now, I played around with what I wanted to do with our cancel button a lot before finally deciding. At first I wanted two small buttons with just icons in them, but it just didn’t look right on the screen. I decided that I would just go with the standard text, but again it just didn’t look right. Finally I decided to try them both and it turned out excellent.

First we are going to want to create our icon. Grab your custom shape tool, go to all shapes, and choose the x icon, easy to find as it’s the only one. Change your foreground color to #530a0a and draw out a shape that is 16px by 17px. Vertically center it and space it 15px from the left of the button.

Now we want to apply a very basic drop shadow to our icon to give it a letterpress style effect.

Now grab your text tool again and choose a very bold font. We are going to be using Delicious Heavy at 34px. Whatever font you choose should be a little bit taller than our icon and #530a0a. Center your text vertically and space it 15px from the right side of our icon.

Now apply the following layer styles:

Amazing! Our button is almost finished but we have just one more step. Change your foreground color back to #FFFFFF and grab your rectangle marquee tool. Create a new layer and make a rectangle shape around our button, about halfway down the button and fill it with white. Select the thumbnail of our button, select the inverse, and hit your delete key. Now change the opacity to 20% and you have an awesome, and finally finished, button.

Now, for our log in button all we are going to do is duplicate our layers and change some colors around. The button bg color is going to be #30a012 and the color for the icon and font is going to be #13530a. You can use whatever icon you want, but we are using the standard checkmark icon that comes with PS, same sizes as the x icon.

Looking amazing, right? We could stop there, but what about people that don’t have an account? What if you can’t remember you password? To keep with the simplistic feel of our app design we will just use simple text links, with a standard line underneath them. We are using 16px Tahoma for our font on both lines. Our first line color is #a9a9a9, same with the line underneath, and for our forgotten password line we are using #a41919.

The first line is spaced 80px from the bottom of our buttons and the password link is 25px from our register link.

There we go, we are all done with our sign-in screen. You might notice that there is a little bit of extra space at the bottom. We left that space there so if the menu key is up the design won’t interfere with the log in screen (a design we will get to later on) and also because our forms will be pushed down a little bit with validation issues, if present.

If you feel like something is missing you can always add in a button for the registration instead of a standard link or even a simple gradient on our patterned background would look nice. This is our final product:

and here is our final project with a few personalized changes.

I hope you enjoyed this tutorial and we look forward to bringing you more App Design tutorials in the near future. Let us know what you think in the comments or continue the discussion over on our Facebook Page.

Ushering In A New Year!

Aaron — Mon, 02 Jan 2012 00:07:40 +0000

Today we usher in a new year, the start of 2012! This year is filled with superstitions of world ending tragedies and new beginnings. For us, at least, we are focusing on the new beginnings portion of this year. This year we have so many plans for you guys and have a new tutorial set up, a new shop, a new design, and plenty more to come this year.

We are going to be revitalizing our Freebies site, Friday Freebies, and making sure that each Friday you will receive a brand new PSD file, for free. You will see a whole new design for the HV-Network, as well as a new addition to our network (details to be released later). While we finalize details for the new design of the network be sure to check out many of our excellent tutorials, our many freebies, and the many premium items we have available from the shop.

Let’s ring in the new year with a brand new wallpaper, specifically for you guys.

Coming Soon Page :: PSD Sitebuild

ChristianJames — Sat, 26 Nov 2011 04:50:42 +0000

Today we will be entering the third step of our Beginning to End Series, coding our Coming Soon Page. If you haven’t viewed the photoshop tutorial you can view it here.

Set up your folders like such:

Slicing The PSD

We need to start out by slicing the PSD. For our coming soon page we only have a little bit to slice. We need to slice the submit button, the social network navigation buttons, and a portion of the background for repetition, and the full background.I always like to save my images as a PNG and optimize them for the web through photoshop. There are times when you need to use JPG but for most cases PNG will work the best. JPG should be used only when the image needs to be high quality, such as a photograph.

Coding Our Document

Now that we have our document images sliced it is time to start coding our document. First we will set up the start of our HTML document.





:: We Are Coming Soon ::

Now it is time to set up our CSS file before we move on to the rest of our document. As you can see in our HTML heading we will be using a separate style sheet titled style.css

@charset "utf-8";
/* CSS Document */
body {
 background-image: url(Images/backgroundrepeat.png);
 background-repeat: repeat;
}
h1 {
 font-family: "Cooper Black";
 font-size: 68px;
 color: #FFF;
}
.content {
 background-image: url(Images/background.png);
 background-repeat: no-repeat;
 float: left;
 height: 768px;
 width: 1280px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
}
.contenttext {
 float: left;
 height: auto;
 width: auto;
 margin-top: 160px;
 margin-left: 60px;
 font-family: "Cooper Black";
 font-size: 30px;
 color: #FFF;
}
.newsletter {
 clear: none;
 float: left;
 height: auto;
 width: 755px;
 margin-top: 25px;
 margin-left: 60px;
}
.field{
 float:left;
}

.field input{
 /* The text boxes */
 font-family:Arial,Helvetica,sans-serif;
 font-size:22px;
 background:url("img/box_bg.png") repeat-x scroll left top #FFFFFF;
 outline:none; /* Preventing the default Safari and Chrome text box highlight */
 -moz-border-radius:10px;
 -webkit-border-radius:6px;
 border-radius:6px;
 padding-top: 8px;
 padding-right: 5px;
 padding-left: 5px;
 padding-bottom: 8px;
}

.signupButton{
 /* The submit button container */
 text-align:center;
 float: left;
 padding-right: 0;
 padding-bottom: 10px;
 padding-left: 0;
 padding-top: -10px;
 margin-left: 15px;
}

#submit{
 /* The submit button */
 cursor:pointer;
 height:54px;
 text-indent:-9999px;
 text-transform:uppercase;
 width:170px;
 background-image: url(Images/signup.png);
 background-repeat: no-repeat;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}
.socialnetworking{
 clear: both;
 float: left;
 margin-left: 70%;
 margin-top: 115px;
 font-family: "Cooper Black";
 font-size: 24px;
 color: #FFF;
 white-space: normal;
 width: 303px;
}
-->

Our CSS starts out with the body tag which will use our sliced portion of the background to repeat on a larger screen. It then details our content to use our full sliced background image as the divs bg image. By setting the left and right margins to auto we are centering the div on a screen larger than 1280 wide. You must specify the width of a div if you are to use auto margins to center a div.

We are using CSS3 for our coming soon page; which means that this page will render differently in IE than it will in Firefox, Chrome, and Safari. Luckily CSS3 is going to be supported in IE9 which will help to maintain Cross Browser Compatibility.

Now we will set up the remainder of our HTML document to give our welcome text.






:: We Are Coming Soon ::





 
 We Are Coming Soon
 We are releasing a new website on [date here]. 
Please keep checking back or sign up for our 
newsletter and we will let you know!

It is now time to set up our newsletter. The first thing that we will do is set up our form.

As you can see we detail a few things at the start of our form. You must put in your email address, the subject title, the link to the thank you page, and the link to the error page

Now that we have finished up our signup aspect of the HTML it is time to set up our Social Networking. We will simply be using the images for our social networking. You can view this tutorial to learn how to make them pop-up on rollover.

Here is our final HTML including the newsletter:





:: We Are Coming Soon ::





  
    We Are Coming Soon
  We are releasing a new website on [date here]. 
Please keep checking back or sign up for our 
newsletter and we will let you know!

Creating the Mail Form PHP File

Not a valid autoresponse page...");
	if ($html) {
	  $tit_start = strpos($html,"")+7;
	  $tit_end = strpos($html,"")-$tit_start;
	  $mailsubject = $html;
	  $mailsubject = substr($mailsubject, $tit_start, $tit_end);
	  mail($_POST[email], $mailsubject, $html, "From: $_POST[autoresponsefrom]<$_POST[recipient]>\r\n"."MIME-Version: 1.0\n"."Content-type: text/html; charset=iso-8859-1");
	}
  }
  else if (!$_POST[email]) {
    echo "Email field required when using autoresponse mail...";
    exit();
  }

  $ndata = array("recipient","subject","required","errorpage",);

  $postfields = $_REQUEST;

  foreach ($postfields as $k => $v) {
    if (in_array($k,$ndata)) unset($postfields[$k]);
	else $msg .= $k.": ".$v."\n";
  }

  mail($_POST[recipient],$_POST[subject],$msg,"From: $_POST[email]\r\n"."Reply-To: $_POST[email]\r\n");
  header("Location: ".$_POST[redirect]);
}
else echo "Recipient, subject or redirect field is missing...";
?>

Finalizing The Coming Soon

Now we have to create the Thank You and Error Pages. Here is the HTML for the Thank You Page, which should be saved as thankyou.htm

Coming Soon :: Thank You ::

Thank You!
Thank you for submitting your email. We will
send you an email as soon as the site is ready and
you will have first access!

Our HTML page for the error page is very basic for something like this. As long as they enter their email address they will not have an error. So here is our error page:

Untitled Document Your application has an error on it. Please return to the Page and try again. Thank You!

Finishing It Up

Now that you are finished you just need to upload your files. You should have something like this:

Coming Soon Page :: Photoshop CS4

ChristianJames — Wed, 16 Nov 2011 21:01:37 +0000

Today I will be showing you how to create a simple coming soon page in Photoshop. We will be using Adobe Photoshop CS4 and will be using the very basic tools of Photoshop to create this tutorial.

First we start off with a new document. This document needs to be 1280 x 768 and filled with Black.

For the next step you will need to download these Fibre Styles from DeviantArt.

Now access the Blending Options of the main background layer and add the following styles.

Now we are going to create a rounded rectangle to host our information. Drag out a rectangle, with an radius of 20px, our to 1135 pixels wide by 350 pixels tall. Center the rectangle vertically and space it 35 pixels from the left of the screen.

It is now time to style our rectangle. We will be giving it a simple gradient overlay (as shown below)

Now to add our character to the Coming Soon Page. You will need to download THESE icons.

We will be using the singular green character for our coming soon page, though of course you can use any of them.

Place your green character on the screen 143 pixels from the top of the screen and 17 pixels from the right (measuring from the tentacle).

Now we need to remove the coloring between the eyes and mouth to make the character look more friendly. Use the magic lasso tool to select the purple coloring for the eyes and mouth.

Click the delete key on your keyboard to remove the selection. Use the eraser tool to get rid of any extra coloring that was not deleted. You should have only the background of the rectangle now instead of the purple and teeth.

Now we will use the magic lasso tool again to remove the white shadow underneath our character. Select the shadow and press the delete key to remove it.

Now select your magic lasso tool again. Select the space in the eyes and mouth one more time. When you have them selected, choose the rounded rectangle layer and hit the delete key so that only the background is showing through the eyes and mouth.

Now use the eraser tool, still selecting the rounded rectangle tool, and erase the extra pars of the rectangle, below the tentacles.

Now its time to add the content. For the first part of the content we will be using the font face Cooper Black and size 72pt. For the remainder of the content we used the same font face but used a 30pt size. This is our content, which you can use, or add your own. Be sure that, if you are adding your own, you leave enough space for the sign up bar.

Now its time to add our sign up bar. We will be using the rounded rectangle again, this time with a 10px radius using White. Draw the rectangle out to be 548px wide by 63px tall. You need to space it 33 px from the left side of our black rectangle and 20px from the bottom. Now we are going to add some styling to our sign up bar. Use the following styles.

Now using the rounded rectangle again, with a 5px radius. Space it 22 pixels from our sign up bar. Drag it out to be 154px wide by 48px tall. Now lets add some styling to our sign up button. Use the following styles:

Now using the font face Eras Bold ITC, at a size of 30pt, and using black for the color. Type out the word Sign Up and center it, both horizontally and vertically, on your button.

Now, using the basis from THIS tutorial we are going to place our Social Navigation on our page to finalize the tutorial. You are dong with your photoshop document of the Coming Soon Page. You should have something like this:

Create a Nature Scene

ChristianJames — Mon, 14 Nov 2011 19:37:53 +0000

Today I will be walking you through the process of creating a simple nature scene in Adobe Photoshop. I will be using CS5 to do this tutorial, but it will work in any variation of Photoshop without too much changing. As always this is what you will be creating:

Getting Started

Start out by creating a new document 1010*790. (If you would like to use this as a background you can make it bigger).

Leave the background white for now as we will be working in various stages of black and white before adding color.

Our Tree

First start by creating a new group and naming it “Tree”. Create a new layer in photoshop and grab your Custom Shape Tool. Choose the group “Shapes” and grab the full black triangle tool.

Now drag out a triangle that is 325*185 anywhere on the document for now. (make sure your foreground is set to black).

Now duplicate your shape layer and drag your new shape under your first triangle. Hit CTRL+T (CMD+T on Mac) and drag out a triangle to be 475*200. Now drag it down so you get a layer effect like this:

Repeat the process again but this time make your triangle 600*242 and arrange it to give it the final step of our tree. Like this:

Now select all the shape layers and choose “Merge Layers” from your menu. Now you have just one layer that you can name “tree body”.

Time to start on our tree base. This will be a simple rectangle, using the rectangle tool. Drag out your rectangle to be 105*130. Now bring that layer under the other layers and line it up so it is flush with the bottom of our tree.

Now our tree looks good but it is pretty boring right? Let’s go ahead and add a simple layer style to our Tree Body layer.

Now go to your Tree Base layer (our tree trunk) and add this layer style to it:

Now create a new layer and grab your rectangular marquee tool and make a selection of half our document, right down the center of our tree.

Fill this layer with White so that you will only see half the tree now. Use CTRL+Thumbnail to select both our TreeBody and our TreeBase layers (You will have to hold down the Shift key to select both thumbnails).

Now right click, choose select inverse, and hit the delete key. Change the layer mode to Soft Light and the Opacity to 20% so you have this:

Alright, now duplicate your Tree Group and rename it to Tree Small. Hit CTRL+T and choose to shrink it to 53% by 66%.

Now duplicate our original tree group again and rename this one to Tree_Skinny. Hit CTRL+T and choose to shrink its Width to 65% leaving the height the same.

You should have three trees that look similar to this:

Alright hide all three groups. It is time to get started on our hillside.

THE HILLSIDE

Grab your Ellipse Tool, make sure your foreground is black. Drag out three circles and make them look like hills.

I wanted a little hill to be in the background but the rest to just appear a little distorted. Go ahead and select all three shape layers now and hit “Merge Layers”. Rename this layer “Hillside”.

Drag your hillside layer beneath all three tree groups and apply the following layer styles:

The Road

That’s our hillside. Now grab your rectangle tool, making sure you have shape tools selected, and drag out a rectangle that is xx wide and a little taller than the hillside. You can use white or black for the color as we will be applying styles later on.

Alright, now grab your Add Anchor Point tool and place an anchor point on the middle left of our rectangle.

Grab the top point of your anchor point and give it a slight curve.

Repeat the same process for the right side of the rectangle.

Now hit CTRL+T again and choose Prespective for the transformation. Drag down the top left corner of the document to give the road the appearance of going away.

Rasterize your shape layer. Now use CTRL+Thumbnail to select the thumbnail of our hillside. Right click, select inverse, and hit delete so your road stops at the hillside.

Now apply the following layer styles:

The Mountain

Alright, now it is time to work on our mountain. Grab your triangle tool again and draw out a triangle 570*525. Make sure your foreground is black. Now drag your new shape below our Hillside and road layers. Center it on your hillside and make it so the tip is just under the top of our document.

Now apply the following color overlay

Alright, now grab your rectangle tool again and draw a white rectangle the covers about a quarter of the mountain.

Now zoom in on your document because we will need to be very precise here. Grab your anchor point tool and place four anchor points at these areas.

Now grab your convert anchor point tool and click on the two middle anchor points we placed. Grab your anchor point tool again and drag one up and one down so you have this

Now rasterize your layer and use CTRL+Thumbnail of your mountain layer. Right click and choose select inverse and hit delete.

This will bring it about 1px inside our mountain so you will be able to see a tiny blue line, this is good. Go to your background layer and fill it with #01ddc6 so you have this.

The Clouds

Alright, I will be walking you through the process to create one cloud. I have four clouds on my document, using the same process, but you can have as many as you choose.

Hit the “D” on your keypad to revert to your original colors and switch it so white is your foreground. Grab your ellipse tool and draw out an oval.

Now draw out three smaller ovals and place them over our first to make a cloud shape. Play around with them until you have a nice shape that you are happy with.

Repeat the process a few more times, adding more or less circles so you have a few different looking clouds. This is what I have:

The Trees

Alright, we are ready for our trees now. This phase is entirely up to you how you want to create your forest of trees. Do you want a lot of trees? A few trees? Unhide your tree layers, making sure they are your top layers, and place them through your document. You will need to resize them to make them look good.

Remember that we want to give the appearance of the mountain being far away so the trees should get smaller the closer they get to the mountain.

This is what we have:

Finalizing

Alright, now our document is almost finished, but I feel like our mountain needs just a little bit more. Grab your rectangle marquee tool and drag out a selection that is half of our mountain, horizantally. Fill it with black. Use CTRL+thumbnail and choose the mountain and hillside, choose select inverse, and hit delete.

Now you are finished! There is so much that you can do with this scene it is amazing. A thinner forest, make it seasonal, turn it into a calendar for a month, anything you can think of.

Here are a few variations that I have done:

Download The PSD File

Interview With Web Design Guru Orman Clark

Aaron — Sat, 15 Oct 2011 01:08:15 +0000

I am proud to bring you a little more information on yet another Web Designer in our community. This man has brought freebies to the design community every day since the inception of his website, and continues to amaze us with his free work. Along with sharing his amazing talents with the rest of the design community he also has released a few Premium WordPress Themes (which can be found below) and they have been a great success.

His Work

Check out some of my favorite works of Orman Clark:

The Interview

Orman, thanks for taking time out of your day to answer a few questions; firstly we would like you to introduce yourself to the readers?

Thanks for asking me to do the interview, I always find it interesting to read about other designers and their processes so hopefully this will be at least mildly interesting to others ;) Well, my name is Orman and I’m a web designer based in the UK. I’ve been involved in design in one way or another for the last 8 years or so and these days I find myself either designing themes for WordPress or creating freebies for designers.

You run two websites, Premium Pixels and your personal website, which website to you think will become more pivotal towards growing as a freelancer?

I’ve had my personal website for about 18 months now (before that I relied on word of mouth) and that did a pretty good job of gaining some interest from potential clients. Fortunately, the first version of the site was picked up by a few design galleries which definitely helped in the early days.

More recently however, Premium Pixels has begun to gain some traction and has put my work in front of both peers and potential clients in a way that a static portfolio site can’t. Overall I think the interactive / conversational element will eventually lead to Premium Pixels being the main driver of any potential client projects.

Was Premium Pixels an idea that you had for a while and then setup or just something you set up one day realizing that you had some extra files laying around?

Actually Premium Pixels was very much a spur of the moment thing and I set it up without any real “plan” or motive. I’ve always toyed with the idea of starting a blog but came to the realisation that my passion for writing is nowhere near as strong as it is for design – all of my early attempts dwindled into nothing very quickly!

Design elements and/or tutorials seemed like the next logical step and so one weekend I set about designing the site and a handful of freebies to start me off. The whole process was very quick, maybe just over a week fitted around client work.

Where would you say that your inspiration for your designs comes from?

Most of my inspiration comes from the oodles of talented designers that share their work on sites such as Dribbble and Forrst. Sites like these are great insights into how other designers not only produce their work but the thought process behind it – often this is a greater lesson than simply viewing the finished product as you can apply the same logic to your own creations.

You have released two Premium WordPress themes so far on Themeforest. Any chance that we can look forward to some more in the near future? What about a freebie WP template?

Absolutely, I intend to release more Premium WordPress themes in the very near future and over the course of the coming year. In terms of freebies, all I can say is watch this space ;)

If your Themeforest sales increase will you focus more on releasing premium templates or will you keep your focus on your web design?

It’s no secret to anyone that knows me that I’m a huge fan of WordPress, I love working with the system and so I will always take an opportunity to develop more themes in the future. As for concentrating wholeheartedly on themes, that is something that remains to be decided however it is a strong consideration for the future.

As a prominent member of the design community I am sure you get approached to write tutorials all the time. How do you decide where to write your tutorials for?

Actually I have only ever been approached by Brandon from WebDesigntuts+ in regard to tutorials but I certainly welcome others to get in touch. When I heard what Brandon was trying to achieve with WebDesigntuts+ I decided right there and then that I would love to be involved. It is a perfect addition to an already fantastic network of sites and I’ve thouroughly enjoyed writing for them – hopefully they’ll be more to come in the future.

What would you recommend to the readers as a way to get better known in the design community?

Put simply, get involved. It’s a very cliched response to say “participate in the community” but I think it really is the key. Remember to be yourself, perhaps help out your peers every now and again but ultimately just get stuck in!

Any special plans in the near future that you can let us in on?

Hmmm, I can’t mention any specifics just yet but let’s just say that there are a few interesting collaborations in the pipeline that I’m really excited about.

The lovely debate: Mac or Windows?

Mac, hands down. I made the switch around a year ago and would never go back.

Another debate: Photoshop or Fireworks for Web Design?

For me personally it’s Photoshop simply because it’s what I’m used to and what the majority of other designers tend to use – makes collaboration a much simpler process. I did open up Fireworks recently to give it another go but without the practice simple things tend to take me twice as long which can get frustrating.

And finally; if you could become the lead designer for one company what company would you choose and why?

One that I owned! Right now I love the freedom of being freelance, working for myself and managing my own clients – I’m not sure I could go back to agency life just yet!

Thank you again for the interview Orman, it was great to get to know you a little better.

Well, there you have it, that’s Orman Clark. Keep reading on for links to his Social Network, his Premium Files, and his websites.

Keep In Touch

Dribble

Forrst

Twitter

Premium Pixels

Orman Clark .com

Premium WordPress Themes

Some More Work

Conclusion

There you have it. If you have any questions leave them in the Comments and I am sure that Orman will be happy to answer them as soon as he can. Thanks for reading and stay tuned for a more interviews, freebies, and tutorials.

This interview was brought over from my old personal blog to HV-Designs because I did not want to lose such a valuable interview and insight into such a great design mind.

The Pros and Cons of Using Illustrator

ChristianJames — Sun, 25 Sep 2011 18:19:34 +0000

I recently started using Adobe Illustrator in addition to my main program Adobe Photoshop. This has gotten me thinking of an age old debate, Photoshop or Illustrator? Now, you can never do all the things in illustrator that you can in Photoshop and likewise in Illustrator, but what about for the every day things that you work on like icons or characters?

The Pros of Illustrator

With Adobe Illustrator all graphics that you create a vector graphics. This means that you can re-size the image to be as large or as small as you want while still retaining the proper styling and definition. You can also use Adobe Illustrator to create your business cards or any print media because by default Illustrator is set up to work in the proper printing color format. This means that you won’t create a design that will look completely different once it is printed.

Being able to re-size any image, no matter what size you designed it at, and still retain the right quality was the biggest draw to my for Illustrator. I wanted to be able to design an icon at icon size but still be able to offer a larger size. I can not do this in Photoshop and still get the styling I want, so I decided to head over to Illustrator and try it out. So far I am very happy with the majority of the results I have achieved with icons and character creation the last few days.

Having Illustrator already set up for print media is another great thing for me. I have found myself several times halfway through a print design in Photoshop, its looking fantastic, and I forgot to turn in from RGB to CMKY. This means that I either have to change right away and fix the mistakes that with inevitably pop up or start all over and try to achieve the same result after being immediately put in a horrible mood. With Illustrator I don’t have to worry about that anymore which is a huge load off of my back.

My final favorite thing about Illustrator so far is the ability to save as an EPS document where I can open the vector in Photoshop. The EPS file automatically opens in CMKY so no worries there. I have found myself, already, working on a document in Illustrator and getting it right where I want it so it looks great and I want to use it. Then I will open it up in Photoshop to re-size it and give it a nice background (which I could do in Illustrator but I prefer PS). Then I will start playing with the character or icon and it will just go from there until I have added or tweaked just little things but it makes the character 100 times better. The only thing I don’t like is that you can’t maintain the vector styling if you add things in Photoshop (unless you can and then I would love it even more) but it is easy to bring the styles over to Illustrator and recreate them.

The Cons of Illustrator

I am still pretty new to Illustrator but I have found several cons already. The first thing I have to say is that if you are an Illustrator user from the start and not originally a full time PS user than most of these will probably not bother you. One of my biggest pet peeves about Illustrator is the Gradient Tool. I use Gradients in a little over half of all my work and the gradient tool in Illustrator just does not jive with me. I don’t like the color selector at the bottom, I don’t like having to manually enter in the angle for my gradient, and I don’t like the way it renders gradients.

Like I said the first two are just pet peeves because I have worked in Photoshop for so long that I am used to the way they have you set up your gradients and colors. That being said however I do not think it is just my personal feelings for Photoshop that make the gradients in Illustrator render so strangely. The gradient lining is the worst that I have seen in any image editing program. The edges are rough and once you get past three colors it just renders more and more gradient lines rather than a clean overlay. This may just be my inexperience with Illustrator, and if it is please let me know how to correct it.

Another thing I have found that I don’t like with Illustrator is that you have to manually create a new layer. If you don’t all your paths will be on one layer and if you don’t keep up with the names of your paths then you will eventually get lost in what you are doing. Now, it is set up pretty much like Photshop in that a layer is like a PS Group and the paths are like PS layers, but it just comes from working in Photoshop for so long. My PS use is not the only reason that I have an issue with this, however. I also have a big problem with the fact that you can not create groups with any keyboard shortcut. You can create groups with the pathfind section, but then you have to isolate to see each individual path. It just seems like too much work for something so simple.

So What’s Better?

To be honest I have to say that no matter what Illustrator has to offer if it ever came down to making a choice of keeping Photoshop or Illustrator then I would choose Photoshop without a second thought. I do love Illustrator and everything that is has to offer, and I am sure that as I work a little more with it I will come to love it even more, but there is just something about Photoshop that makes it feel like the better program to me.

Sure, there are something things that Illustrator does better (the vector graphics) but I try not to do too much print and logo work, so if I didn’t have that ability it wouldn’t be very detrimental to my business. If I started working more on print and logos than I would probably change my mind and say I need to keep both of them, but I don’t see that anywhere in my near future. Since my main focus is Web Design, and Illustrator isn’t meant for that, I feel that I can easily say that in a battle of Photoshop vs Illustrator the clear victor would be Photoshop.

Conclusion

So, if the world of Adobe was ending and they said you had to choose just one image editing program, Photoshop or Illustrator, what would you choose? Would Photoshops superior styling trump Illustrator, or will you choose Illustrator’s amazing ability to render in whatever size over Photoshop’s lack of vector abilities?

The time has come for you to choose and post a comment about what you choose!

Create a Despicable Me Style Minion

Aaron — Thu, 15 Sep 2011 05:09:09 +0000

Today’s tutorial is brought to you by the motion picture (fancy name for movie) Desipicable Me. This tutorial was inspired by my 6 month old son who can, believe it or not, sit through the entire movie at least twice a day without any form of unhappy faces or noises. He laughs at the movie (yes laughs), and is just awestruck by it. Since it is such a vital tool to getting through the work day (wonders of a freelancer) I wanted to dedicate a quick tutorial to the cute little guys. Enjoy!

As always this is what we will be creating:

Getting Started

Create a new document 900×900 and leave it as a transparent bg. Put your foreground color as yellow

The Body

Now draw out our rounded rectangle 345px wide and make it go below the document.

Now grab your Add Anchor Point Tool and put it in the center of our rounded rectangle.

Now grab your Delete Anchor Point tool and remove the anchor points to the left and right of the point we just added.

Grab your Add Anchor Point tool again and drag the anchor point you added upward to give us a nice, round top.

Now drag your guy down a little bit so he is not so close to the top. Apply the following styles to our guy:

The Eye and Goggle

Alright, let’s get started on the eye. Grab your ellipse tool. Draw out a new circle, filled with white, 175×175. Center it horizantally on our minion and 70px from the top of his head.

TIP: You can rasterize your layers because we are not trying to keep this layer vectorized.

Grab your ellipse tool again, this time with black selected, and draw out a circle that is 95×95. Center it, horizantally and vertically, with our white circle since this is the our pupil.

Now grab your rectangle tool, with white as your foreground, and draw out a small rectangle 20×23 tall. Hit CTRL+T to rotate the document. Hold down shift and rotate 3 times, moving your mouse to the right. Place the rectangle at the edge of our pupil.

Alright, our eye is finished but now we need to work on the goggle. Create a new layer.Grab your ellipse toll again and use #9f9f9f as your fill color. Draw out a circle that is 222×222. Center the circle horizantally and space it 45px from the top.

Now use our CTRL+thumbail of our white circle to make a selection and hit delete to make our grey selection the proper size we need it to be.

Apply the following layer styles:

Now to set up our goggle straps. Create a new layer, just above your main character layer.Grab your rectangle marquee tool and drag out a selection that is 380×85 and fill it with black. Center it horizantally on our eye piece, making it just a bit lower than exactly center.

Now we will give it the illusion of wrapping around in a minute but first we have to delete the excess. So hold your CTRL key again and this time click the thumbnail of your character layer. Don’t hit delete yet, go to select—modify—expand and choose 1px for the space. Now you can right click and choose select inverse and hit delete.

Now apply the following layer styles to give it the wrap around appearance.

The Pants / Coveralls

Alright, we will be doing his pants now. Grab your rectangle tool again and draw out a rectangle that is 385px(w) by 75px(h). Place it directly at the bottom of our document. Do Not Rasterize Yet

Grab your Add Anchor Point tool and place an anchor in the center of your rectangle. Drag it down to give it a nice curve.

Now go ahead and rasterize your layer. Hit CTRL+the thumbnail of our main character, select inverse, and hit delete.

Now make a selection like this:

And hit the delete key to remove the selection.

Repeat for the other side:

TIP: I created a new layer and filled it with white for the other side. That way the selections were the same.

Now add the following layer styles:

Simple Arms

Now grab your rectangle marquee tool and draw out a rectangle that is 60px(w) by 130px(h). Create a new layer and fill your selection with #e6d522.

Drag your layer to be just above our main character layer. Now hit CTRL+T to free transform. Move your rectangle to the bottom of your document and rotate it until it looks like a good arm.

Now duplicate that layer, flip horizantal, and place it on the other side.

The Mouth / Smile

Now, for his mouth. You can use anything you want for the mouth, but we will be walking you through the process of creating a simle smiling mouth.

Alright, grab your rectangle tool again and draw out a rectangle that is 165px(w) by 45px(h). Center it horizantally with your goggle.

Now zoom in on your document and grab your Add Anchor Point tool. Place an anchor point in the middle of your top line and drag it down to make a smile shape.

Hold down the shift key and add another anchor point below our first one. Get it pretty close to the exact same area and holding the shift key will make it exact for you.

Before you move that one down we need to delete our left and right bottom anchor points. To do this grab your delete anchor point tool and take out both of those anchor points. This will automatically make the angle of the smile the same.

Now you just need to drag the anchor point down to give our guy a wider smile.

Now change your fill color of the shape to black and then rasterize your layer.

Alright, we are going to be creating the tongue again. Grab your eclipse tool and draw out a shape like this. The fill color is #f6abab.

Hit CTRL+click the thumbnail of our mouth layer. Choose select inverse and hit delete.

Now grab your rectangle marquee tool and create a selection like this:

Create a new layer above our tongue layer, and fill it with white.

Now, do the same CTRL+thumbnail trick that we did for our tongue to make the teeth.

Conclusion

There, you are done now! You can add some hair to him if you want, and you may want to use the burn tool to give him a little more of a rounded look, but this is our base character.

Added Styling

You can do quite a few more things with this simple guy to just by using the burn and dodge tools and a brush. This is my final character:

I do hope you have enjoyed the tutorial and as always would love any comments you guys have and to see your work.

HV-Tumblr Theme Pt. III – PSD2HTML Conversion

Aaron — Thu, 08 Sep 2011 01:10:49 +0000

Today I am proud to bring you guys Pt. III of the HV-Tumblr Theme Series. This episode in the series we will finally begin coding up our document. In order to create the perfect Tumblr Theme you need to make sure that your HTML is full stable with filler content before starting to add the Tumblr tags and removing things we don’t need, which is what we will be doing today! Let’s get started…

So, first thing is first, I am going to save us a bunch of time. Instead of wasting your time by showing you what you need to slice up for our document I will just provide the images. It is pretty obvious, especially in this design, to see that we are only going to be slicing up a few images, and the rest we will do with CSS.

Download Image Files

Alright, let’s get started coding up our main page to HTML. The first thing we are going to want to do is set up our folder layout. Create a new folder on your desktop and name it whatever you want. Now, within the folder, we are going to set up an images folder. Copy and paste the images that you downloaded above into the images folder and we are ready to rock and roll.

Open up your favorite text editor, or the editor that you choose/have to use, and right away save your document as index.html. That get’s that out of the way and makes sure that we have at least our open document and saved.

As I said earlier this tutorial, since it’s not the most important part of why I am writing this series, will be a pretty quick tutorial. We are going to be hitting everything in series, and all the numbers that you need are provided in your PSD document (which are provided in Part 1 of this series) so I am not going to explain where the numbers come from to save us both time.

Now, let’s start our first section.

Header and Logo

Alright, for our logo we are going to want to set it up to use just a text based logo. In the conclusion of this series though I will show you a few tips for adding an image via Tumblr custom forms. Anyway, let’s set up our CSS for our header and logo.

body { background-color: #cecece; margin: 0px; } p, h1, h2, h3, h4, img, a { margin: 0px; padding: 0px; text-decoration: none; } .header_container { background-image: url(images/header_background.png); background-repeat: repeat-x; height: 100px; width: auto; } #header { height: 100px; width: 1024px; margin-right: auto; margin-left: auto; } #logo { float: left; height: 40px; width: 185px; margin-top: 20px; margin-left: 55px; } #logo h1 { font-family: "Francois One"; margin: 0px; color: #a2d9ff; font-size: 32px; } #logo h1 a { color: #a2d9ff; font-size: 32px; text-decoration: none; } #askme { background-image: url(images/ribbon.png); background-repeat: no-repeat; height: 54px; width: 37px; float: right; margin-right: 55px; }

We have, of course, set up a simple CSS reset and our body information, but we also set up our header and logo information, as well as the quick little CSS setup for the ask me ribbon we put in this design. The thing I want to point out quickly is the reason I have a header container and and then a header class. When you are working with a design like this, and using a background image, you want to split up anything that needs to be repeated, but still has areas that need to be contained, you want to make the repeatable background its own container.

Sweet! Now let’s move on to actually setting up the html. As you can guess we will have a bunch of div tags inside of the main header_container div.

HV-Designs

Content

Alright, let’s go ahead and set up our content now. We will have our content container, which will keep everything centered on the screen, and then we will be setting up our left content container, which will hold all of our posts.

.content { height: auto; width: 970px; margin-right: auto; margin-left: auto; clear: both; } .leftcontent { float: left; height: auto; width: 635px; border-right-width: 1px; border-right-style: solid; border-right-color: #c0c0c0; } .postcontainer { float: left; height: auto; width: 585px; margin-bottom: 45px; }

We have all our containers ready to set up, now we have to get them ready for our posts. The html will have open divs for now, until we finish the posts, so don’t freak out when I don’t close the tags I am providing you.

Alright, time to set up the CSS for our first post type. We will be including the note and date ribbon CSS as well, which we will be using on every post. We will also be setting up our tags for the first time, but that will also be used in every single post.

.ribboncontainer { float: left; height: 100px; width: 70px; margin-top: 25px; } .dateribbon { background-image: url(images/date_timeribbon.png); background-repeat: no-repeat; height: 40px; width: 70px; float: left; } .dateribbon h2 { color: #a2d9ff; font-family: Oswald; font-size: 14px; text-align: center; margin-left: 7px; margin-top: 7px; } .noteribbon { background-image: url(images/date_timeribbon.png); background-repeat: no-repeat; height: 40px; width: 70px; float: left; margin-top: 20px; } .noteribbon h2 { color: #FFFFFF; font-family: Oswald; font-size: 9px; text-align: center; margin-left: 7px; margin-top: 10px; } #photopost { float: left; height: 415px; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; } #photo { float: left; height: 315px; width: 480px; margin: 14px; border: 1px solid #000; } #photocaption { float: left; height: auto; width: 480px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 16px; } #photocaption a { color: #de5400; text-decoration: none; } #photocaption a:hover { color: #1da3ff; } .tags { background-image: url(images/tags.png); background-repeat: no-repeat; background-position: left; float: right; height: 19px; width: 150px; padding-left: 25px; margin-top: 10px; margin-right: 15px; font-family: Verdana; color: #989797; font-size: 12px; clear: both; margin-bottom: 10px; }

Pretty simple stuff but you will notice that I put everything in its own container. I do it because it makes everything flow a little bit better, but I also do it because it’s just something I have to do (OCD) or I feel like my code is just random nonsense. If you are going to be using containers for everything I would recommend shorthanding your CSS and condensing it as much as possible. Don’t know how to do that? Don’t worry, we have a tutorial coming out for that pretty quick like.

Alright, now that I have shamelessy promoted a future post, it’s time to actually move into our HTML.

Jan 10

129 Notes

This will be a photo caption here, with a link included to wherever you want. Its also clickable.

Photos, Beach, Sand

So, we put in the exact text and photo from our PSD file and closed up the post container tag and are ready to rock and roll into the next step. Now that we have our staple CSS classes set up for each of our posts all we have to do is pull all the sizes, colors, borders, etc from our PSD document and basically transfer them over to our document. Be ready for a huge chunk of CSS:

#quotepost { float: left; height: 155px; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; background-image: url(images/quotes_background.png); background-repeat: no-repeat; } #quote { float: left; height: auto; width: 480px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 18px; font-weight: bold; color: #de5400; margin-top: 30px; } #quoteauthor { float: right; height: 25px; width: 200px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 18px; font-weight: bold; color: #000; margin-top: 10px; text-align: right; } #textpost { float: left; height: auto; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; } #text h1 { color: #DE5400; margin-bottom: 15px; font-size: 26px; } #text p { margin-bottom: 15px; } #text { float: left; height: auto; width: 480px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 14px; color: #000; margin-top: 30px; } #linkpost { float: left; height: auto; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; background-image: url(images/quotes_background.png); background-repeat: no-repeat; } #linkdescription { float: left; height: auto; width: 480px; margin-right: 14px; margin-left: 14px; font-family: Verdana; font-size: 18px; font-weight: bold; color: #de5400; margin-top: 30px; } #link { float: left; height: 25px; width: 250px; margin-left: 14px; font-family: Verdana; font-size: 18px; font-weight: normal; color: #000; margin-top: 10px; text-align: right; } #audiopost { float: left; height: auto; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; background-image: url(images/quotes_background.png); background-repeat: no-repeat; } #albumart { float: left; height: 120px; width: 120px; margin: 10px; } #audio_container { float: left; height: auto; width: 500px; margin-right: 14px; font-family: Verdana; font-size: 13px; color: #000; margin-top: 10px; } .audioplayer { background-image: url(images/audioplayer.png); background-repeat: no-repeat; float: left; height: 35px; width: 210px; margin-top: 10px; } #audiotext { height: auto; width: 350px; float: left; margin-top: 20px; } #videopost { float: left; height: auto; width: 510px; background-color: #FFF; border: 1px solid #c0c0c0; } #videopost h1 { color: #DE5400; font-size: 26px; font-family: Verdana; margin-left: 15px; margin-top: 15px; } #video { float: left; height: 300px; width: 365px; margin-right: 72px; margin-left: 72px; font-family: Verdana; font-size: 14px; color: #000; margin-top: 30px; background-image: url(images/video.png); background-repeat: no-repeat; margin-bottom: 10px; }

And simply repeat the same process from our first post we set up and we are good to go:

Jan 10

129 Notes

You are part of the Rebel Alliance and a traitor. Take her away!

-Darth Vader

Photos, Beach, Sand

Jan 10

129 Notes

This is a text post of some sort!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc nisi, viverra eu ultrices a, tincidunt et eros. Ut convallis malesuada imperdiet. Mauris interdum dapibus tristique. Phasellus nec diam massa. Donec pharetra pellentesque purus, nec consectetur turpis viverra vel. Sed dictum lobortis velit quis feugiat. Vivamus consectetur odio vel dolor vulputate pulvinar. Sed commodo porta volutpat. Cras varius elementum condimentum.

Cras iaculis, sapien vel congue pellentesque, felis eros tincidunt neque, nec aliquam justo nibh vitae lorem. Nunc vulputate scelerisque accumsan. Nullam pellentesque, orci ut varius eleifend, eros neque mattis lorem, sed faucibus sem ipsum vulputate dui. Nulla consectetur urna id erat dictum non viverra eros pretium. Sed lobortis porttitor nisi vel elementum. Fusce accumsan massa quis sem eleifend quis condimentum lectus bibendum. Donec eget risus ligula, sit amet

Photos, Beach, Sand

Jan 10

129 Notes

Awesome Photoshop Tutorials, Tips and Tricks!

- http://hv-designs.co.uk

Photos, Beach, Sand

Jan 10

129 Notes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc nisi, viverra eu ultrices a, tincidunt et eros. Ut convallis malesuada imperdiet. Mauris interdum dapibus tristique. Phasellus nec diam massa

Photos, Beach, Sand

Jan 10

129 Notes

This is your video caption

Content for id "video" Goes Here

Photos, Beach, Sand

That nice chunk of HTML was brought to you by filler content. Make sure all your div tags are closed off, which they are if you copied the html :)

Right Container

Alright, let’s get started on the right container. The first thing we want to do is open up our Photoshop Document and get our CSS ready by pulling all the information we need from the PSD. Here is our css:

.rightcontainer { float: left; height: 830px; width: 310px; padding-left: 20px; } .authorinfo_container { float: left; height: 120px; width: 305px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; } #authorimage { float: left; height: 75px; width: 75px; border: 1px solid #c0c0c0; background-color: #FFF; padding: 5px; } #authorinformation { height: 55px; width: 175px; float: left; margin-left: 20px; font-family: Verdana; font-size: 12px; color: #1da3ff; } #authorinformation h1 { font-family: "Francois One"; color: #222333; font-size: 24px; margin: 0px; } #socialnetworkcontainer { float: left; height: 25px; width: 115px; margin-left: 40px; margin-top: 15px; } #facebook { background-image: url(images/socialmedia_sprite.png); background-repeat: no-repeat; background-position: left; float: left; height: 20px; width: 20px; margin-right: 5px; } #gowalla { background-image: url(images/socialmedia_sprite.png); background-repeat: no-repeat; background-position: -20px; float: left; height: 20px; width: 20px; margin-right: 5px; margin-left: 5px; } #twitter { background-image: url(images/socialmedia_sprite.png); background-repeat: no-repeat; background-position: -41px; float: left; height: 20px; width: 20px; margin-right: 5px; margin-left: 5px; } #wordpress { background-image: url(images/socialmedia_sprite.png); background-repeat: no-repeat; background-position: right; float: left; height: 20px; width: 20px; margin-right: 5px; margin-left: 5px; } .pages { float: left; height: 30px; width: 305px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; font-family: "Francois One"; font-size: 18px; color: #b5b5b5; text-align: center; padding-top: 5px; } .pages a { color: #b5b5b5; } .pages a:hover { color: #DE5400; } .search_container { height: 70px; width: 295px; float: left; margin-left: 10px; margin-top: 25px; background-image: url(images/dots_spacer.png); background-position: bottom; background-repeat: no-repeat; } #search { float: left; height: 45px; width: 225px; background-color: #afafaf; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; font-family: Verdana; font-size: 14px; color: #FFF; padding-left: 15px; } #button { background-image: url(images/search_button.png); background-repeat: no-repeat; float: left; height: 47px; width: 45px; text-indent: -999in; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; background-color: #AFAFAF; } .twitter_container { float: left; height: 330px; width: 305px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; margin-top: 20px; } #twitterheader { background-image: url(images/twitterbird_icon.png); background-repeat: no-repeat; background-position: left; width: 245px; height: 45px; float: left; padding-left: 60px; font-family: "Francois One"; color: #1da3ff; font-size: 22px; padding-top: 10px; margin-bottom: 15px; } #tweet { float: left; height: auto; width: 295px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; padding-bottom: 20px; font-family: Verdana; font-size: 12px; color: #000; margin-left: 5px; margin-bottom: 15px; } .followingcontainer { float: left; height: 155px; width: 305px; background-image: url(images/dots_spacer.png); background-repeat: no-repeat; background-position: bottom; margin-top: 20px; } .followingcontainer h1 { font-family: "Francois One"; color: #222333; font-size: 24px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; } .followimage { float: left; height: 32px; width: 32px; background-color: #232434; border: 3px solid #FFF; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; }

Great! Let’s go ahead now and start on our CSS for the Author Information area. We need to open up our right container DIV and then place our Author Information stuff in there. Here is our html:

Aaron Nichols

Web and Graphic Designer

Now, we have used divs for our social networking right now because the code will change substantially as we move forward into coding this to Tumblr. If you are wanting to keep this as an HTML version template all you have to do is replace

withYou may need to change up a few things in the CSS and, of course, you will need to put in the right link and id for whatever social network you are using.

Ok, let;s move onto our pages and search area. In our HTML version this will again be very basic because as we move to Tumblr we will go into more detail and will need to change stuff up, but we can’t do anything until our HTML is stable.

Place this directly after our previous html:

My Website

About Me

Now, let’s move forward onto our twitter area. In our HTML version this will consist, mostly, of filler content until we move forward into coding for Tumblr so I will provide you with the basic HTML.

Keep Updated With Twitter

Posted a new snap to dribbble with a preview of next weeks freebie, check it out and be sure to check the full size -- http://drbl.in/biSW

Posted a new snap to dribbble with a preview of next weeks freebie, check it out and be sure to check the full size -- http://drbl.in/biSW

Posted a new snap to dribbble with a preview of next weeks freebie, check it out and be sure to check the full size -- http://drbl.in/biSW

And, finally, to finish off our tutorial we will be adding our following area. When you see this bit of code you will probably freak out because it’s ugly but don’t worry about it right now. We have to make this code look super ugly right now to get our html stable.

I'm Following These Guys

CONCLUSION

That finishes off the tutorial! I know that it was a long time coming and there was a lot to it, but just wait until we move forward onto coding this to a tumblr theme. You will see a huge messy bunch of code (this tutorial) become an amazing bunch of code transformed into a theme.

Let us know what you thought in the comments or on Facebook.