Tommeh FX

Photoshop – Movie Marker

Tom Smith — Tue, 23 Jan 2007 18:15:35 +0000

Image is 1.04MB, users with a slow collection are warned.

Photoshop – Shiny Blue Text

Tom Smith — Fri, 19 Jan 2007 17:01:15 +0000

This tutorial aims to make shiny blue text using purely Layer Styles. Outcome:

To start with, make a new document and make a new text layer. I used the Font Impact, and the colour #7DAAD1.

Now, right click the text layer and click on Blending options, now, using the navigation down the side of this window, apply these layer effects:

NB. The blue in the Outer Glow and Stroke is #416A8E.

Drop Shadow, Outer Glow, Bevel, Satin, Gradient Overlay, Stroke.

Go back to your Satin layer, and drag the Satin around in the main window until you get the desired shine, the settings I have given should provide it like in the picture.

CSS – Rollover Buttons

Tom Smith — Mon, 08 Jan 2007 19:24:15 +0000

This CSS tutorial aims to show you just what is possible with CSS, it can makes bland text links look much more attractive.

Start by pasting this into your HTML document. It is a simple text link:

Button Text Here

This is basically a link with a class assigned so the CSS will know which style to apply to it. Ok, now open a Stylesheet, or make one (save a notepad file as *.css) and paste this into it:

a.button { background: #00ff00; border: solid 1px #009900; border-left: solid 10px #009900; color: #003300; text-decoration: none; font-weight:bold; font-size:10px; font-family:verdana, arial, sans-serif; padding:2px 4px 2px 4px; }

This is the code for what the button looks like. The background attribute will assign the background colour, in this case, I have used bright green. The next attribute, border specifies the style (solid), thickness (1px) and colour (#009900). The next attribute, border-left, overrides the border attribute, therefore giving the left border a thicker edge. The colour attribute specifies the colour of the actual text, this shouldn’t be confused with the background colour. Text decoration specifies the style the link will be, because this is a button, I have written none, however, you are free to change it. The font-weight attribute specifies the weight of the font, to make the text stand out more, I have chosen bold. Font size should be fairly obvious. Font-family is the same as font face in HTML, the fonts must be separated by a comma, and fonts with a space must be put in “”. The padding attribute sets the space from the text to the edge of the button. I have made the left and right edges big and the top and bottom quite small, the order goes top, right, bottom, left.

Paste this code into your CSS file:

a:hover.button { background: #ff0000; border: solid 1px #990000; border-left: solid 10px #990000; color: #003300; }

This is the hover for your button. The attributes will stay the same from the original, unless stated. This particular script will make the button retain it’s original values, whilst turning it red.

Last but not least, go back to your HTML document, you need to link to the stylesheet. Paste this into your HTML:

Cool, eh?

Of course, there is nothing to stop you changing these values, you could make it so the large block switches sides, so that is is on the right side when rolled over, you could make it expand, contract, or you could make it appear on top. The possibilities are endless, have fun!

If you are stuck, you can download a .zip with all the files in here.

HTML – Favicon

Tom Smith — Tue, 02 Jan 2007 21:49:35 +0000

A “Favicon” is the icon that appears next to the address bar, and also the icon that appears on a Favourited or Bookmarked page, hence the name.

This tutorial will tell you how to create the favicon, and how to implement it into your website.

This is the Favicon of my WordPress blog in Firefox. To make the icon it is simple. The icon must be 16×16. When you have made it (this isn’t explained in the tutorial), save it as a .bmp, and then change the extension manually by renaming it. If you are unable to see the file extension in Windows Explorer, go to Tools > Folder Options, then click on the view tab, and uncheck “Hide extensions for known file types”.

The code is relativley simple, just paste this into the part of your document:

That’s all! You just need to rename the “yourimage” with the actual image path, but I’m sure you worked that out…

Photoshop – Rounded Corners

Tom Smith — Mon, 01 Jan 2007 10:39:44 +0000

Hello, this tutorial will try to explain how to get rounded corners in Photoshop, I am working with Photoshop CS1.
Open up a new document, the proportions don’t really matter but I have made it 300x300px, it is not so important, but I set my background to white.

Here is where we face a split road: do we want to have a simple rounded corners box? What if we want some oddly shaped box with rounded corners? If you want the former, I would suggest simply using the rounded rectangle tool.

If you want the latter, look no further. We will start by making a new layer (Ctrl-Shift-N / Layer > New > Layer…)

Grab the rectangular marquee tool and make the desired selection on your canvas.

Rectangular Marquee

Now, head into the Channels tab, and click the icon at the bottom that looks like a white circle inside a dark square.

Deselect the selection (Ctrl-D). You should be presented with a white fill where your selection was. This is good. Now, go Gaussian Blur (Filters > Blur > Gausian Blur) with any desired amount: the higher this amount is, the more rounded the corners will be. I chose 5.

Gaussian Blur

Now, it’s time to open the Levels box (Ctrl-L). Start slowly dragging the black and white arrows in the upper bar until you have a look you are pleased with. I finished with: 110 . 0 . 150.

Rounded

We aren’t quite finished yet. Hold down Ctrl and click the “Alpha 1″ layer in the Channels tab. This will load the selection. Go back into layers, make a new layer, then delete the original layer one: we don’t need this. You can now fill in this new layer with whatever you want.

But wait, what if we want to add a picture? No problem, find the picture you want, and paste it into the document, drag it above the layer with the rounded box, and press Ctrl-G: This creates a clipping mask, that means that the image will only show where the bottom image exists.

Finished!

I got that image by searching image on Google Images, if you wanted it…

If this tutorial is not clear, please say, and it will be updated!