Slicing Images

admin — Mon, 23 Jun 2008 14:21:06 +0000

Slicing Images

There has been a lot of talk lately in the forum regarding this issue. How to slice an image you have made in Photoshop - the quick and easy way.

Here I’ll show you a very fast and simple way to do this.

A quick tip on the way:
Plain text and very simple graphics: save as gif.
Photographs and beveled images: save as jpg.

Ok - when you have finished the work on your design in PS you have to drag out som Guidelines to show where you want to slice your image.

To do this you have to have the “Show Rulers” option active (View - Show Rulers).

Activate the Move Tool and then just click on the horisontal/vertical rular and drag out the guidelines and position them where you want them.

Now click on the “Jump to Image Ready” button .

Once your image has opened up in Image Ready go to Slices - Create Slices from Guides.

Your image should now have a number on each slice like shown in the picture to the left.

Then choose if you want to save your images as jpg or gif - and how much you want to compress the images in this window:

(If this window doesn’t show just select the whole image file and it should appear…)

Now you’re actually ready to save all your slices at once in just one step!

Go to File - Save Optimized As - and then choose if you want just the images saved, the HTML + images saved or just the HTML.

If you choose the HTML + images option Image Ready takes care of putting it in a table for you.
If you want your table to be aligned to the center insted of to the left you just add the align=”center” to your code like shown below:

align=”center”>

Then you’re actually finished! Now that didn’t take much time - did it?

Just a few words at the end:

In Image Ready you can select individual slices and then in the Optimize Palette on the right hand side you can select file formats (.gif, .jpg, .png etc.) and select compression ratios or in the case of .gif the number of colors. This allows full control over each slice.

Inset

admin — Mon, 23 Jun 2008 14:20:28 +0000

Inset

	Start with opening your image. Figure 1
	Push down the Ctrl-button and left-click the image layer to select your image. Now go to Selection - Modify - Expand - 2 pixels. (For larger images you’ll need to insert 3-4 pixels). Create a new layer - call it white shadow - and place it beneath your image layer. Select White as your foreground colour and flood fill your selection (choose the Paintbucket and select foreground in the options window on the top right side of your screen). Your image should now look like fig. 2. Figure 2 Keep your selection and create a new layer over the white shadow layer and beneath the image layer and call it black shadow. Select black as your foreground colour and flood fill your selection. Now deselect (Ctrl - D).
	Still at the black shadow layer choose Filter - Blur - Gaussian Blur and insert 1,5 - 2 pixels. I used 1,9 pixels. Click ok.Activate the white shadow layer and repeat the Gaussian Blur effect - fig. 3. Figure 3
	Now we have to move the two shadow layers a little bit to get the wanted effect. Still at the White shadow layer select the Move Tool ( see fig. 4). Now we have to move the white shadow layer one pixel down and one pixel to the left (for larger images move 2-3 pixels….). Use the arrowkeys on your keyboard to move the layer. (One touch at the down-arrow = one pixel down etc.). Now select the black shadow layer. Now move this layer one pixel up and one pixel to the right. Figure 4
	Finished !

Bubble Gum Text

admin — Mon, 23 Jun 2008 14:19:14 +0000

