Our New Design

I cannot tell you how many times I have changed the design of Webdevtuts over the last two years. I think its been mostly about finding what best fits Webdevtuts. If you can tell the new version has alot of playful colors and if you are using a moderen broswer you will notice the css3 gradients and transitions. I thought it would be cool to use new web standards and push others to as well oppose to using the simple and same old effects or design.

Whats coming to Webdevtuts?

If you are curious of what is going to be arriving at Webdevtuts wait no more. Coming in the next month or so will be more in depth tutorials and interviews with some great designers and develoepers. I also would like to anounce video tutorials that will cover many web ralted topics such as css3, html5, php and much more.

If you’re a author then you will be happy about what I am going to say next. I am now offering $25-$300 for indepth articles and tutorials now. I have had many people send me tutorials and articles and the past and they were not what I am looking for so if you have a great tutorial or idea and would like to write a tutorial for Webdevtuts check out our author page.

Giving back!

There is no way I could run this site and not give back to the community. I would like to anoucne the first contest at Webdevtuts. I had a contest a while back but decided not to run it because I did not feel it was the time to run it. WHat will I be giving away? Look below!

One lucky subscriber will win!

• 1 year subscirbtion to Webdevtuts Video Tutorials!
• $100 Paid to paypal!(Can spend it on whatever you like)
• 1 Year of free hosting!(Thanks T35)
• 1 Flip Mino(Black) to recored videos!

How can you win?

To win the above prizes you MUST be a subscriber to Webdevtuts by email. If you’re not subscribed you can subscribe here. You must also leave a comment below. I will choose a winners at random most liley before the end of this month. Make sure your email below matches your email you use to subsscribe so I can verify that you’re a subscriber. I wish the best of luck to you all and like to thank all of my readers for making this possible.

Before you begin this tutorial please download the font and vinyl records that we’ll later use in this tutorial.
AvantGarde-Demi Font
Vinyl Record

Step 1

Create a new document (w)800px x (h)500px background #11d0ff

Step 2

Select the type tool font: AvantGarde-Demi, color: ffffff, size:150px, and write out the word LOOP.

Now select the character panel or go to window>>character and a panel with character options should appear. Now Highlight your text then change the tracking from 0 to -140.

Step 3

Now right click on your text layer>>blending options>>drop shadow. blend mode:multiply, opacity: 75, angle: 120, distance:0, spread:15, size:7.

Select the Bevel and Emboss option now. style:inner bevel, technique:chisel hard, depth:21, direction:up, size:27, soften:5, SHADING –> angle:120, attitude:30, highlight mode:screen color:ffffff, opacity:75, shadow mode:mutiply color:000000, opacity:75, then press ok.

To resize an image press CTRL+ALT+T on windows or CMD+ALT+T on mac then press click + SHIFT and drag it down to proper size.

Step 4

Now drag in the vinyl record you’ve downloaded at the beginning of this tutorial and re-size it. Then duplicate the record and place them inside of the two OO’s.

Step 5

Select the type tool font: AvantGarde-Demi, color: 000000, size:36px, and write out the word FM.

You are now finished. As you can see a logo can be anything you like it to be but try to get creative. We could of done much more to this logo to make it more detailed or complex but I wanted you guys to get the hang of creating simple but elegant logos. Hope you’ve all learn something.

Things you need

• sansserifexbflfcond Font

Step 1

Create a new document width:1000px x height:631px background #000000

Step 2

Select the type tool font:sansserifexbflfcond(medium), size:200px, color:#ff9700, smooth. Now select the Character Panel or go to Window>>Character and change the text Tracking to -60(Text tracking goes from left to right). Then write a word that you would like to use. I’ve chosen Webdevtuts.

Double click on the text layer or right click>>blending options. Select color overlay and change the color to #1b1b1b. Then select stroke, size: 1, position: outside, blend mode:normal, opacity:100, fill type:color, color; #b4b4b4

Step 3

