PDA

View Full Version : [iPhone] Wallpaper Overlay


Vizio
Nov 26, 2012, 04:28 PM
Can anybody do the Apple frost overlay.
Like so?
379842

If you can can you make me on out of this wallpaper?
379843

Thanks,
Not sure I'm in the right tread for this. If not please guide me to the right one.

rufinatti
Dec 13, 2012, 05:35 PM
http://i.imgur.com/UytZxl.jpg (http://imgur.com/UytZx)

Vizio
Dec 13, 2012, 09:01 PM
Image (http://imgur.com/UytZx)

Thanks, can you teach me how you did this?

satsuma
Dec 14, 2012, 02:05 AM
Could you post the frost overlay in png format so i can do my own please :)
Thanks in advance :apple:

rufinatti
Dec 14, 2012, 05:22 AM
Thanks, can you teach me how you did this?

Gather source images.

After opening the image you provided, I noted that it was a low resolution image (282x500); so I first used the reverse-image search feature from http://images.google.com to find a higher quality version of your image.

I was able to find a copy of the same background image which was already properly sized for the iPhone 5 (640x1136).

I also used Google Images to search for an Apple logo that I could use as a selection template.

Create the iPhone background.

Note: I am using Photoshop Elements but other graphics programs will involve similar steps.

Open the background image to be edited.

http://i.imgur.com/4I04Ll.png (http://imgur.com/4I04L)

Create a duplicate layer to be used as the "frosted glass".

http://i.imgur.com/TFZ8ul.png (http://imgur.com/TFZ8u)

You should now have two layers as shown below. Ensure that the "Background copy" layer is highlighted.

http://i.imgur.com/IC9OAl.png (http://imgur.com/IC9OA)

Apply a Gausian Blur to simulate the distortion caused by looking through the frosted glass.

http://i.imgur.com/NEnoul.png (http://imgur.com/NEnou)

Adjust the Gausian Blur Radius setting until you achieve the desired effect.

http://i.imgur.com/zzATRl.png (http://imgur.com/zzATR)

The "Background copy" image should now be appropriately fuzzy.

http://i.imgur.com/VrWOpl.png (http://imgur.com/VrWOp)

Create a new layer.

http://i.imgur.com/VcHgJl.png (http://imgur.com/VcHgJ)

Use the paint bucket tool to fill the new layer with white color.

http://i.imgur.com/Qt6g1l.png (http://imgur.com/Qt6g1)

just so...

http://i.imgur.com/9DoZDl.png (http://imgur.com/9DoZD)

Adjust the opacity of the white layer to around 30%. This will help simulate the hazy white color of the frosted glass.

http://i.imgur.com/3gORSl.png (http://imgur.com/3gORS)

Combine the white layer (Layer 1) with the blurry layer (Background copy) by choosing the "Merge Down" option under the Layer menu.

http://i.imgur.com/mVDC0l.png (http://imgur.com/mVDC0)

rufinatti
Dec 14, 2012, 05:43 AM
Open the Apple logo image which will be used as a template.

http://i.imgur.com/zHMZT.png (http://imgur.com/zHMZT)

Choose "Select All"

http://i.imgur.com/is6Erl.png (http://imgur.com/is6Er)

Copy the image

http://i.imgur.com/4b1kll.png (http://imgur.com/4b1kl)

Return to the original image being edited and paste the Apple logo into it.

http://i.imgur.com/K7LE9l.png (http://imgur.com/K7LE9)

The Apple logo should now be visible in a new layer (Layer 1).

http://i.imgur.com/GJelzl.png (http://imgur.com/GJelz)

Using the magic wand tool select the Apple logo by first clicking on the body of the apple, then while holding down the [shift] key, click on the leaf to add to the selection.

http://i.imgur.com/qh8Wql.png (http://imgur.com/qh8Wq)

http://i.imgur.com/GGaAsl.png (http://imgur.com/GGaAs)

Now, hide the Apple logo by unchecking the eye icon to the left of (Layer 1) then be sure to highlight the (Background copy) layer to activate it.

http://i.imgur.com/6f3bil.png (http://imgur.com/6f3bi)

You should be left with an outline selection of the Apple logo as seen below:

http://i.imgur.com/WRwxXl.png (http://imgur.com/WRwxX)

Cut out the shape of the Apple logo to reveal a portion of the original (Background) layer by choosing "Delete" from the Edit menu.

http://104.imagebam.com/download/7yC6I5GIqpSHYjHCeV3FwA/22582/225810639/21.png (http://www.imagebam.com/image/fa8b43225810639)
http://i.imgur.com/6XVlSl.png (http://imgur.com/6XVlS)

Disable the selection by choosing "Disable" under the Select menu.

http://i.imgur.com/SR1bcl.png (http://imgur.com/SR1bc)

Add a drop shadow and beveled edge with the Layer Styles menu.

http://i.imgur.com/qK42Zl.png (http://imgur.com/qK42Z)

Adjust the Shadow and Bevel settings similar to those shown below:

http://i.imgur.com/8ryQNl.png (http://imgur.com/8ryQN)

http://i.imgur.com/s8EI8l.png (http://imgur.com/s8EI8)

If you are happy with the results, "Flatten" the image then save it in the file format of your choice.

http://i.imgur.com/iSFkfl.png (http://imgur.com/iSFkf)

Have fun!

charlieegan3
Dec 14, 2012, 05:49 AM
...

Good effort! :)

Maybe they should have a tutorial's iPhone subforum.

Vizio
Dec 14, 2012, 07:36 AM
Gather source images.

After opening the image you provided, I noted that it was a low resolution image (282x500); so I first used the reverse-image search feature from http://images.google.com to find a higher quality version of your image.

I was able to find a copy of the same background image which was already properly sized for the iPhone 5 (640x1136).

I also used Google Images to search for an Apple logo that I could use as a selection template.

Create the iPhone background.

Note: I am using Photoshop Elements but other graphics programs will involve similar steps.

Open the background image to be edited.

Image (http://imgur.com/4I04L)

Create a duplicate layer to be used as the "frosted glass".

Image (http://imgur.com/TFZ8u)

You should now have two layers as shown below. Ensure that the "Background copy" layer is highlighted.

Image (http://imgur.com/IC9OA)

Apply a Gausian Blur to simulate the distortion caused by looking through the frosted glass.

Image (http://imgur.com/NEnou)

Adjust the Gausian Blur Radius setting until you achieve the desired effect.

Image (http://imgur.com/zzATR)

The "Background copy" image should now be appropriately fuzzy.

Image (http://imgur.com/VrWOp)

Create a new layer.

Image (http://imgur.com/VcHgJ)

Use the paint bucket tool to fill the new layer with white color.

Image (http://imgur.com/Qt6g1)

just so...

Image (http://imgur.com/9DoZD)

Adjust the opacity of the white layer to around 30%. This will help simulate the hazy white color of the frosted glass.

Image (http://imgur.com/3gORS)

Combine the white layer (Layer 1) with the blurry layer (Background copy) by choosing the "Merge Down" option under the Layer menu.

Image (http://imgur.com/mVDC0)

Thank you

Bishwasher
Feb 13, 2013, 02:15 AM
Wow Ruffinatti, you absolutely rock:):):):)




Sent from my iPhone 5 using Tapatalk 2

rufinatti
Feb 13, 2013, 07:38 AM
Wow Ruffinatti, you absolutely rock:):):):)




Sent from my iPhone 5 using Tapatalk 2

Thanks. If you run into difficulties while creating your own image, just ask for help.