Bubble Gum Text

	Final result! Hey Guys! Ready for some yummy plastic text? This effect is made using lightning effects, the plastic wrap filter and layer styles, and I think it looks really smooth. Hmm - suddenly I got the urge for some bubble gum
	Fig. 1	Start by opening a new image (mine is 500 x 170 pixels) and select the Type Tool and type the desired word. Be sure you use large letters for the effect to turn out right - you can always minimize it later… (Font used: Yellow Submarine - 200 pt) Select the text by hitting Ctrl + left clicking the text layer. Create a new layer (call it text) - select the Paintbucket Tool and fill the selection with a light blue color (I used font color #6897BB). Hide the original text layer. Keep your selection and go to Channels.
		Now click the “Save selection as channel” button, and then drag the Alpha 1 layer down to the Create new layer tab to duplicate it. Now we have to blur things up a bit. Still at the Alpha 1 copy layer go to: Filter - Blur - Gaussian Blur - 8 pixels Filter - Blur - Gaussian Blur - 6 pixels Filter - Blur - Gaussian Blur - 3 pixels Filter - Blur - Gaussian Blur - 1 pixels Now go back to Layers. PS! Still keep your selection!
	Fig. 4 Select the layer called “text” and go to Filter - Render - Lightning effects - and use the setting shown in fig. 4.
	Fig. 5	Still keep your selection and go to Filter - Blur - Gaussian Blur - 1 pixel. Select - Modify - Contract - 1 pixel. Then hit Ctrl + Shift + I to invert the selection and hit Delete to get nice clean edges. Now it’s time to deselect (Ctrl + D). Now drag this layer down to the Create a new layer tab to duplicate it. Call this layer Plastic wrap.
	Fig. 6	Now go to Filter - Artistic - Plastic Wrap and enter the values shown in figure 6. Now duplicate this layer. On the Plastic Wrap copy layer change the layer mode from Normal to Overlay.
	Fig. 7	Go back to the Plastic Wrap layer and add a nice drop shadow with the values shown in fig. 7. Your image should now look like final result image at the top of the page. Want more? Want really shiny plastic? Well - keep on reading… We’re just a few steps away from getting the result shown in figure 8.
	Fig. 8 Activate the Plastic Wrap layer and go to Layer - New Adjustment Layer - Hue/Saturation and check the Group with previous layer option - OK. In the Hue/Saturation window check the Colorize option and enter Hue: 304 and Saturation: 100 - OK. Remember the very first text layer we made? Hit Ctrl + left click the original text layer. Select the Rectangular Marquee Tool and use the arrow keys to move the selection 4 pixels to the right and 4 pixels down. Then hit Ctrl + Shift + left click the original text layer again. Now you shall have the text layer + the shadow area selected. Go to Edit - Copy Merged. Then create a new file with the same size as the original image - white background. Edit - Paste. The last thing you have to do is to add a nice drop shadow effect and you’re done! (I used the default setting in the Drop Shadow layer style - I just changed the color to #76008A and the opacity to 51 %).

Screw

admin — Mon, 23 Jun 2008 14:17:22 +0000

Screw

	Start with making a chrome sphere. Fig. 1
	Now select the Rectangular Marquee Tool and make a selection similar to fig. 2. (It’s easier if you use the zoom-in option 1-2 times). Fig. 2
	Now fill the selection with 60% black (Edit - Fill). Keep your selection and use your arrow keys to move the selection 2 picels down. (Hit the “down arrow” 2 times). Fill the selection with 100% white. Now move your selection up 2 pixels an fill the selection with 60% black. Deselect and your finished!
	To spice it up a bit add some texture to the background and apply the inset effect.

Patterns

admin — Mon, 23 Jun 2008 14:16:01 +0000

	Figure 1	This is a very easy tutorial, and I know plenty of other sites has covered this issue, but still I get so many e-mails from people asking how to make scanlines etc., so I decided to make my own tutorial about this.First I’ll show you how to make a little bit different pattern, and further down I’ll show you how to make those classic scanlines. First: Start by opening the image you want to apply the pattern. I just made a new image (250 x 250 pixels) to show you how to create the effect…
	Figure 2	Then create a new image 5 x 5 pixels, transparent background. The image in figure 1 is zoomed in a little bit to be more readable.Make the color you want on your pattern your foreground color. Then Select - All. Now go to Edit - Stroke - 1 pixel - Inside - Opacity 100 % and click OK. Keep your selection and go to Edit - Define Pattern. Go back to the image you started with, and be sure you create a new layer where you want to apply the pattern.
	Figure 3	At the new layer - I called mine pattern - select the Paintbucket Tool and change the Fill options window from Foreground to Pattern. (If you have PS 6 be sure to select the correct pattern in the Pattern drop down menu!) Now fill your new layer with the pattern and your image should look similar to fig. 2.This is a nice effect, but I wanted to spice it up a little bit. By adding a simple Bevel and Emboss to the layer your pattern could look like figure 3. (PS 5.5: Layer - Effects - Bevel and Emboss. PS 6: Add a new layer style - Bevel and Emboss). I used this settings (PS 5.5): Highlight: Mode: Overlay, Opacity: 75 % Shadow: Mode: Multiply, Opacity: 75 % Style: Inner Bevel Angle: 120 Depth: 5 pixels - up Blur: 1 pixel. Use these setting if you use PS 6: Style: Inner Bevel Technique: Smooth Depth: 500 % - Direction: Up Size: 1 px The Highlight and Shadow modes are the same…
	Figure 4	To make an oval shape with faded edges you can easily do this by: Select the Elliptical Marquee Tool and select an area of your choice. Then go to Select - Feather - 15 pixels (Select - Modify - Feather if you use PS 5.5). Make sure you’re on the pattern layer and hit Ctrl + Shift + I to inverse the selection. Now hit the Delete key a couple of times and your image should look similar to my fig. 4.
	Figure 5	Here you see my final example! I used this effect on one of the logos I was working on when I started out making this new site.
	Figure 6	Here’s another example on how you can work with patterns. This is how I make my scanlines: Create a new image, height = 2 pixels and width = 50 pixels. Hit D to make black your foreground color. Now select the Rectangular Marquee Tool and check the Fixed size option in the Style window at the top of your screen). Now set the height to 1 pixel and the width to 50 pixels or more. If you use PS 5.5 just select the Single Row Marquee Tool. Select the upper pixel of the image and fill your selection with black. Now go to Select - All + Edit - Define pattern. PS 5.5: Select the Paintbucket Tool, and change the fill option to pattern. Select the area you want filled with the pattern and create a new layer on top of the image layer. Now fill your selection. To create a different effect play with the layer modes and the opacity. For instance you get a pretty cool effect changing the layer mode to either Overlay or Soft Light.
	Figure 7	Now to those of you who use PS 6: I just love the new feature in PS 6 with layer styles. They’re so easy to use, and if you want the exact same effect on another layer you just copy and paste the effects! A real time-saver! Select the layer you want the scanline effect on. Now click the Add a layer style button and select the Pattern Overlay option. In the pattern option window select the scanline pattern we created. For this image I change the Blend mode from Normal to Soft Light, and I set the opacity to 56 %. Click OK and your finished!
	Figure 8

Chome Buttons

admin — Mon, 23 Jun 2008 14:14:15 +0000

Chome Buttons

	Fig. 1	Create a new document, and add your desired background color.Then create a new layer (layer 1) and select the Rounded Rectangle Tool and draw a shape similar to mine in figure 1. PS! Make sure the Create Filled Region is checked . Then we can alter the shape later on without first having to rasterize the layer .
	Fig. 2	Then download and add this layerstyle. (Save it to the styles folder in PS 6 - Presets - Styles).Duplicate the layer and call it layer 2 (oh yes - I’m just sooooo creative with the layer names today :o)
	Fig. 3	Still at layer 2 select the Move Tool and drag out some helpful Guides according to figure 3. You do this by simply clicking and draging them out from the Rulers. Then select the Polygonal Lasso Tool and make a selection similar to mine. Make sure the Snap option is checked (View - Snap).
	Fig. 4	Then hit the Delete key to get rid of the selected area. Deselect.Now repeat on the left side of the button.
	Fig. 5	Go back to layer 1 and duplicate it - layer 3. Move this layer below the layer 1 layer and use the Free transform tool to make it look like like fig. 5. Then change the Drop Shadow layer style to Distance: 2 pixels and Size: 5 pixels.
	Fig. 6	Then duplicate layer 3 - call it layer 4, and drag it below the layer 3 layer. Then I used the Edit - Transform - Scale option, and entered Width: 103%, Height: 90%.
	Fig. 7	Now go back to layer 1 and add a scanline Pattern Overlay layer style. To do this just download my scanline psd-file, open it in Photoshop - Select all - Edit - Define pattern - and name it Scanlines. (PS! To make the scanlines show I changed the Gradient Overlay mode to MULTIPLY!)To see how my Pattern Overlay window looks like click here. Then change the Drop Shadow layer style to Distance: 2 pixels and Size: 2 pixels.
		My final result.

Disgruntled Dots

admin — Mon, 23 Jun 2008 14:12:28 +0000

AGetting Started

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

For this tutorial, save the hoopy water image I rendered, on the left side, and open it in Photoshop.

If you don’t know how:

Right click on the image, and click Save Picture As…
Save the image to your desktop
Run photoshop, and open the image file

Now, open the Channels window.

Create a new Channel
Grab the rectangular marquee selection tool
• hold down shift and select a box 18×18 pixels, and fill it with white
• grab the Elliptical marquee tool [] by clicking and holding on the rectangular marquee tool button
• with the Elliptical marquee tool, hold down shift, and select a circle inside the white box
•fill the circular selection with black

Make sure your results look similar to mine.

BSetting the Pattern

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Grab the rectangular marquee tool again.

Select around the original box, and in the menu go Edit > Define Pattern
Create a new channel, and grab the Paint bucket tool. In the Paint Bucket tool option window (Window > Show Options), select pattern fill contents
Click in the new channel to fill it with the pattern and then on your keyboard hold down Ctrl+I to invert the colors.

Go back to the Layers window. Drag the Background layer onto the new layer button []

Select the layer Background copy, and go Filter > Pixelate > Mosaic… 18 pixels

CDisgruntling Dots

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Go to the Channels window, hold down Ctrl, and click on the channel Alpha 2, or the channel with the pattern. A selection outlining the pattern should appear all over your document.

Now, go back to the Layers window and select the layer Background copy, the layer with the mosaic effect. Go Edit > Copy, or Ctrl+C on the keyboard, to copy the pixels to clipboard.

Paste the contents of the clipboard, by selecting Edit > Paste from the menu, or pressing Ctrl+V on the keyboard. Photoshop will automatically create a new layer, and paste the dots into it.

Make sure your layers resemble those in the picture to the left. If they don’t, see if you missed a step.

Next, delete the Background copy layer, by dragging it onto the little trash icon at the bottom right of the layers window. []

Finally, click on the Background layer and Gaussian blur it. Filter > Blur > Gaussian Blur… 9 pixels

DAdded Effects

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Here I’ve customized the effects, with a description of the effect and how it was achieved in the caption. Enjoy!

Change the blending mode on the dot layer (Layer 1) to Lighten. Make a copy of the dots layer and change the blending mode on the copied layer to Color Dodge, and set the opacity on it to 20%.

Chipped Type

admin — Mon, 23 Jun 2008 14:11:17 +0000

1 Create a new image, and use the Type Tool to create some text. If you are using Photoshop 5.0 or later, right click on the T icon on the text layer, and select Render Layer.

Next, holding down Ctrl, click on the text layer to select it’s transparency.

Press Q on the keyboard to enter Quick Mask Mode.

2
Press Ctrl+I to invert the mask.

Now, in the menu go:
Filter > Pixelate > Crystallize…

Crystallize by 10 pixels, and hit OK.

3
In the menu, select:
Image > Adjust > Brightness/Contrast…

Drag the Contrast slider to 96, and Brightness to -75 and hit OK.

Press Q, on the keyboard, to exit Quick Mask Mode.

In the menu, go: Edit > Clear
Deselect Ctrl+D.

Outlines

admin — Mon, 23 Jun 2008 14:08:41 +0000

STEP 1

Create your text using the Type Tool.

STEP 2

Go Select > Load Selection…
Just hit OK, and it will select the outline of the text.

STEP 3

Then Select > Modify > Expand…
Change this to the value you want the outline to go outside of the text.

STEP 4

Create a new Layer under the text layer.

STEP 5

Fill the selection on the new layer with the foreground color. (ALT-Backspace)

STEP 6 (optional)

Select > Modify > Contract… the selection about 1/2 of what you expanded it, and delete that part of the layer. (DEL) Check on ‘Preserve Transparency’ on the layers window, and give it a nice gradient.

How to embed Shockwave into your websites

admin — Thu, 10 Jan 2008 12:40:08 +0000

How to embed Shockwave into your websites properly for IE 6 and 7

Loading shockwaves in IE

Argh what a horrible morning, fighting with the virus. It all had to do with this shockwave, it would not load properly in IE, not even version 7.

A quick search reveals that there is something called SWFObject that will overcome this problem. So I check the deconcept homepage and use one of the examples there but still nooo, it just won’t work. However YouTube seems to always get their shockwaves to load properly, how?

So a view source on the YouTube homepage reveals that they are using the SWFObject too, great! Their code is a little bit different though, they have an embed tag already inside the target div. Don’t ask me why. Anyway I put an embed tag inside my own div just like they do and voila! It worked in both IE6 and 7.