Webdevtuts » design

Create a clean elegant glass like typography wallpaper in photoshop

Marcell — Fri, 16 Jul 2010 21:44:13 +0000

So I was messing around and photoshop and decided that I needed a tutorial for you Webdevians and came up with something that you all might love. In this tutorial I will show you how to create a very simple but clean glass like typography wallpaper. This tutorial should take no longer then 5-10 minutes so if you have the time why not give it a shot.

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.

30 Social Networking websites that were created using Drupal

Marcell — Wed, 26 May 2010 14:56:36 +0000

Drupal is a great Content Management System for starting and running social networking websites. In this post I have listed 30 Social Networking websites that are created and ran on Drupal CMS. There are some pretty cool sites that uses Drupal. Enjoy!

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

30 creative and illustrative mixtape covers that will inspire you

Marcell — Wed, 28 Apr 2010 01:08:04 +0000

Mixtape covers are very inspirational to graphic designers. The hard work and creativity put into them are just outstanding and I think designers should see how creative they can get when creating a mixtape or poster design or even a graphic image. Check out these insane mixtape cover designs by hardworking individuals and companies.

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

Why you shouldn’t steal someones else source code or design

Marcell — Wed, 23 Dec 2009 08:08:37 +0000

As a designer we often have tools that allow us to take a peek at others source code and style sheets. I think it is ok to take a peak to see how that designer has accomplish that specific task but I disagree with people who think taking their code and changing the class or ID name is ok. In this article I will give you some helpful reasons why you should not steal someones else code or design.

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.

4 quick tips to help you create a better mockup/design in photoshop

Marcell — Wed, 09 Dec 2009 04:32:45 +0000

When Designing a website in Photoshop you should always try to make the mock-up look very similar to the final coded version. Some designers get very lazy and try to create a design then figure out everything while they’re coding the real layout. In this Article I will give you 10 tips to designing a professional looking website mockup in Photoshop.

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.

15 photoshop website tutorials that will improve your design skills

Marcell — Tue, 03 Nov 2009 05:12:29 +0000