This is where designing, creating, and publishing a creative Twitter background and using it as your billboard comes into place.

Many designers and creatives utilize actual illustrations and images that will attract the viewers’ attention. By capturing a reader’s imagination in the process, illustrative backgrounds will most likely remain within their memory for a longer period of time.

Here are 100 creative Twitter backgrounds that feature illustration, that should inspire your own Twitter designs.

Farrhad

Elite Styles

Emily Chen

Lee Maplesden

Anousone

Vonster

Scott Clark

Rogie King

James Ridlo

Twestival Jozi

Krftd

Jwhedon

Andy Sowards

Brian Paulwicz

Lea

Kiam Dean Art

Paul Boag

Jason Later

Tony Chester

Melissa Scroggins

Brad Smith

Sallid

Brian Sweeney

Aaron Miller

Lorenzo Gabba

Andrew Murphy

Matt Davis

Holey Coww

Jen Parks

Think Design

Evan

Graphic Identity

Niko Bellic

Adam Kayce

Lizette Gagne

CSS Girl

Sean Carter

Djuro

Yahoo

Mr. Tweet

Ed Dale

Technorati

Silver-Solutions

Vectips

Just Tweet It

Dark Motion

Elitists Snob

Divvoted

Leeanne Lowe

Best Deals (Amazon)

Sean Boone

Deuhlig

Camiseteria

Web Designer Depot

Djambzov

Giographix

Local Hero Design

LouPage

Paul Miser

Gareth Hardy

Gerri Elder

Must Have Menus

Mail Chimp

Maggie Summers

Blink Interactive

Nikolina

Sophie Miller

Nicholas Patten

_a_n_d_y

American Hell

Desizn Tech

Bryan Lagos

mrGTB

Adrian Herritt

Sneh Roy

Cyan Banister

Michael Parenteau

Juvincent

Simona Buzatu

Jan Cavan

Patrick Ruddell

Nalora Burns

Kevin Dove

Natalie-Anne

Lynn Chyi

Satyakam Misra

Spurrachel

Travis Bucholtz

Charity Michot

LBOI

Jonathan Nelson

Weird News

Koko Hinson

Riku

Jolly Lizard

Tucker Kimball

Shirt Pizza

Rob James

Khai

Karl Bastian

var infolink_pid = 24649;

WATCH THE TUTORIAL HERE

Set the stage. Take a dark photo will very little color so you can see the X in proper lighting. If the X were against a white background, it would be hard to see the highlights of the edges in the later stages of this tutorial. This desatuared Cosmos Wallpaper will do the job to achieve this.

Type out the ‘X’

Take the text tool and type out the capital letter ‘X’. I’ve found that the “Myriad Pro Bold” font creates a close resemblance to the real X used in Apple’s artwork. Make the size of the X around 800 pt. (Remember, its always better to start large, then scale down when you are finished.) Set the color to the default black.

Gradient Overlay Layer Style

Next, apply a layer style effect to the ‘X’. To access the layer style palette, with the X layer selected, go to the menu under Layer >> Layer Style >> Gradient Overlay. Set the opacity to 9% and the angle to -90 degrees.

Bevel Edge

Right click the ‘T’ corresponding to the text layer and choose “Select Layer Transparency”. Create a new layer above the X and fill in the selection with the color #4c4c4c. After that, go to Select >> Modify >> Contract… Contracting the selection will reduce the size of the selection similar to how a image transform would. Depending on how large you’re, you’ll want to change the contraction size, but the particular size I made the ‘X’, I’ll choose 3 pixels. Now with that new layer still select, hit delete so that the new layer trims around the ‘X’.

A small subtle trim will give the effect of depth.

