Создание фотореалистичного iPhone 4 в Photoshop CS5

Шаг 1

Для начала создайте новый документ подходящего размера (я использовал фотографию размером 10 х 8 дюймов с разрешением 300 точек на дюйм, потому что она хорошо подходит в качестве высококачественных обоев).

Чтобы создать фон, установите цвет переднего плана на #505050, затем используйте инструмент градиента и выберите радиальную настройку. Протяните от центра наружу, чтобы получить мягкое свечение в центре изображения.

Шаг 2

Нажмите (Cmd/Ctrl + R), чтобы поднять линейки, перетащите несколько направляющих из линеек к центру того места, где должен находиться iPhone.

Шаг 4

Создайте новый слой и назовите его «main body». Нажмите Cmd/Ctrl — Click на слое «silver side» и выберите «Select > Modify > Contract > 10 pixels».

Установите цвет фона #0A0A0A, затем для заливки выделения нажмите ‘Cmd/Ctrl + Backspace’. (Это автоматически заполнит выделение цветом фона).

Шаг 5

Создайте новый слой и назовите его «глубина»: это просто линия вокруг внутренней части тела, где iPhone изгибается и преломляет свет от камеры. Для создания линии «Cmd/Ctrl — Click» на слое «main body», затем перейдите в «Edit > Stroke» WIDTH — 10 pixels, COLOR — #000000, LOCATION — Inside.

Затем перейдите в «Фильтры > Размытие > Размытие объектива» и примените указанные ниже настройки. Убедитесь, что этот слой всегда находится поверх всех остальных слоев.

Шаг 6

Создайте новый слой под ним под названием «Экран». Выберите инструмент «Прямоугольная область» (M) и нарисуйте прямоугольник от центра ориентиров, удерживая клавишу «Alt» после начала перетаскивания, чтобы прямоугольник расширялся от центра. Сделайте прямоугольник красивой формы для экрана, оставив место для кнопки меню, динамика и камеры. Когда вы будете удовлетворены формой экрана, залейте его любым цветом, а затем создайте новый слой над слоем «Экран»; пока не беспокойтесь о его названии.

Шаг 7

Когда вы будете удовлетворены формой экрана, в новом слое выберите «Файл > Поместить» и выберите изображение по вашему выбору (я выбрал свою собаку — разве она не милая!) Затем измените размер, переместите или поверните изображение, или сделайте все, что угодно, чтобы оно выглядело хорошо. Убедитесь, что изображение находится над экраном, когда вы закончите, вы можете переименовать слой в «Screen Pic». Теперь нажмите «Alt — Click» между слоями «Screen» и «Screen Pic», чтобы сделать его обтравочным слоем. Это означает, что он обрезает слой под ним и позволяет легко редактировать или изменять изображение под ним.

Шаг 8

Теперь мы начнем работу над кнопкой меню. Создайте новый слой и назовите его «Menu Button», непрозрачность сделайте 60%. Проведите еще одну направляющую вниз к тому месту, где будет находиться кнопка, а затем используйте инструмент «Эллипс» от центра направляющих, удерживая «Alt». Когда вы получите нужный размер, залейте его белым цветом, затем откройте меню эффектов слоя, дважды щелкнув рядом со слоем, затем используйте опцию наложения градиента с #AEAEAE на #000000, как показано ниже. Удалите контур.

Шаг 9

Создайте новый слой и назовите его «Menu Icon», используйте инструмент «Скругленный прямоугольник» (U) с радиусом 10 пикселей и вытяните квадрат из центра, прежде чем мы добавим к нему обводку, сделайте цвет переднего плана #979797, затем выберите инструмент «Кисть» (B) и сделайте кисть шириной 3 пикселя и жесткостью 90%. Затем вернитесь к инструменту «Скругленный прямоугольник» и щелкните правой кнопкой мыши > Stroke path > Brush > OK.

Шаг 10

