Teaches you how to use Photoshop cs5 or CS6 for iPad. You can change the background at will, create GIF files, provide HD tutorials, and create original images.

From scratch to the original iPad, this work also referred to some online tutorials

The images required in this tutorial are provided in a package and uploaded to csdn.

: Http://download.csdn.net/download/yangyanghaoran/4344726

What will happen after this tutorial is completed?

By the way, you can use Photoshop to create GIF images and teach you shortcut keys and skills.

 

PS after completion (this is not for the time being, because it is too simple)

Original

After PS

Original

 

After PS

Original

After PS

 

 

This tutorial is purely entertaining. If you are interested, you can check it out, but I hope you can evaluate it.

Step 1: Create a canvas

Click OK

Fill the background with #383838 (set the foreground color to #383838, and press Alt + Delete to quickly fill the background. If you set the background color to this color, press Ctrl + Delete to fill the background quickly)

After filling, "filter-colors-add colors"

Open Display, set as follows, click OK, double-click the background layer, and modify the layer name as background

The first step is as follows (I use Photoshop CS6)

 

Step 2 border, screen, etc.

① Create a layer,Select "corner rectangle tool", set the Corner radius to 22px, fill color #444243, draw the shape shown in, and rename the layer to "border ". The size is incorrect. Press Ctrl + T and continue to adjust the size.

 

②Place a border on the border layer. Press ctrl and click the thumbnail of the border layer to obtain the selection area. Execute "select-Modify-reduce", scale down 6 PX, and press delete to delete (if the border layer is raster ), do not press Ctrl + D to cancel the selection.

③ Create a layer shell and select, set foreground color #000000, and press Alt + Delete to fill

④ Create a layer screen and fill it with # ffffff

 

 

Step 3: Process optimized borders and so on

① Select the border layer and double-click it to modify the layer style.

Settings

 

Actually, you can adjust the border according to your personal feelings.

Click screen, double-click, set as follows, gradientSet the color to # 5b560-# 000000 gradient.

After confirming, place an image as the desktop wallpaper.

① File -- place --- after adjustment, click OK (Press ENTER)

② Adjust the position of the layer,Place it above the screen layer, and press Alt + Ctrl + G to create a clipping mask.

Group the layers and adjust the layers later.

After that, my display results are as follows:

 

Step 4: write content to the screen

4.1 shortcut menu at the bottom

① ChangeSet the foreground color to white, create a new layer, rename it to "table", and draw a rectangle.

② Execute "edit-change path-Twist" and drag the two vertices above to move to the center, as shown in.

Select the "table" layer, add the layer style "gradient superposition", and set the color to #454637 to # fafbfc gradient.

Set the transparency of the table layer to 58%, and create a new "Screen Content" group.

The effect is as follows:

Create the following structure for the group, place an image, and adjust the size (if you are not satisfied, press Ctrl + T to continue the adjustment). The width and height of my image are 22.66%, (In this font, they are all ),

 

③ Reflection button Creation

Take safari as an example and select the safari Layer

Copy a safari image or press Ctrl + J to copy it.

Select the copied layer, "edit -- transform -- vertical flip", adjust the position, and move it to the bottom of safari, just like the reflection.

Select the reflection, set the opacity to 39%, and add the gradient superposition (from black to white)

At this time, the reflection is a bit like it, But it overflows. Use the "rectangular box selection tool ",

 

 

Press the delete key. If the deletion fails, raster the safari reflection layer, press the delete key to delete it, and press Ctrl + D to cancel the selection.

Add text, white,, font size 14

Similarly, complete mail, message, and iPad

After completion

 

In addition to convenient management, you can also adjust the position as a whole, especially when used together with this toolbar.

You can also use Ctrl +; or Ctrl + R or Ctrl + 'to align with the icon

For more information, see

Similarly, we should be able to complete the intermediate content group, but we should first complete the title content. I did not find the battery icon because I found a black battery icon.

And a Wi-Fi icon

The title content is very easy to complete. It has a rectangle with an opacity of 83% and black as the background. Next, let's talk about how to convert the battery to white.

After placing the image, select the layer and double-click

Similarly, change the gray icon of wifi to white. Press and hold the Alt key and drag the FX function icon. You can drag it down to copy the style and drag it to the desired layer, which layer has the style. Similarly, you can refer to templates and so on.

After completion:

As follows:

Similarly, when adding intermediate content, my group is in this situation. Group 1, group 2, and group 3 mainly represent the first, second, and third rows...

The intermediate content is as follows:

Ah... it took me 30 minutes in the middle!

 

Step 5: write content to the shell

① Camera (I provide a style, just click it, and the camera is done in seconds)

This style is provided by me. It is included in the material package provided by me. It is called glass. ASL. Double-click it to use this style. In the style section

In this way, the camera is ready.

 

② Create a button on the side, create a layer, and draw a rounded rectangle.

The layer style settings of Button B on the right are as follows:

Similarly, the upper-side button a and the right-side button a are also done, and the effect is as follows:

③ Next we will make the highlight effect. Press ctrl to select the thumbnail of the shell layer and subtract the thumbnail. What do you think?

 

The selection is complete, white and Opacity is filled, and I have adjusted it to 3%. You can try it yourself.

Effect after completion

Overall:

 

Step 6: change the wallpaper for the screen (optional)

Hide the old wallpaper and make the new wallpaper visible.

 

 

 

Step 8: animation production and GIF images

① Open the timeline first

②

③

Shouldn't that happen? Writing it here is coming to an end. Well, it has been six hours since I started from the ground up, wrote tutorials, and searched for materials ~

 

 

Last step: to move GIF files, you must store them in Web format.

Point storage, just click Next. What error warnings do not matter

Wow! You don't have to worry about making a big GF image in the future.

 

 

After modification, the final version will be released after a slight change:

Ah ~ I finally finished writing...

PS project structure

 

 

Humble works PSD: http://download.csdn.net/detail/yangyanghaoran/4344737