Dodge & Burn Tools
Its time to take out the dodge and burn tools. These tools are very good for a situation like this because they won’t add any new pixels and the tools won’t harm layers other than the one that is selection. With both of these tools, make sure you use a brush hardness of 0%. This will stop any harsh lines created. It takes a while to get the setting right for the situation, but I’ve found the dodge tool works great at a Range of Shadows and Exposure at 21% (changes these in the options palette). For the burn tool, a Range of Shadows and Exposure set to 6% (yes that 6%, these tools need little exposure have an effect on the image). Add highlights and shadows to the trim layer just like you were painting on it.

The dodge and burn tools should add perspective and proper lighting to the ‘X’.

Use the Selection Tool As A Mask
A great way to create an edge is to take the square marquee selection tool, and create along the crease of the ‘X’. Take the dodge tool and brush inside the selection, then go to Select >> Inverse and burn the other side.

Using the rectangle marquee tool is a great way to create edges at joints in the ‘X’ when using the dodge and burn tools.

Gloss

Last but not least is the large gloss reflection that will come across the X. Create a new layer and select the pen tool. With the paths option chosen from options palette, create a swoosh across the ‘X’ and close the pen path outside & around the ‘X’. Take the Path Selection Tool (the point just above the pen tool) and right click on the path and pick “Fill Path…”. Fill the path with white. Again using the “Select Layer Transparency” from the X text layer, create the selection and go to Select >> Inverse and delete the white outside the X.
Change the opacity of the gloss layer to around 40%. Create a layer mask for the gloss layer. Take a white to black gradient set to radial, and drag a gradient from the left side of the X where the reflection appears on the X to about 200 pixels past where the reflection leaves on other side of the X. With a large black brush set to 0% hardness (we don’t want any edges) brush along top left of ‘X’ to fade out some reflection.

Final Result

Download PSD

Credits To

tutorialdog.com

Start off by using a nice big bevel and emboss with settings similar to these. As usual, the size should be suitable for the size of the image; try to make it look like the example. 2: Now we need to rasterize our layer. Create a new layer by pressing ctrl/cmd + shift + N, then link the new layer with the text layer, and press ctrl/cmd + E to merge it. This will rasterize our text layer.

Now we need to adjust the image using curves – press ctrl/cmd + M to open the curves menu, then enter a nice even zig zag, as shown here. 3: Go Image || Adjustments || Variations, set the slider at the top to one notch from the bottom, and then click once on the ‘Current Pick’ box, once on the ‘More Blue’ box, and then once on the ‘More Green’ box – now click OK. Press ctrl/cmd + M again to open up the curves menu, and enter a slightly different curve like this.

Now add a drop shadow using the default settings by going Layer || Layer Style || Drop Shadow and clicking OK. 4: Now use the layer styles again (Layer || Layer Styles) to add an inner glow using these settings. Go to layer styles again and this time add a second bevel and emboss, with these settings.

For the next stage, we need to create a selection – hold ctrl/cmd and click on the main layer in the layers palette. This will select the letter/text – now go Select || Modify || Contract and enter a value of 3. Now go Select || Feather (ctrl/cmd + shift + D) and enter 3 again. 5: At the bottom of the layers palette, click the ‘Create New Fill or Adjustment Layer’ button – a circle half black and half white – and click ‘Gradient Map’. Click the arrow at the side of the dialogue box that appears (see thisimage), and load the file ‘Metals’. Apply the gradient in the bottom left (black > white > black – “Steel Bar”), then set this layer’s blending mode as ‘overlay’.

This should give a similar effect to that seen opposite. If not, try the tutorial a few times – there are several variables such as the curves input that can make quite a difference, and it takes some practise!

Credits To Psgallery.co.uk

I like to begin tutorials by showing where we’re going. So without further ado, here is the final grass-text image click to see the full 1920px x 1200px size.

Part 1—The Background

This tutorial is made up of three parts—the background, the text itself, and some final extra effects. So first of all we’re going to make a background. To do this we create a new document in Photoshop. I made mine 1920 x 1200 because I want this image to sit on my laptop background.