Duplicate the text layer then right click>>blending options. Now click on gradient options. blendmodenormal, opacity:100, Gradient(Double click on the gradient bar, left color:#adadad, right color:#ffffff), style:linear, angle:90, scale:100

Step 4

Select the rounded rectangle tool color:#5f5f5f then draw a circle under your typography.

Then go to Filter>>blur>>Guassian blur 90px.

Step 5

Select the rounded rectangle tool color:#151515 and draw a rectangle under your text(Make sure it goes into the black on both sides). Then go to Filter>>blur>>Guassian blur 5px.

Step 6

Duplicate the text layer then create a new group then add the text layer to the group. Right click on the group>>merge group. Go to Edit>>transform>>Flip Vertical. Then drag the vertical text downward until its under the original text.

Now select the rounded blur eraser tool and erase the bottom text until you have that reflection look. Might take of couple of tries but you’ll get it.

Step 7

Select the rounded rectangle tool color: #ffffff, and create a circle on top of your text leaving some of the bottom area untouched.

Now change the layer opacity to 10%.

Step 8

Select the custom shape tool>>Triangle and create a triangle over the text. Try to have it so the triangle is within the glow with just did in the previous step.

Now go to filter>>blur>>Guassian blur. Set the blur to 80. Then change the layer opacity to 80. You’re now done and should have a nice elegant glass looking text typography.

Athlete Focus

Babelup

Chris Brown World

Drupalsn

Fast Company

Going On

Grad Spot

Joshua Bell

Kat Deluna

Mothers Click

Grammy

Eric Lapton

Robbie Williams

Francesca Music

Michael Jackson

Virgin radio

ABC Family

Duke

White House

World Food Programme

Avrill Lavigne

Yahoo

Beyonce

Fox Search Light

AOL Corporate

Universal Music Group

My Fine Pix

End Poverty 2015

The Nursery

On Networks

Pop Sugar

Ray Vicks

The Syndicate & Digital Product: Warriors

Tapemasters Inc: Codeine Hitz 8

DJ Scream & Dolla Boy – Dillon Saks

Jim Jones: Pray For A Hustla

Bigga Rankin & Big Bank Black: The Birth Of Big Bank Black

Lil Wayne: No Ceilings No Walls 2

DJ Quote: Quote TV Pt.6

Title

DJ 2Mello & Miami Kaos: Purple Reign

New York State Of Mind Pt.2

J-Haze: King of da City

Drake: The Drizzy Effect

Kanye West: No Manners

DJ Lux: Southern Supremacy 9

OJ Da Juiceman: Bouldercrest Shawty

Nero: Alive & Vibrant – Relive the Moment

DJ Smallz / Drake: Room For Improvement

Juelz Santana: Santana’s Town

Kid Cudi: Dat Kid From Cleveland

50 Cent: The Undertaker

Gucci Mane: Bird Flu Pt.2

DJ Hitz: The Fabolous Life

DJ Smallz: Best Thing Smokin Vol.6

Cambatta/DJ Nice: The Visionary

Donk Ryders

Southern Royalty: Bun B

Dub Floyd: The Worst Of Screamixxes

Roc n Roll

Chamillionaire: Mixtape Messiah 5

DJ Glew & Rick Ross: The City is Mine

Becoming an addiction

Once you get into the habit of taking a peak at someone else code and copying and pasting it, it all will become a habit to you. Ever heard of the saying if you steal something once and get away with it you will continue doing it until you’re finally caught. Well that saying is very true. People who steal code from other websites often make it a habit and continue doing it, hoping it will improve their work and skill-set.

Losing your skill-set

That’s right. Believe it or not if you’re constantly copying and pasting others people code to create a website then you’re most likely just damaging your very own skill-set. When you want to learn something or get better at something you have to work with it. For example you did not grow up knowing how to ride a bicycle without training wheels. You had to practice and practice until you finally got it. As you were practicing trying to learn how to ride a bicycle you sometimes looked at other kids to see how they have done it. Over the years you continues riding bikes and became very proficient at it , not cheating once at it. Didn’t that feel good knowing that you learned how to ride a bike all by yourself. That’s applies to web development also. If you constantly write code and continue to feed off of your own work then your skills will always be improving and proceeding to the next level, making you greater at what you do.

No ideas

Often when viewing or always browsing someone else work you may feel that you work will never be that good or amount to the value of their work. That is completely false. Every designer/Developer start off designing not knowing the latest tips and techniques. When I first started off designing I have to say that my designs were not great at all haha. I used fonts that could not be used, margins and padding were completely off, and the design was just bad. I looked at others works from time to time but I knew if I continued looking at their work I would continue belittling myself. The more you look at others work the more ideas you lose.

Finding inspiration

As a designer we often visit many websites for inspiration. What I have found out as being a designer/developer is I never find inspiration looking at others website or design. It might sound crazy but its the truth. I find inspirations from wallpapers, graphic posters, and videos. If you think about it Graphic designs posters are usually colorful, and very outgoing, and wallpapers are like backgrounds giving you an idea in your head on which background to create and videos are like websites in motion. If you’re watching TV on a network like spike TV or MTV you will often see some crazy motions graphics effects that can lead to a very nice design.

If you would like to avoid copying others source code or design then follow my tips and you will be on the road to becoming a better designer/coder. To this day I am constantly working on my coding skills and designing skills trying to become better at something that I love and enjoy doing. Quit stressing out and go watch a video or look at a poster for an idea.

Use Guides

Whenever You start a new website design and Photoshop I recommend that you Always you Photoshop guide lines. Guide lines help you keep your website centered and all of the elements inside of it align. I know there are newbies out there who just open up Photoshop and design and never turn on their guide lines.

To see your guide lines go to press ctrl+; and for mac I believe it is cmd+;

Use real font for Text

This is for all the beginners! I know when most people first start designing websites in Photoshop they often try to use fonts that are not supported on other browsers. It’s ok to use other fonts for logo’s and heading but for real text it is good to use some of the supported well known fonts. You’re probably thinking how do I know which font works for all computers. Well the answer to that is a font list from Ampsoft and they give a pretty well explain explanation on which fonts you should choose, so make sure you check out their article.

Use ruler

Photoshop rulers are a must! Whenever you start a design you should always have your ruler grid turned on. Ruler grid comes in handy for aligning your website, text, images, logo’s and other web elements. Without your ruler your design would be uneven and margins and padding would not equal each other.

Canvas Size

Starting a new design can be very frustrating for some designers. The reason it can be very frustrating sometimes is because you do not know what size canvas you should start with or create. I normally start my design using 960px width. I think 960 works the best considering it can fit all website screens. The graph below shows what screen size most people use as of August 29 2009.

All of the tips listed above all go hand and hand. Each tip should be took in consideration before or during every design process. I know this article was very short but I hoped you have learned something from it. I will try to make longer post in the future that are more valuable.

Step 1

Create new document 1280px x 1000px 72dpi. Background Color #000(Black)

Step 2

Go to Filter>>Noise>>Add Noise. Amount:7.16% Distribution:Gaussian

Step 3

Select the rectangle tool color:#3f3f72. Create a rectangle size dose not matter.

Step 4

Now we will duplicate the layer and change the color 3 times. 2nd Color:#5a1e7d , 3rd Color:#aa0f80 , 4th Color:#fe34a6.

Step 5

After you have duplicated the layers in step 4 you will now merge the layers together. Unselect the background layer and right click on a layer and select Merge Visible.

Step 6

Ok Now lets select our merge layer now and change the layer opacity to 40%.

Note: We will duplicate our retro lines quite often so be prepared!

Step 7

Duplicate the retro lines layer and make the first retro lines layer invisible. Now lets start making our lines. Press CTRL + T, or go to Edit>>Free Transform and stretch retro lines across screen diagonal.

Step 8

Now lets make our invisible retro lines layer visible and duplicate the layer so you will have another copy of it.

Step 9

Now this is the fun and maybe confusing part but I will try my best to explain everything. Drag your copied retro line layer aside of the first layer

Then go to Edit>>Transform>>Warp

Now you should see a menu in the top left corner of photoshop. Select the drop down menu and choose Fish

Step 10

Repeat the last step and select the one that suits you best. I used fish for my last one.

Note: For the next step I used special space brushes. You can download them here!(Look at the top left for a download link)

Step 11

Now Lets add a little bit of space dust to our image. Select the brush tool Color:#661542, then select the nebula 6 brush.

Now make two splats going diagonal or shall I say space dust.

Step 12

Now Lets add some cool retro text to our wallpaper. Select the text tool Color:#fff, Size:150px, font:AvantGarde-Demi, if you do not have that font Arial works fine. Now type whatever you would like.

Step 13

After you have successfully entered your desired text right click on the text layer>>Blend options>>Drop Shadow. Copy Drop shadow settings.

Now select Outer glow. Copy Outer Glow Settings

Now selectGradient Overlay. Copy Gradient Overlay settings

Double click on the gradient bar. Left Color:#661542 , Right Color:#291832

Now selectStroke. Copy Stroke settings

Step 14

You should now have something like this.

Step 15

Now to add the 3D Effect to our text. Duplicate the text layer in move it to the right a bit and you should have a 3d effect.

From here you could add more splats and space effects but I will stop here. I hope this tutorial was useful. Please link your final result. It will be quite exciting to see what you have come up with.

It’s very detailed tutorial, so prepare yourself for a long run. Make nice warm nescaffe and we’re ready to start.

Promotional iPhone App Site

In this tutorial, we’ll be continuing this series on creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images,….

Water colored Design Studio Blog Layout

In this tutorial you will learn how to make a clean and simple watercolor design studio layout for a blog

Design a Unique Grungy Website Layout

This tutorial will teach you how to design a cool grungy website layout. As well as walking you through the various Photoshop techniques

Design a Beautiful Website From Scratch

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished
I had the skills to create such designs…..

Create a elegant wordpress theme design using photoshop

Create a clean elegant wordpress theme design using adobe photoshop.

Create a clean modern website design

Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements

Create A Stylish Portfolio Layout

A portfolio should be clean and easy on the eyes while still displaying the designer’s work prominently. We’ve created another portfolio layout that is stylish and functional

Awesome Tutorial Portfolio Design

think this is most detailed and long web design tutorial on the web with 175 screenshots!!! This tutorial include lots of trendy photoshop effects like:….

View Tutorial

Video sharing layout

In this tutorial il show you how to create a video sharing layout, an ideal layout for you video bloggers……

Create a Grunge Web Design

Photoshop is often the right tool for web design, especially if you’re creating a design using numerous images and brush effects. ….

Create a Clean and Colorful Web Layout

In this tutorial I am going to show you how to create a clean corporate layout in Photoshop…..

Make a Green & Sleek Web Layout

In this web design tutorial, you’ll learn how to create a beautiful, green, and sleek layout in Photoshop….

Layout for a Non-Profit Organization in Photoshop

n this tutorial we will be creating a homepage layout for a fictional non-profit organization….

Create a dark portfolio pixel layout

In this tutorial I will show you the power of patterns applied in web layouts. Photoshop patterns are very important……