Posts tagged Tutorials
Super Clean and Easy Writing in the Sand Photoshop Tutorial
Feb 22nd
After searching fruitlessly for a good Photoshop tutorial on creating a “writing in the sand” effect, I ended up making up my own way – and now I’ll share it with all of you!
It creates a very clean and smooth effect and is super easy and fast to complete.
The first step is to find an appropriate font that will look like someone has written in the sand with their finger. For the tutorial, I chose to use Handwriting – Dakota since I like the rough quality to it.
After you’ve found a suitable font, create a new canvas in Photoshop. You can also use an existing one if you already have a design started.
Since there can be no writing in the sand without the sand, let’s create a sand background for behind our text. Fill your canvas with an appropriate sandy colour – I am using #f0ebdf. Now go to the top menubar and go to Filter – Noise – Add Noise… Check the Monochromatic box and set it to Uniform Distribution. You can fiddle with the Amount, but remember, you want it to look like sand, not a bunch of noise! I used 1.75% and was quite happy with the subtle texture. Click OK.
The great thing about this method is it will create a perfect tiling background – you don’t have to worry about seams showing up if you use it as a repeating page background for your web design!
Now we need to add our text. You’ll want to make it a dark brown colour so that it can be read easily against your sand background – I am using #a0894e.
Next, we’re going to use some Blending Options on our text layer to create the illusion of a build-up of sand around our text, and to give our text some depth. In your menubar, go to Layer – Layer Style – Blending Options. To create the sand build-up, let’s add a stroke. The size of the stroke will depend on the size of your text – it should be in proportion to look realistic. Since I have rather large text, I am going to make my stroke 4 pixels. The position should be on the Outside, and change the blend mode to Overlay. Up the Opacity to 100% and change the colour to black (#000000).
If you click OK, your text should now look something like this:
Now, to create some depth, let’s add Bevel and Embossing. We’re going to give our text an Inner Bevel. I changed the depth to 50% and made the size 4 pixels; you can experiment with these values to get your desired effect. The important part is to change the lighting so that the text looks like it is ingrained into the canvas rather than sticking out of it. I changed the Shading Angle to -120 degrees and changed the Altitude to 30 degrees. Change both the Highlight and Shadow Mode to Overlay and lower both Opacity values to 50%. The Highlight colour should be white and the Shadow black. Click OK.
We’re almost done! Your text should now look like it is etched in the sand:
You can stop at this step if you prefer, but I’m going to add the final touch by giving our text a bit more texture. Make sure your text layer is still selected, and again go to your menubar and go to Filter – Noise – Add Noise… Use the same settings as before, but up the Amount a bit: I made mine 3%. Click OK and now you’re done!
The final product should look something like this:
Easy right?
I hope you enjoyed my little tutorial. Comment on this post if you have any issues getting things to work, or if you would like to suggest improvements!
If you liked this post, you might also like…
Pillowed Text Photoshop Tutorial
Top 10 Web Design Resources Every Designer Should Know About
Feb 14th
Where would web designers be without the invaluable resources provided on the web for us? Design inspiration, stock photos, tutorials, fonts, freebies, brushes, textures … the list goes on. Take advantage of the resources and expertise other web designers offer for free! Here are 10 of my absolute favourites, in no particular order:
Design Meltdown (design inspiration)
Browse thousands of cataloged sites to get inspiration for your own web designs – invaluable for finding inspiration on specific design elements, styles, themes, or colours.
Scrnshots (design inspiration)
Browse screenshots of inspirational web design uploaded by other users or upload your own favourite designs. Very useful for finding inspiration about specific elements since you browse by tags and keywords.
Designer’s Toolbox (design resources)
Provides many miscellaneous design and print resources, including PSDs of HTML form and browser elements for realistic design mock-ups.
Stock Xchng (stock photos)
One of the best free stock photo sites; Stock Exchange provides thousands of super high-quality stock photos for FREE for both personal and commercial use.
Smashing Magazine (interactive design blog)
The most well-known web design blog out there, Smashing Magazine provides TONS of information, resources, tutorials, and tips from industry professionals. Try to soak up as much of their expertise as you possibly can.
DaFont (free fonts)
Browse their huge selection of free fonts to spice up your design. They make it easy to find a specific type of font since you can browse by theme, name, or search for keywords!
Blind Text Generator (dummy text)
Generates highly-customizable dummy text (lorem ipsum) for use in the text areas of your design.
Type Tester (css font comparison)
Preview different web-safe fonts to see what they will look like on the screen and customize the different CSS font options.
Color Scheme Designer (colour palettes)
Highly-customize colour palette generator which allows you to also preview what the colour scheme could look like on a web page.
Design Resources Search Engine (design search engine)
This search engine has endless usefulness – it allows you to do a Google search but only on the selected design-related websites. Great for finding tutorials, resources, and blogs.
What are YOUR favourite web design resources? Comment and let us know!
If you liked this post, you might also like…
CSS Custom Font-Face
Feb 11th
On the request of my friends, this post will show you how to simply add your own font face to your website using CSS. This comes in handy when you want to display dynamic text on a webpage when the user does not have the font installed on their system. This is a very old CSS trick that is not used very much and is not even CSS3. It will work in all browsers but Internet Explorer. The reason being is that Internet Explorer uses a different font-face type. For this tutorial we will be using the “True Type” format for our fonts and has the “.ttf” file extension, you can download any True Type font and use it.
Get started on my tutorial by clicking the link below! It literally takes 10mins or less to learn!
HMTL5 Local Storage, Session Storage, and Client-side Database Tutorial by O’Reilly
Feb 4th
This tutorial will take you through the new features of HTML5 involving client side storage, sessions and databases. The tutorial is based off creating a web app for the iPhone but will serve you the same purpose if you are looking for any web based platform. HTML5 is the future and its a good idea to make good use of this information ahead of time.
Pillowed Text
Jan 27th
Using Adobe Photoshop, this tutorial will teach you how to create that cool pillow effect on text.
Simple Image Gallery in Flash CS4
Jan 22nd
Want to create a cool image gallery in flash? Then this tutorial is perfect for you! This will teach you how to create a simple image gallery with thumbnails in Adobe Flash CS4.
Using MooTools to Create Tabs
Jan 20th