We start by drawing a Radial Gradient with the Gradient Tool (G) going from a light yellow-green (#adbf41) to a mid-range green (#328a26). I wonder if I’ve ever written a tutorial that doesn’t start with a radial gradient.

Step 2

Now for this image we want to create a really textured background, faintly resembling paper. So the first thing we need is … a paper texture!

Happily you can grab some really awesome grungy paper textures from Bittbox and they are nice and large too, which is good because this is a huge canvas.

So I can’t remember which texture I used first, but grab one, desaturate it (Ctrl+Shift+U) and stretch it over the top to fit the canvas.

Step 3

Now we set the layer to Overlay and 70% Opacity to blend the texture with our nice green background.

Step 4

Now to get a really distressed look, I then copied this layer, spun it around 180′ and set it to 20%. Then I brought in a few more layers of paper texture (using different textures, mostly from Bittbox) and set them all to faint overlays, one on top of the other.

This was partly for the extra distress, but also because I realised that the textures looked a bit grainy and not small and sharp. So by combining extra textures and then fading it all back, I can get a nicer, sharper overall look.

Anyhow as you can see in the screenshot there are six layers here. Don’t forget if you are a Plus member you can download the PSD file for this tutorial and take a look in there yourself!

Step 5

Now I duplicated the original background gradient, placed the duplicate layer above all the textures and set it to 40% Opacity—this tones back the texture so it’s not quite so grungy!

Step 6

Now we create a new layer over the top and using a large, soft, black brush, add some black to the edges. It’s worth toning back the opacity to about 30% and Overlay. You can then duplicate the layer and run a heavy Gaussian Blur over it (set to about 32px). That way the edges really soften out.

Step 7

OK, we now have a nice background!

Part 2—Grass Text!

OK, we are now ready to make some grass text. To do that, we’re going to need some nice pretty grass to cut. After a lot of searching, I finally found this lovely photo on Flickr of grass.

So download the image at full-size and copy it on to your canvas.

Step 9

Next we need some type. So select a font you want to cut out with. I chose Swiss 924BT, which is fat and condensed type. I thought it looked nice and grand. And I’ve written the text “EARTH”. That’s because I’m making five of these wallpapers—earth, water, fire, air, spirit … it’s like that cartoon I used to watch as a kid, Captain Planet!

Anyways, so just set your text out in white and set it to Overlay and like 50% Opacity. This layer won’t actually show in the end, it’s just a guide layer.

Step 10

OK, so here’s the text on top of the grass we got earlier.

Now a bit of planning! To make text out of grass, it’s not going to be enough just to stencil out the grass. Rather we need it to look all rough, with bits of grass sticking out the edges. To do that, we’re going to use the letter shapes as a rough guide and then trace roughly around them and periodically jut out to trace around blades of grass.

I’ll warn you now, it’s very tiresome!

Step 11

OK, so here we are tracing. You should use the Pen Tool (P) and frankly, if you’re not handy with it before you start, you will be by the end!

Notice how in the parts where my path juts out, it sort of follows individual blades of grass. That way when you have the final cut-out they will look like pieces of grass sticking out.

Step 12

When you’ve finished your path, it’s best to save it in the Paths Palette. You can do this by switching to that palette and then clicking the little down arrow and choosing Save Path. That way if you need the path again later, you can grab it.

Anyhow, double-click the path to get the selection and go back to your grass layer. Duplicate the grass layer so you still have more grass for the other letters, then invert your selection (Ctrl+Shift+I) and cut away the excess grass. In the screenshot I’ve faded back the duplicate grass layer so you can see the cut out “E” part.

Step 13

OK, so here we have our “E” on the final bakcground. As you can see, it looks only slightly better than if we’d just used the letter to stencil out the grass without bothering to trace. But that’s OK, what it needs is a bit more depth. After all, if that letter was really sitting there, we should see some shadow and sides to it.

Step 14

First of all though, we’ll add some layer styling to give it a bit more of a three dimensional look. The styles are shown below.

Layer Style

Here’s the first set of layer styles…

Step 15

Now duplicate that layer, then clear the layer style off the duplicate, so we can add some more styles. This time add the styles shown below…

Layer Style

Here’s the second set of layer styles… (Note that it’s 51% Opacity so it’ll blend in with the previous layer)

Step 16

So this was all just experimental, and it kinda looks OK, but obviously has a long way to go. Now we’ll add some shadow. For that we’ll use a technique that I demonstrated in a previous tutorial, Using Light and Shade to Bring Text to Life

The idea is to make a three dimensional look. So Ctrl-click the grass layer and then in a new layer below, fill it with black. Then press the down arrow once and the right arrow once and fill it again, then repeat over and over until you get an effect like that shown. I think that was about 15 steps of filling.

Step 17

Now we run a Filter > Blur > Motion Blur on our shadow with a 45′ angle and a distance of about 30. Then set the text to a low opacity of about 50%. You should have something that looks like the screenshot below.

Step 18

Now move the shadow layer down and to the right and magic happens! All of a sudden it looks like the letter is casting a shadow. Pretty neat!

Step 19

Now I duplicated this layer three times. Each time I erased a bit of it away so that as the shadow is closer to the text it gets darker. I set these layers to Multiply.

Step 20

So this text is looking pretty cool, but for that extra bit of depth we should add some bits of grass in the background/shadow area. Rather than cutting out more grass, we can just use this current letter transformed about so that it’s not obvious that we’re hacking it together.

So as you can see below I created a few pieces of grass. They are just cut up bits of our main letter.

Step 21

Now by moving those pieces into the shadow areas, we can make it look like there is grass sticking out and it’s a real 3D object made from grass!

Because these new grass bits are in shadow, you might want to use the Burn Tool (O) to darken them appropriately.

Step 22

So yay, one letter down … four to go! Good thing we didn’t choose a long word like erm I don’t know … laborious!

Step 23

Using the exact same technique … here is the A;

Step 24

and the R and T … you get the picture.

Step 25

And finally, the whole word! The only extra thing I did here was to move the letters apart a little. Each letter is in its own Layer Group which makes moving it around much easier.

Part 3—The Finish!

Now nice as it’s looking, our text is a little lonely and monotonous. So in this last section we’ll add a few more elements to the design. Note we don’t want to overdo it, though, because I want this to be a desktop background, so space it is important (for all my icons!).

So first up, let’s add some extra text. Here I’ve placed a nice quote about the earth and unity taken from the Baha’i faith (that’s my religion!). I love quotes, because it means we get three parts to decorate—the quote, the quotation marks and the source.

The text is in a variation of Swiss which is thinner, but still condensed. Using multiple fonts from the same family (heavy, light, etc) is a good, safe bet for keeping your type looking coherent.

So here I’ve set the quote to Overlay and 50%, then duplicated the text and set it to Screen and 50%. Then I’ve added quotation marks in the same Swiss font, but made them extra large and a bright shade of green. Finally, the source of the quote is in teeny letters and centered vertically. And, of course, the whole quote has been measured out so it’s exactly the length of the main “EARTH” text.

Step 27

Next we’ll add a bit of a highlight to the scene. To do this, create a new layer above all the rest, and using the Gradient Tool (G), draw a gradient of white -> transparent towards the top left. Then set this layer to Soft Light and 50%. This will turn it into a nice subtle bit of lighting.

Step 28

Now we’ll add two eye-catching elements to offset all the green. These will be a brilliant blue butterfly and a little red ladybug. I used the excellent everystockphoto Web site that searches a ton of free stock Web sites for you to find two awesome images to use: Ladybug | Butterfly

Step 29

Placing the images is pretty easy. First the butterfly. We just open up the image in Photoshop, use the Magic Wand Tool (W) to select all the white area, then go to Select > Modify > Expand and expand the selection by 1px to make sure we’ve got it all. Then press Ctrl+Shift+I to invert the selection and copy the butterfly over to our main canvas.

The ladybug I selected needs to be cut out of it’s image. To do that I used the Pen Tool (P) and traced around the little guy and then just cut him out that way.

Step 30

So here are our two extras. As you can see, the lady bug looks a bit weird actually because I did a quick’n'dirty job of cutting him out. But that’s OK because he’s going to be tiny so you won’t be able to see the details anyway.

So paste them in and then shrink them down and place them appropriately. It’s best if they aren’t close together, because that way they’ll balance each other.

I added a drop shadow to each. With the ladybug it’s a very close shadow because he’s small and walking on the grass. With the butterfly, I set the distance to about 10px because he’s hovering in the air and therefore the shadow lands a little ways away.

Finished!

And there we have it, one neat little composition featuring text made out of grass! (Click for the full-size version)

Credits to PSD.com

Full list after jump.

1. Beer/bar restaurant website layout

   

2. Design a Web 2.0 tab with Photoshop

   

3. How To Create a Stunning Vista Inspired Menu

   How to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

   

4. Creating A Cool 3D Web Design Effect

   Produce nice subtle 3D effects in our web designs.

   

5. Hero Header I, II

   

6. Create a Nature Inspired Painted Background in Photoshop

   

7. Make the Viget Inspire Background

   An overview of how Viget Inspire background is put together.

   

8. How to Create a Simple & Sleek Web 2.0 Site Footer

   How to produce a sleek looking site footer in Photoshop.

   

9. Create a Sleek, High-End Web Design from Scratch

   High-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout.

   

10. Tutzor web 2.0 style design

    

11. Slick Blue Navigation

    

12. Vista Style Nav Bar

    Create a navigation bar with a unique Vista Style

    

13. Business Web Page

    How to create a web layout for your business.

    

14. Create Chopper Layout

    

15. Website Design Studio

    Learn how to create a professional website design studio. A step by step guide to creating a professional web layout.

    

16. Create Real Estate template

    How to make nice looking web template for Real Estate site.

    

17. Web 2.0 clean layout

    How to make a clean style layout with some basic tools with Photoshop.

    

18. The Most Advance Game Layout

    

19. Black stylish layout

    How to create a stylish layout.

    

20. Sound System Studio Web Layout

    Create a nice looking sound system studio web layout.

    

21. Royal Interface

    

22. Professional Web Template

    Design a nice and professional web template in Photoshop

    

23. Professional Modern Web Layout

    How to create a modern web portfolio layout.

    

24. Professional header design for your website

    How to make a nice-looking and professional header for your website easily.

    

25. Professional Design Studio Web Template

    Guide to design a professional web layout for Web Design Studio.

    

26. Portfolio Web Layout Tutorial

    How to create a modern portfolio layout.

    

27. Professional Blog Template Design

    A professional blog template design created in Photoshop

    

28. Create Flickr Thumbnail Box

    Learn how to use the tools in Photoshop to draw a Flickr thumbnail box.

    

29. Cool Photography Layout

    How to design a simple blue layout with Photoshop by combining shapes and layer styles.

    

30. Personal Site Layout

    How to create a web layout for persoanl site.

    

31. Modernistic Navigation Module

    How simple shapes and gradients can create elegant designs.

    

32. Modern Portfolio Layout

    

33. Interior Design Layout

    

34. Graphic Design Studio Web Layout

    A simple and professional design studio layout.

    

35. Glossy-Style Carbon Fibre Navigation Buttons

    Glossy, carbon fiber navigation set.

    

36. Design Watercolor Effect Menu

    How to design a watercolor effect menu in Photoshop

    

37. Design Studio Website

    A step by step guide to creating a professional web layout with a dark theme for Web Design Studios.

    

38. Creating a Professional Business Layout

    Create a unique business layout using Adobe Photoshop

    

39. Create a Dark Themed Web Design from Scratch

    Learn how to create a colorful design set against a dark background.

    

40. Clean black & green web design

    

41. Sketch Web 2.0 interface

    Draw yourself some graphical user interface for a website