Tutorials

To IF or not to IF?

One of the most used and important things you can do in PHP is an “if” statement.

if (!$variable1) {
echo “variable1 is NOT set”;
} else {
echo “variable1 is SET”;
}

Your typical IF statement. But if all you’re going to do is use ECHO to write a short string as output, then there’s a shortcut that I don’t see enough these days in people’s source code.

echo (!$variable1) ? “variable1 is NOT set” : “variable1 is SET”;

You’ve just condensed an IF statement into a single line. Obviously there are times when you would use this and times when you shouldn’t. But if you’re simply outputting a one liner like me here in the example code, this code is your friend.

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Super Clean and Easy Writing in the Sand Photoshop Tutorial

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.

Final Writing in the Sand preview

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.

Add Noise

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.

Add text

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).

Add stroke

If you click OK, your text should now look something like this:

Stroke Preview

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.

Add Bevel and Emboss

We’re almost done! Your text should now look like it is etched in the sand:

Bevel and Emboss Preview

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!

Add Noise to Text

The final product should look something like this:

Final Writing in the Sand preview

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

How to Create a Stylish Pair of Headphones

Create Cool iPhone Icons

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

How to embed fonts in Actionscript 3.0 – The easy way

In this tutorial I will teach you how to embed a custom font. Embedding fonts is good practice in case if the person viewing your flash application or website does not have the font installed on their computer.

In your .fla file go to the library menu and select New Font

The library menu

A font properties menu will show up. Here you can edit the font name and the font. As you can see I have named font to be myFont Plain. This is because the font that Iam embedding is not bold nor italic. You can name it whatever you want but be descriptive to avoid confusion. The Font is named myFont. This is your main name for the font. Below are some checkboxes which help identify the style of the Font. If I style text with myFont, because I left the checkboxes blank the system will use myFont Plain. If I had created another font which was myFont, had its name as myFont Bold and then selected the bold style, I would have a Bold style for myFont. Now when I use myFont, I can use a bold tag around it and the myFont Bold will get shown.

After adding the new font you should be able to see it in your library. Right click on it and select Linkage. In the Linkage properties window check the box that says Export for ActionScript. You can name the class anything you want but make sure you don’t change the Base Class name.

Now go into your .as file. You will need to import the following classes to make this work.

import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.AntiAliasType;

Now that we have our classes loaded we will create a text format and a text field and then add the format to the new text field.

var format:TextFormat = new TextFormat();
format.font = ‘myFont’;
format.color = 0×333333;
var myText:TextField = new TextField();
myText.text = ‘Some Filler Text’;
myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.setTextFormat(format);

And there you go. You now have textfield using custom font.

Known Problems

-I am using Flash CS3 on my Macbook Pro and I found that if you add a font to your computer in the fonts folder while Flash is open the font may not be displayed. Instead what was happening to me was I was getting a default font. This made me stressed as nobody was having this problem. But all you have to do is close Flash and reopen Flash and your font will work now. There is some refreshing issue that Flash has with this process in CS3.

I will be posting any other issues with possible solutions.

If you liked this post, you might also like…

How to change a textfield’s alpha in Actionscript 3.0

Simple Image Gallery in Flash CS4

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

How to change a textfields alpha in Actionscript 3.0

I am writing this tutorial for anyone who is having any issues with changing the alpha channel with actionscript. I’m gonna show you how. This might seem pretty straight forward at first, I mean I thought it was, but you actually can’t just start changing the alpha property without first setting its blendMode. This sometimes gets overlooked in tutorials.

First import the BlendMode Class into your document.

import flash.display.BlendMode;

Second you’ll want to set the textfields blendmode to LAYER

var myTextField:TextField = new TextField();
myTextField.blendMode = BlendMode.LAYER;

There it is fellas. Easy Breezy. Now you can change the alpha of the myTextField

If you liked this post, you might also like…

How to embed fonts in Actionscript 3.0 – the easy way

Simple Image Gallery in Flash CS4

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

CSS Custom Font-Face

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!

View the Full Tutorial Here!

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

HMTL5 Local Storage, Session Storage, and Client-side Database Tutorial by O’Reilly

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.

Click Here for the Tutorial

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

So You Made a Video for Youtube, Now What?

So you just finished filming that super awesome video you plan to stick right in your Youtube account. You’ve shot it, edited it, and now you are about to upload it, but then you suddenly think: what is the best aspect ratio for my video for youtube?

It’s not that simple, friend. There are more things you need to do than just fix the aspect ratio. So here, in the rest of this article, are the things you will need to do before you put up your video to youtube’s public eye.

Aspect Ratio & Resolution

YouTube has two different ratios, one for regular quality and one for High Def.

  • Regular quality uses 4:3 ratio, and the best size is 640×480. This will allow it to be halved to 320×240 and keep a lot of the video quality.
  • High Definition uses 16:9 ratio, and the best size is 1280×720.

If your resolution differs, remember that Flash’s FLV codec works best if you use multiples of 16 for the size of the video.

Sound

Sound is another thing that you will have to watch for to optimize load speed and sound quality.

  • In Regular quality, the sound will be compressed to 22.050kHz mono
  • In HD, the sound will be made CD quality at 44.1kHz stereo

Codec Choice

Youtube recommends the H.264 codec by Apple.

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Pillowed Text

Using Adobe Photoshop, this tutorial will teach you how to create that cool pillow effect on text.

Click Here for the Tutorial

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Rounded Corners with CSS

Using DreamWeaver CS4 this video tutorial will teach you how to create rounded corners on webpages using CSS.

Click Here for the Tutorial

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Wana Learn jQuery?

Heard of jQuery? Want to learn about it and not quite sure where to start? This tutorial will help beginners get started and introduce you to the neat JavaScript library of jQuery.

Click Here for the Tutorial

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter