Tutorials

Adobe Photoshop - Creating a Website Part 2

2010-09-04T15:20:00.000-07:00

For Part 1 of Creating a Website Part 1 Click Here.

Part 2 explains how to create the HTML and CSS for the website that we created in part 1.

Step 1: Slicing the Image

For the first step just select the Slice Select Tool (C), with this tool we are going to slice our website up to create all the different images.

Step 2: Start Slicing
In this step just right click on your image and select Divide Slice... and a dialogue box will appear, put in the settings as shown here. This is the start of slicing your site.

Step 3: More Slicing

After you have pressed ok your image should look like this.

Now drag the lines so they start to fit your site, like I did here.

Step 4: More Slicing

Now keep dividing up your site by Right Clicking and selecting Divide Slice...

Make sure that everything that will be clicked is in its separate slice so that it can be made into a link.

Step 5: Saving the Image

Now to save the site (w/ CSS and HTML) go to File>Save for Web & Devices... That should bring up the Dialogue like this. Put the Format as HTML and Images.

Then put the Settings as Other, which will bring up this dialogue.


Now enter these settings and click Ok.

Now when you are done Click save and you will have a folder with all the images and HTML and CSS ready to be uploaded to the internet.

Adobe Photoshop - Creating Realistic Skin

2010-09-01T09:44:00.000-07:00

(Click for larger image)

This tutorial was created by Acidlullaby on DeviantArt.com.
To view this tutorial click on the image on the left.

Lifehacks - 35 Life Hacks

2010-09-01T09:35:00.000-07:00

(Click for
Larger Version)

Click on the image to have the larger version.

All Copyright goes to it's respective owners. I am not the creator of this image, just the re-distributor.

Adobe Photoshop - Creating Website Navigation Buttons

2010-09-01T04:02:00.000-07:00

Creating buttons for your website can sometimes be hard, but this tutorial will show you step by step an easy way to make buttons in Adobe Photoshop that can be put together to create a navigation bar for your website, and when done should look a little some thing like:

Step 1: Create a New Image

Create a new image (Ctrl + N) with the dimension 500 x 500, like in the image here.

Step 2: The Background

Now you are going to want to fill the background with the colour #575757.

.

Step 3: Add Noise to the Background

Now with the Background layer selected go to
Filter > Noise and put the settings as Amount 0.8%
Distribution: Gaussian, and Monochromatic Ticked, like in the image here.

Step 4: Create the Button Shape

Now select the Rounded Rectangle Tool and with a Radius of 4px, stroke off and fill with black, create a box of any size for the moment.

Step 5: Re-size the Box

You will need to press Ctrl + T now, to get the free transform tool up, and at the top re-size the box to Width: 100px and Height: 32px make sure you add px to the end or it will not re-size it properly.

Step 6: Duplicate the Layer

Now that you have your button your are going to want to duplicate it so you have three of the same layers, to do this press Ctrl + J or drag the layer on to the new layer button.

Step 7: Re-size the Duplicated Layers
You are going to want to re-size the bottom layer to
Width: 102px and Height: 34px, also make sure you add px again, and change the colour, I changed it to an orange.

I also did the same for the top layer with the Width: 98px and Height: 30px, and changed the colour to a light blue.

Step 8: Adding a Layer Style

Now hide the top and bottom layer, so you only have the middle layer showing and add the Layer Style Gradient Overlay.

Another Layer Style I added was Stroke, I did a 1px stroke, on the inside. I put the Fill Type to Gradient and at an Angle of 45º.

So far your button should look like:

.

Step 9: Convert to Smart Object

Now un-hide the top layer and right click on it and select Convert to Smart Object. It should now look like in the image.

Step 10: Contract Selection

After you converted the layer to a Smart Object control and click on the layer to select the area, then go to Select > Modify > Contract ...

Now only Contract it by 1pixel and press OK.

Now go to Layer > Layer Mask > Hide Selection ... this will make you image have a small inner border.

Step 11: Adding a Gradient Overlay
Now on the the same layer as before (the Blue one) go to layer styles and add a Gradient Overlay With these settings.

Once that is done, it should look like this.

Step 12: Adding Text

Now for the text, Select the Text Tool, I used the font Garamond Premier Pro Italic 18pt, With the colour #8e8e8e I typed my link on top of the button.

Now, to make the text look like it is embedded into the actual button, I duplicated the layer (Ctrl + J) and put it below the first one, I then changed the colour
to #333333 and moved it 1px up.

That's how I made the button, to create more than one, put all the layers into a group (Except the background) and duplicate the group move it down a bit and edit the text.

Adobe Photoshop - Creating a Website Part 1

2010-08-31T12:51:00.000-07:00

Creating Websites in Adobe Photoshop can be easy if you know how to do it, in this tutorial I will show you have to design a website and the HTML and CSS (HTML and CSS covered in part 2) for it aswell.

For Part 2 Click Here


The finished one

Step 1: Create a new image

What the image should look like so far

Create a new image with the dimensions 900 width and 800 height. Choose the Rectangle Tool (U) and create a box at the top like in the picture, make sure you have fill on so it fills in the box.

Step 2: Background


In this step, just make another box (Behind the first one) and fill it with a light colour.

Step 3: A line

A line lighter than both colours
is used as a separator