Теперь для создания динамика переместите горизонтальную направляющую выше экрана, и динамик и камера будут центрированы по этой линии. Создайте новый слой под названием «Динамик», затем с помощью инструмента «Скругленный прямоугольник» (U) создайте решетку динамика. Установите радиус 1 см, чтобы сделать закругленный край, а затем вытяните форму до размера, показанного на рисунках ниже. Тем же инструментом щелкните правой кнопкой мыши, выберите «Заливка контура» и залейте его черным цветом. Затем просмотрите эффекты слоя и выберите «Наложение узора» и «Внешнее свечение» и используйте указанные настройки.

Шаг 11

Теперь мы сделаем отражение, о котором я говорил ранее. Создайте новый слой под названием «Reflection» под слоем «Speaker». Нажмите Cmd/Ctrl — Click на слое «Main Body» и выберите инструмент Polygonal Lasso (L), выберите режим пересечения и сделайте треугольник через правую сторону iPhone, как показано на рисунке. Залейте его белым цветом. Затем доведите непрозрачность слоя до 55%.

Шаг 12

Выберите инструмент «Прямоугольная область» (M) и установите перо на 150 пикселей. Выберите нижнюю треть отражения и нажмите клавишу Delete несколько раз, пока не перестанет быть видно кончик отражения.

Шаг 13

Теперь мы можем приступить к камере, протяните направляющие туда, где должен быть центр камеры, создайте новый слой под названием «Камера». Выберите инструмент «Эллипс» (U) и сделайте три маленьких круга внутри друг друга от центра направляющих. Залейте внешнее кольцо цветом #424242, среднее #080809 и центральное #080F2B.

Шаг 15

Теперь, когда мы завершили работу над камерой, мы можем перейти к завершающим штрихам для переднего вида iPhone; сначала мы сделаем боковые кнопки. Создайте три новых слоя под слоем «Silver side» (назовите их Button 1, 2 и 3.) Нарисуйте три контура инструментом Rounded rectangle Tool (U) с радиусом 1 пиксель вдоль левой стороны iPhone. Мы рисуем две кнопки громкости и ползунок выключения звука, и вы можете видеть, где они находятся, на изображении внизу. После того, как вы их нарисовали, залейте контуры белым цветом, по одному на каждом слое. Затем примените указанные ниже настройки в меню эффектов слоя. После применения этих настроек к каждому слою перейдите в меню Фильтр > Размытие > Размытие по Гауссу > 1.

Шаг 16

Создайте еще один новый слой и назовите его «Верхняя кнопка». Инструментом «Скругленный прямоугольник» (U) создайте еще один контур в правом верхнем углу iPhone. Залейте его белым цветом и добавьте настройки, указанные ниже.

Возможно, вам придется переместить градиент в нужное место с помощью инструмента перемещения (V) и перетащить его по экрану. Нажмите Cmd/Ctrl + F, чтобы повторить последний эффект фильтра (в данном случае размытие по Гауссу).

Шаг 18

Перетащите две направляющие в центр рамки, а затем создайте новый слой под названием «Кнопка камеры». Используйте инструмент «Скругленный прямоугольник» (U) с радиусом 1 см, чтобы создать кнопку. Нажмите Cmd/Ctrl + Enter, чтобы превратить контур в выделение, а затем залейте выделение. Перейдите в меню Слой > Стиль слоя > Вставить стиль слоя. (Это позволит вставить те же настройки эффектов слоя из скопированного слоя в этот).

Добавьте настройки скоса и тиснения, как показано ниже.

Шаг 20

Теперь мы создадим значок камеры для кнопки, создайте новый слой и назовите его «Значок камеры». Инструментом «Скругленный прямоугольник» (U) с радиусом 20 пикселей нарисуйте крупномасштабную камеру и с помощью инструмента выбора прямого пути переместите верхние углы верхнего блока по направлению друг к другу. Нажмите Cmd/Ctrl + T, чтобы трансформировать значок; измените его размер, чтобы он поместился внутри кнопки камеры. Выберите инструмент «Скругленный прямоугольник» (U), щелкните правой кнопкой мыши контур, выберите «Залить контур» и залейте его цветом #424242.

