If you’ve ever created a Twitter account and customized it with some text, you would have discovered that the amount of text that you can display to describe yourself is very limited.
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.
Kiam Dean Art
Just Tweet It
Best Deals (Amazon)
Web Designer Depot
Local Hero Design
Must Have Menus
With the recent release of Mac OS X Leopard, I’ve decided to create a tutorial where you can create your own ‘X’. This tutorial is a great exercise in using the dodge and burn tool as well as working with selections.
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.
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.
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.
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.
|1: We’re going to try to get a really metallic chrome effect on our text, using curves and other features in Photoshop. Start off with a large canvas, the larger the better – I’m using 800×800. Make some text and have it a light-medium grey, in the example I’ll use #B3B3B3.
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!
The End Effect
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. 🙂
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.
Now we set the layer to Overlay and 70% Opacity to blend the texture with our nice green background.
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!
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!
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.
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.
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.
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!
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.
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.
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.
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.
Here’s the first set of layer styles…
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…
Here’s the second set of layer styles… (Note that it’s 51% Opacity so it’ll blend in with the previous layer)
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.
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.
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!
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.
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.
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.
So yay, one letter down … four to go! Good thing we didn’t choose a long word like erm I don’t know … laborious!
Using the exact same technique … here is the A;
and the R and T … you get the picture.
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.
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.
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
Placing the images is pretty easy. First the butterfly. We just open up the image in Photoshop, use the Magic Wand Tool 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.
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.
And there we have it, one neat little composition featuring text made out of grass! (Click for the full-size version)
Whether you kick off a web interface design by sketching on papers or blank Photoshop canvas, it’s good to get some guides and inspirations. Here we’ve compiled some of the nicest Photoshop tutorial that guides you, step by step, building up a web interface all the way from scratch.
Full list after jump.
How to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.
Produce nice subtle 3D effects in our web designs.
An overview of how Viget Inspire background is put together.
How to produce a sleek looking site footer in Photoshop.
High-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout.
Create a navigation bar with a unique Vista Style
How to create a web layout for your business.
Learn how to create a professional website design studio. A step by step guide to creating a professional web layout.
How to make nice looking web template for Real Estate site.
How to make a clean style layout with some basic tools with Photoshop.
How to create a stylish layout.
Create a nice looking sound system studio web layout.
Design a nice and professional web template in Photoshop
How to create a modern web portfolio layout.
How to make a nice-looking and professional header for your website easily.
Guide to design a professional web layout for Web Design Studio.
How to create a modern portfolio layout.
A professional blog template design created in Photoshop
Learn how to use the tools in Photoshop to draw a Flickr thumbnail box.
How to design a simple blue layout with Photoshop by combining shapes and layer styles.
How to create a web layout for persoanl site.
How simple shapes and gradients can create elegant designs.
A simple and professional design studio layout.
Glossy, carbon fiber navigation set.
How to design a watercolor effect menu in Photoshop
A step by step guide to creating a professional web layout with a dark theme for Web Design Studios.
Create a unique business layout using Adobe Photoshop
Learn how to create a colorful design set against a dark background.
Draw yourself some graphical user interface for a website
Typography means a lot in any medium kind of presentation. Whether it’s a logo, banner or just a title; being able to inject creativity into it not only help in delivering the message across, it also leaves solid impression on the viewer. Good typography design is not easy, or should I say getting the type match and speaks for the product is often a very challenging job.
Here are some of the best Photoshop text effects tutorials on the web, and as usual it’s the creativity that counts. Full content after jump.
‘Bee Movie’ Text Effect
Metal Text Effect
Really metallic chrome effect.
Grass Text Effect
Cool looking grass-text effect using a photo of grass, the pen tool and a bit of patience.
Leopard ‘X’ Effect
Exploding Text Effect
9 Steps in creating an exploding text.
Reflective Liquid Effect
Realistic text made from water drops.
Slow Shutter Text Effect
Learn how to create this stunning slow shutter text effect using just Photoshop.
Flaming Meteor Text Effect
Take typography one step further by having text falling from the sky in a burning inferno.
Smooth Glass Effect
Nice looking translucent glass type that’ll work great on any background, made completely with layer styles.
Soft Stylized 3D Type
Basics of creating polished 3D type using Illustrator and Photoshop.
Fire Burning Text Effect
How to use a photograph of fire to set text to the match.
Bling Text Effect
How to make a realistic bling bling gold and diamond text.
Supernatural Text Effect
Creating a smoky night effect on text to give it an eerie supernatural sort of feel.
3D Typographic Effects
How to add the wow factor to 3D text using Photoshop’s art tools.
Smooth Chrome Text
How to create a nice StarCraft style wallpaper.
Advance Glow Effect
Old School Type
Grunge Rubber Stamp
Simple method to create grunge brushes, and to detail how these brushes can be used to reproduce realism in our rubber-stamped logos.
Useful for creating a unique logo .
var infolink_pid = 24649;
We know we can always count on the internet for free quality icons, but that being said, free icons sometimes might have it’s limitation too. Here’s few we can quickly think of:
- Copyright. Most free icons restricts usage on non-commercial product/website only.
- Size. Don’t you just hate it when you found your favorite icon but it’s only a 32×32 and you wish they have a bigger version?
- Colors. You found the exact icon you want, but the color is just not right.
- Transparency. Some author did not distribute their free icon in .PNG or original source. That makes it hard to implement their icons on our design.
Creating your own icon not only overcome above mentioned problem, at the same time you gain and brush up your photoshop skills. Nothing beats the satisfaction of creating things on your own. We’ve crawled the net, searching from sites to sites and here’s a 40+ hand-picked Photoshop tutorials that guide you through icon designing. Have fun.
You might also be interested in these following Photoshop articles we’ve previously published.
Full content after jump.