I used the line tool(U) with a light colour to separate both the boxes.

Step 4: Stylizing

Website with the effect added

Use the Brush Tool (B), size 700+, hardness 0, and with a layer between the top box and the bottom box just press once and lower the opacity of the layer to create the effect shown in the picture.

Step 5: Stylize part 2

Now do the same again but on the top box.

Step 6: Site Content Boxes

What it should look like

Now use the Rounded Rectangle Tool (U) with the radius of 5px, use a slight darker colour than the one you used for the bottom box and create a box like the biggest one here. Next choose an even darker colour and do another box on the right, to make the bottom box choose a colour with a shade that is in between the other two boxes. I also started sorting the layers into groups.

Step 7:Navigation Links

What the navigation should look like

Here I created links for the navigation bar using a very light grey. For the arrow next to "Navigation" I used an arrow from the Custom Shape Tool(U).

Step 8: Search Function

The search Function

To make the search bar I used the Rounded Rectangle Tool (U) again with a light gray and then
copy the layer (Ctrl + J) and put it behind the first one and make it a darker colour and move it up 1px and left 1px. To make to "GO" Button first make a square box with the Rounded Rectangle Tool (U) and add a gradient overlay, I did mine at a 45º angle and used the colours #a90d0e (Top left) and #d71315 (Bottom right) Then I added the "GO" Text and put it all in it's own group.

Step 9: Logo

For the logo I made a new layer and simply typed my logo in pure white and added a Custom Shape, which is the butterfly.

Step 10: Text

When the text is added

For the main content on the site (The main Text) I created another lighter box and added white text to it, in the dark box I added the date of which the text was added and the text also has a header.

Step 11: Finishing Touches

Here I did a few finishing touches like adding a page navigating (Highlighted in red) and added some external link. You can also see that all the layers are all sorted in groups within groups.

This is part 1 on Creating a website with Adobe Photoshop, part 2 will show you how to slice the image and generate the HTML and CSS for the website.

For Part 2 Click Here

Adobe Dreamweaver CS5 Student & Teacher Edition

Python - Simple Math in Python

2010-08-31T08:10:00.000-07:00

In python you can do simple math tasks, like 1+1 or 10/2, to test these out open up the IDLE and type:

>>>2+1
3

This looks very simple (and is), but we can do more complicated things like:

>>>(55**4-6) / 3
3050206

To give you an idea of what math you can do here is a table:

Table 1 - Python Math operators

command	name	example	output
+	Addition	4+5	9
-	Subtraction	8-5	3
*	Multiplication	4*5	20
/	Division	19/3	6
%	Remainder	19%3	5
**	Exponent	2**4	16

Python - Installing Python

2010-08-31T07:46:00.000-07:00

"Python is a programming language that lets you work more quickly and integrate your systems more effectively. You can learn to use Python and see almost immediate gains in productivity and lower maintenance costs." - http://www.python.org/

Downloading and installing Python is extremely easy simple go to the Download page and (if on Windows) download the 2.7 windows installer. Python is also available for Mac OS X, Linux and Unix OS's.

Download Python 2.7 for Windows

Installing Python is extremely easy and if you follow the steps in the installer, a folder should appear, and the Python IDE(GUI) should appear in a shortcut in your Programs list.

Python installed

After you have installed Python open the IDLE

Where all the code goes

Here is where the programming is going to be done, to test it type:

print "Hello World"

You will see the output as:

Hello World

It's as easy as that.

Adobe Photoshop - Stock Photos

2010-08-31T05:30:00.000-07:00

Finding images can be a difficult task, especially if you are getting the from Google Images because they may have a copyright on them and when you have finished with them and want to post them back on the internet you could be breaking the copyright.
So where can people find places to get images without breaking copyright of the authors?

Flickr

www.flickr.com

But a lot of flickr's image have "All Rights Reserved" meaning we can't use them but, if you go in "Advanced Search" and search for images with "Creative Commons" then you can use the images for free.

Click "Advanced Search" then select "Creative Commons"

Adobe Photoshop - Fixing underexposed images

2010-08-31T05:08:00.000-07:00

Sometime images can appear under exposed or dark like this one:

An underexposed image

This can be fixed very easily and fast.

Step 1: Open the image

First open the image

Step 2: Duplicate the layer


Drag the first layer onto "New Layer", or Ctrl + J

Step 3: Edit the layer filter

Next to the "Layer Opacity" will be a drop down menu, choose "Screen".

Final image:

The image should now look like this.

And that is how it is done, very easy, and very fast.

Adobe Photoshop - Cropping Images

2010-08-31T04:15:00.000-07:00

Cropping images can be useful be you only want part of the image, or the image is to big.
I will be using Adobe Photoshop CS5, but any version will be similar.

Step 1: Open the image

Here is the image we are going to be cropping.

Step 2: Select the crop tool

This is the tool we will be using.

Step 3: Select the area to be cropped


Just drag to select the part to be cropped.

Step 4: Double click the area


Just double click the area for it to be cropped.

Final Image:

This is what the image will look like when you are done.

Tutorials

2010-08-31T03:39:00.000-07:00

This blog will have categories like Adobe Photoshop, and HTML, new tutorials will be added everyday, and links to other good tutorial sites will be added.