Шаг 21

Создайте новый слой под названием «slider box» и с помощью инструмента «Скругленный прямоугольник» (U) нарисуйте коробку в правом нижнем углу экрана. Используя тот же радиус, нарисуйте коробку там, где верхняя часть касается направляющей, как показано ниже. Залейте его белым цветом, а затем примените эти эффекты слоя.

Шаг 22

Создайте новый слой под названием «Слайдер» и снова с помощью инструмента «Скругленный прямоугольник» (U) сделайте маленький слайдер внутри поля слайдера, расположите его с левой стороны. Нажмите Cmd/Ctrl + Enter, затем Cmd/Ctrl + Backspace, чтобы сделать его выделением, и залейте его цветом фона. Перейдите в меню Слой > Стиль слоя > Копировать стиль слоя.

Перейдите на слой «Значок фотоаппарата» и нажмите Cmd/Ctrl + J, чтобы продублировать слой со значком фотоаппарата, нажмите Cmd/Ctrl + T, чтобы трансформировать его, сделать меньше и переместить над ползунком. Затем нарисуйте значок кинокамеры с помощью инструмента «Скругленный прямоугольник» (U) и инструмента «Перо» (P), трансформируйте его и переместите над ползунком.

Step 23

Import a different image by going to File > Place and selecting your image. Press Cmd/Ctrl + T and reduce the size of the image so it can fit snuggly in the bottom left-hand corner.

Then use the rounded rectangle tool (U) with a 10-pixel radius to create a box over the picture. Press Cmd/Ctrl + Enter to create a selection, and then press the ’add layer mask’ icon in the layers bar. This will crop the image to the selection.

Step 24

Now we move onto the zoom bar! On a new layer called «Zoom bar», use the rounded rectangle tool (U) with a 30-pixel radius and draw a thin bar across the bottom of the screen. Then change the tool to subtract and draw another bar within the previous bar. Using the path selection tool (A), select and right-click the outer path, choose fill sub path, and then fill it with #EAEAEA.

Use the path selection tool (A) again and select the centre path. Change the settings from subtract to add and then fill the path with Black. Press 5 on your keyboard to reduce the opacity to 50%.

Make a new layer and draw a circular slider with the ellipse tool (U), fill it with white and then press 9 to reduce the opacity to 90%.

Step 25

Select the text tool (T) and put a Black + and — symbol on either side of the zoom bar, the font is Veranda and size 8 for the — sign and size 6 for the plus sign. Bring the opacity to 50%.

Step 26

Now we move onto the flash display. Use the rounded rectangle tool (U) at radius 1cm to draw rectangle in the top left-hand corner, fill it with white and bring the opacity to 50%. Use the Veranda font in black and size 12 to write the word ’Off’ and then bring the opacity to 50% again. Using the Pen tool (P) draw a lightning icon and fill it with #000000. Bring the opacity to 50%.

Step 27

Now we have completely finished with the main view of the iPhone (pat yourself on your back if you like) and if you want to go on further just keep on following the tutorial as we move onto the back of the iPhone and then the side. Before we start, just put the front iPhone into one big folder.

This step will be easier for those which have organised your layers into folders, I have put all my button layers and body layers into one folder which I can just copy and flip for the back of my iPhone. Otherwise, Cmd/Ctrl + Click the «Main body», «silver side», «mute slider», «Top button», «Reflection», «depth» and the volume button layers, Right-click and press duplicate layer, press OK and then put the layers into a new folder called «Back iPhone.

Select the «Back iPhone» folder, then use the move tool (V) to move the back iPhone next to the front iPhone. Open the folder and select every layer excluding the «reflection layer», Then Choose Edit > Transform > Flip Horizontal.

Step 28

