Chris Goodwin :: Speak on it! the Blog » Tutorials

iPhone ‘Add to Home Screen’ Custom Icon

That Guy — Thu, 11 Mar 2010 23:33:27 +0000

When you bookmark your website on an iPhone or iTouch by default it takes a screen shot of the current page. If you want to add a custom icon follow these simple steps!

1) Create an image 129x129px 72dpi. This is the correct size! Other website debate the actual size, but for top quality and crispness use 129px by 129px. Make sure to save it as a PNG. (in photoshop go to ‘Save For Web & Devices’)

2A) In the head “” of your website add this code:

2B) You can also just drop an image named “apple-touch-icon.png” in your root directory and it will work the same.

That’s it. Now on your iDevice add your site to the home page and boom!

iPhone Apps Wont Open – Fix

That Guy — Thu, 18 Feb 2010 18:43:50 +0000

If you are having a problem where you iPhone apps open for a second then close on you, read on for the solution! The reason the apps keep opening for a second then closing is because you iPhone doesn’t think they have been ‘Authorized’. All you have to do is tell the iPhone “Hey foo these are Authorized Apps!” and to do this simply:

Hook up your iPhone to your computer
In iTunes (in the main menu on the top) go to Store > Authorize Computer
Enter your user info and authorize the computer
Sync your iPhone after you have authorized your computer – That’s it!

As soon as the Sync is done your phone should now understand that your apps are authorized and the problem should be fixed. If not please add a comment below so we can explore further.

The Remote Party Has Ended the Connection :: AT&T Blackjack

That Guy — Fri, 22 May 2009 00:39:03 +0000

If you keep getting the annoying error “The Remote Party Has Ended the Connection” while browsing on your mobile phone then keep reading on for a quick fix to stop getting this error.

On the main screen go to:
Start > Settings > Connections > GPRS > AT&T IMS (WM5 will be cingular IMS)

Make sure the AT&T IMS settings are as follows

Connects to: The Internet
Access point: wap.cingular
User name: should be blank
Password: should be blank
Authentication Type: CHAP
Primary DNS: 0.0.0.0
Secondary DNS: 0.0.0.0
IP address: should be blank

After the settings match the above, click Done (the left soft key) and you are good to go! No more annoying error message.

Hope this helps!

Make your videos look professional!

That Guy — Tue, 27 Jan 2009 23:13:56 +0000

With a few simple steps using Adobe Premiere Pro and Adobe Photoshop you can get your films looking like Hollywood blockbusters. Checkout what we’ll be creating: CLICK HERE TO VIEW THE BEFORE AND AFTER VIDEO!

Here are the things added to make it all happen:

Changed the color and contrast to give it a warm, epic feel.
Added grain for a film like look.
Added the hard breathing and footsteps SFX before you actually see the feet running.
Added epic music with the help of VideoCoPilot.net
Create the castles in photoshop then imported them into Premiere Pro with transparent backgrounds.
On the castle scene I added digital motion (scaling, position) to give it less of a static feel, because these scenes were filmed on a tripod.

Comment below if you would like a more in depth tutorial on any aspect of this video!

Quick Real Estate Photography Enhancement with Photoshop!

That Guy — Wed, 21 Jan 2009 01:04:21 +0000

We will learn how to take the dark gloomy non attractive interior photo and turn it into a light and bright inviting home with a few simple steps in photoshop. Below is the before (left) and after (right).

Open up your image in photoshop and Let’s get learning!

1. Let’s make the dark areas lighter and the super bright areas a little darker.

Goto Image > Adjustments > Shadow/Highlight…

-Shadows: Takes all of the dark areas and makes them lighter.
-Highlights: Takes all the light (blown out) areas and makes them darker.

Play with the sliders until your photo is looking like you would like it (Don’t over do it). Generally Shadows +30ish and Highlights +5-10. Then click OK.

2. Let photoshop do some work with auto adjustments:

Goto Image > Adjustments > Auto Levels
Goto Image > Adjustments > Auto Contrast
Goto Image > Adjustments > Auto Color

3. Let’s brighten up the picture.

Goto Image > Adjustments > Brightness/Contrast…

Generally raise the brightness +30 and to give the image some dynamics slightly up the contrast +10. Again play with these numbers to best fit your photo. Press OK.

4. Let’s make the colors really POP!

Goto Image > Adjusments > Hue/Saturation…

The only slider you need to worry about is the saturation (middle) one. Raise the levels to best fit your photo, generally +20-30. Click OK.

5. Let’s sharpen this puppy up!

Goto Filter > Sharpen > Sharpen Edges

This will make the image a little more crisp without overdoing it!

Vuala, now you have a more inviting light and bright photograph!

Simple CSS Rollover with A Single Image [Tutorial]

That Guy — Sat, 17 Jan 2009 02:22:48 +0000

This will be our final result using only one image. (you can download exercise files at bottom)

“Rollover me!” -says Mr.Elephant
(you can use any image you would like, not just a super cool elephant and zebra…)

How to do this? LET’S GO!

In simple terms: We are displaying only the left side of the image hiding the right half, then on rollover we are moving the image half way over to display the right side.

1. Create an image twice as wide as the size you’ll need. The left side of the image will be the non rolled over image and the right half will be the rollover part of the image.

Below is the original image.
(260width x 108height)

2. Below is the HTML code used, make sure it has a class so our CSS code knows where to look. This will act as our CSS placeholder for the rollover image.

3. Now for the CSS that will do the magic. Let’s get the image to look like we want when nothing is rolled over:

a.imageRollover {
background: url(“rollover_image.jpg”) no-repeat; (This is the image to be used 260×108)
display: block; (this will display the entire image)
width: 130px; (display 130px wide, half the size of our image)
height: 108px; (display 108px high)
text-decoration: none; (This takes off the default styles used on links)
}

That will display the left half of our image. Now, we want to move our image 130px (half our image width) to the left to reveal the right side when rolled over.

a:hover.imageRollover {
background-position: -130px 0;
}

This moves our image 130 pixel to the left on :hover (note: background-position: Xposition Yposition)

That’s all there is to a single image rollover in CSS. ENJOY!

>>DOWNLOAD THE EXERCISE FILES HERE