Tutorials

7Shadows - Facebook Pic / Shadowness-Style
Click here to view the Video Tutorial

Dimension of the Facebook profile picture is 200x300. Add cool effects to your photos!!

Didn't have the chance to show the very end result, but here it is:


All the stocks are on my profile. Download here

7Shadows - S7 Widget Tutorial
Click here to view the Video Tutorial

My first video tutorial. Using this new software called Jing. http://www.jingproject.com/

7Shadows - EXIF Image Info
I was asked how I got the EXIF information from photos and images. Here's how:


# Do a print_r of EXIF on a given image
$exif = exif_read_data($_PATH_TO_YOUR_IMAGE);
print_r($exif);


Once you exif_read_data, it gives you an array of all the image information. Then, you'll just echo selected information one by one. (IE: $exif['Width'])

Voila!

7Shadows - Mod-Rewrite URLs
Rewriting your URLs to /thissexyurl instead of index.php?url=thissexyurl is quite simple:

1) At the root of every server, you will find or you will have to create a .htaccess

2) In that file, put this code of mine:

ReWriteEngine On
#-------------------------------------------------------------------
# page/id/id2 instead of page.php?id=id&id2=id2
#-------------------------------------------------------------------

RewriteRule ^([a-zA-Z0-9_-]+)[/]?([a-zA-Z0-9_-]*)[/]?([a-zA-Z0-9_-]*)[/]?$ /index.php?page=$1&id=$2&id2=$3


3) What the codes mean is that every link separated by "/" will go to index.php
( Example: /page/id/id2 will go to index.php?page=page&id1=id1&id2=id2 )

Voila!

7Shadows - S7 Header
Download: http://www.shadowness.com/css/black/s7_header.psd

1) Open with Photoshop
2) Drag and drop a picture of yours on top of "your picture" layer.
3) Hide "your preview page"
4) Go to File/Save for Web and Devices -- CTRL+SHIFT+ALT + S
5) Select s7_header slice and click Save
6) In Slices click Selected Slices
7) Save on Desktop. Once saved, go to Desktop/images/s7_header.png

Voila! Upload and have fun!

PS. If you wanna hide the black thing that appears by default on top of headers -- just click on Know your stylesheets? and then, type "hide" in it and Update.

7Shadows - Shadowness Blur in Motion
This tutorial will teach you to bring a plain cut artwork and paste a blur effect that not only brings motion but emotions.

Zoom to view Original size.

7Shadows - Design your iPhone Widgets
If you notice, the iPhone "home" UI design is very similar to, if not the same as, the OS X Dashboard design. This tutorial will teach you how to create your own widgets, and you'll be able to use those icons for your Websites or Avatars.


Let's start by creating the background interface where the Widgets appear. (Colours are optional, you can leave it white). Since shortcut keys are different on Mac and PC, I won't be making references to them. Instead I will be referring to Photoshop's top menu and submenus, but I do highly recommend learning the keys once you become comfortable.

Start a new document (File/New) of 500x120 pixels.
Create a new layer (Layer/New/Layer), call it "Interface".
In your Layers window, select it and do a Fill (Edit/Fill) -- Use: color: #a3acb7.
Double click on your "Interface" layer, you will get to the "Layer Style".
Check "Inner Shadow", set Opacity: 50%, Angle: 90, Size: 7.
Create a new layer, call it "Tile".
Select "Elliptical Marquee", hold Shift, create a 3x3 pixels circle, and do a Fill -- User color: #000000.
Go to the "Layer Style" of "Tile", check "Drop Shadow":

Now, select that circle you just've drawn, do a duplicate and move it 5 pixels to the right, and 5 pixels to the bottom. (Hold Alt + Ctrl and use your arrows)
Select an area of 10x10 pixels from where it starts and Define Pattern (Edit/Define Pattern). Name it "Tile".

Now that you got your pattern, delete the "Tile" layer and select the "Interface" layer. We'll try to apply that pattern all over the background space.
Do a Select/All, move down 10 pixels, then Edit/Fill -- Use: Pattern, Custom Pattern: "Tile".

Voila, your background is done!

Here's a preview of what you should have by now:


Here's what you should have in your Layers window:

Now, the Widget part.

Create a new layer: "Widget BG".
Do "Rounded Rectangular Tool" (U), create a 70x70 pixel selection and right-click/Fill Path -- Use color: #BF0000.
Do Layer style on "Widget BG":

Here's the where the fun begins. You can drag in your own logo and/or add text. For now, we'll create a Tutorials 2.0 widget.
Select "Horizontal Type Tool", type in "Tutorials" and use these settings:

Again, Select "Horizontal Type Tool", type in "2.0" and use these settings:

Place the fonts well so it should look like this:

Ok, we'll work on getting that glossy Apple-like look.
Select your "Widget BG" layer and do Select/Load Select, press OK.
Once you got the selection, do Select/Modify/Contract -- By 3px.
Create a new layer called "Glossy".
Now, go to "Gradient Tool" (G), customize your gradient by clicking on the gradient bar on the top left.

On your gradient, you will find 4 settings, set Top left: 50% opacity, Top right: 0% opacity, Bottom left: #FFFFFF, Bottom right: #FFFFFF.

With your gradient tool, click and hold from the top of the selection to the bottom and release.

Deselect, use Elliptical Marquee and do a circle so it looks like this:

Right-click/Select Inverse and hit your keyboard button "Delete". Your Widget should finally look like this:

And your layers should look like this:

Instead of having flat colour on the text, as an extra step let's add shadows the "2.0" text and make the "Widget BG" as a gradient from #BF0000 to #FF0000:



You're done! You can repeat Step 2 with different colors and with your own widget designs. Should Apple ask you to create your own iPhone widgets 6 months from now, you'll be ready for it.