Now we move onto the back camera. Create a «camera ring» layer, bring two guides to where you would like your camera to be, and then use the elliptical marquee tool (M), hold down Alt + Shift ONLY when you have started dragging from the centre of the guidelines. Then choose Edit > Stroke > 4 pixels > OK. Then apply the gradient settings below.

Step 29

Create a new layer called «greys» and create another circle using the elliptical marquee tool (M) inside the camera ring and fill it with #282828. Choose Filters > Noise > add noise and choose 16.57. Then choose Filters > Blur > Gaussian Blur > 2.2 pixels. Add these layer effects. Turn the layer opacity to 50%.

Step 30

Create another layer called «grey underlay» and underneath the «grey» layer use the elliptical marquee tool (M) and create another circle underneath, fill it and add the layer effects below.

Finally draw another circle for the lens and fill it with #013274 then apply these effects.

Step 31

Create a new layer underneath the «reflection copy» layer and call it «apple logo.» Get an image of the apple logo and trace it or just draw it from memory using the pen tool (P) fill it with #CECDCB.

Step 32

For the flash just use the elliptical marquee tool (M) and fill it with white on a new layer, use the guidelines to keep it in line with the camera. Then go to the layer effects and apply the pattern overlay below.

Step 33

Select the text tool (T) with the Tahoma font, size 14 and write iPhone towards the bottom. Then use the same font but at size 3.7 for the product code and information underneath the brand name. The colour is #545453.

Step 34

Start to draw the safety and quality symbols with the Pen tool (P), have some fun and make some of your own or just keep to the originals like I’ve done so below. Again keep the colour #545453.

Step 35

Now that the Back is finished then we can finally finish off with the side. Create a new layer group called «side iPhone» and in that group create a layer called «side blk.» I’ve dragged some guidelines to outline the basis of my side iPhone. Draw a box with the rounded rectangle tool (U) with a radius of 10 pixels. Fill it and then open the layer styles and apply these settings.

Step 36

Now with the same tool (U) on a new layer called «Silver» draw a thinner but longer box than the «Side Blk.» Its length should mean that it only just protrudes the edge of the other box. Then add the gradient underneath.

From left to right this gradient goes: #202020, #919191, #2E2E2E, #737373, #ADADAD, #BCBCBC, #616161, #EDEDED, #303030.

Step 37

Create a new layer called «Refraction» and then Cmd/Ctrl — Click the «Silver» layer and use the polygonal lasso tool (L) to select two areas on the sides of the iPhone as shown below. Fill it with white and then move the opacity to 40%.

Step 38

Create a new layer called «volume buttons» and use the elliptical path tool (P) to create two circles the size of the volume button, fill it and apply the settings below. I have used guidelines to make sure that they line up with my side iPhone view buttons.

Step 39

Use the text tool (T) and type a plus and a minus in the buttons, use the Tahoma font at size 14. Make the minus sign wider by increasing the width to 160%. Go to Layer > Rasterize > type (do this to both text layers). Then Cmd/Ctrl — Click the plus and minus layers then go on to the «volume buttons» layer and press delete.

Step 40

For our final step use the rounded rectangle tool (U) with a radius of 8 pixels and draw a rectangle on a new layer called «Slider Back.» Fill it with #b7b7b7 and add the inner shadow below.

Create a new layer called «slider» and draw another box with the rounded rectangle tool (U) inside the previous box, just this time with a 7-pixel radius. Then apply these settings to it.

Step 41

Just to finish off, select the brush tool (B) at size 13 and hardness 50% with the colour #1E1E1E, Cmd/Ctrl — Click the «silver» layer and then at the bottom draw a brush line by dragging and holding Shift. Make sure it’s in line with the other lines from the back and front view. (Use a guideline if you like.)

Final Image

You have now completed your iPhone 4. I really hope you enjoyed this tutorial and are satisfied with what you have ended up with. Hopefully you have learned something new and have had an enjoyable experience.