{"id":11399,"date":"2012-03-16T21:01:44","date_gmt":"2012-03-16T13:01:44","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=11399"},"modified":"2022-05-19T22:06:48","modified_gmt":"2022-05-19T14:06:48","slug":"how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/","title":{"rendered":"How to Draw a Realistic Samsung Galaxy in Photoshop"},"content":{"rendered":"

In this tutorial, we are going to draw the famous Samsung Galaxy in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and then exporting it to Photoshop to add some sophisticated lighting and other effects.<\/p>\n

Step 1 \u2013 Preparing the Canvas in Illustrator<\/h3>\n

Open up your Adobe Illustrator. Make a new file in A4 size. Hit Ctrl<\/span> + R<\/span> to bring up the ruler. Make a new layer and name it guide<\/em>. We will use this to place all our guides. Draw from the ruler onto the canvas to create a new guide. These guides are needed to help us draw the phone wireframe precisely. See the picture below for reference.<\/p>\n

\"ps<\/figure>\n

Step 2 \u2013 Basic Phone Shape<\/h3>\n

Our first step is to draw a basic phone shape. Activate the Rounded Rectangle<\/strong> tool. Click once on the canvas to open the Rounded Rectangle<\/strong> option dialog box. Don\u2019t worry with the width and height settings. Make sure to enter 35 pt<\/strong> on Corner Radius<\/strong>. Click OK<\/strong>. You will have a new rounded rectangle shape.<\/p>\n

You can simply delete it right away because we don\u2019t need it, we just need to change the tool settings.<\/p>\n

\"ps<\/figure>\n

Step 3<\/h3>\n

Make sure to activate Smart Guides<\/strong> from the View<\/strong> menu. This feature helps us to snap objects easily onto guides.<\/p>\n

\"ps<\/figure>\n

Step 4<\/h3>\n

Click and drag to draw a rounded rectangle right inside the provided guide. See the picture below to get its placement.<\/p>\n

\"ps<\/figure>\n

Step 5<\/h3>\n

Select the rounded rectangle we have just created. Click Object > Path > Offset Path<\/strong>. Set Offset<\/strong> to -9 pt<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 6 \u2013 Screen Area<\/h3>\n

While the Rounded Rectangle<\/strong> tool is still active, click once on the canvas. Set Corner Radius<\/strong> to 5 pt<\/strong>. Delete the rounded rectangle made from the dialog box because we won\u2019t need it.<\/p>\n

\"ps<\/figure>\n

Step 7<\/h3>\n

Draw a rounded rectangle inside the screen area. Use the guide to help you draw it precisely.<\/p>\n

\"ps<\/figure>\n

Step 8<\/h3>\n

Duplicate screen shape that was just created. Draw a rectangle under the shape. Select both shapes and then select Minus Front<\/strong> in the Pathfinder<\/strong> panel.<\/p>\n

\"ps<\/figure>\n

The rectangle will cut the screen area and turn it into half rounded rectangle that we can use as the Status Bar area.<\/p>\n

\"ps<\/figure>\n

Step 9<\/h3>\n

Activate Rounded Rectangle<\/strong> tool again and click once on the canvas. Set Corner Radius <\/strong>to 10<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 10 \u2013 Home Button<\/h3>\n

Draw a rounded rectangle on the lower part of the phone; this will be the Home button.<\/p>\n

\"ps<\/figure>\n

Step 11<\/h3>\n

Click Object > Path > Offset Path<\/strong>. Set Offset<\/strong> to -4 pt<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 12<\/h3>\n

Draw a rounded rectangle and set its Fill<\/strong> to None<\/strong> and Stroke<\/strong> to Black<\/strong>. Draw a rectangle covering its lower part. Select both shapes and select Minus Front<\/strong> in the Pathfinder<\/strong> panel. This will cut the lower half of the rounded rectangle and turn it into a half rounded rectangle.<\/p>\n

\"ps<\/figure>\n

Step 13<\/h3>\n

Use the Direct Selection<\/strong> tool and select its lower line. Hit Delete<\/span> to delete it.<\/p>\n

\"ps<\/figure>\n

Step 14<\/h3>\n

While the shape is still selected, select Object > Expand<\/strong>. This will turn it into a fill shape, not just a line.<\/p>\n

\"ps<\/figure>\n

Step 15<\/h3>\n

Draw two small rectangles inside the shape.<\/p>\n

\"ps<\/figure>\n

Step 16<\/h3>\n

Draw a rounded rectangle and then cover its left side with a rectangle like shown. Select both shapes and select Minus Front <\/strong>from the Pathfinder<\/strong> panel. Use the Direct Selection<\/strong> tool to select its left side and then hit Delete<\/span>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n
\"ps<\/figure>\n

Step 17<\/h3>\n

Select Object > Expand<\/strong> to convert this line into a shape.<\/p>\n

\"ps<\/figure>\n

Step 18<\/h3>\n

Draw a rectangle on the tip of the shape.<\/p>\n

\"ps<\/figure>\n

Step 19<\/h3>\n

Click the center of the left border of the rectangle to add a new point. Click the top and bottom corners to delete. We will get a triangle.<\/p>\n

\"ps<\/figure>\n

Step 20<\/h3>\n

Set Fill <\/strong>to Black<\/strong> and Stroke<\/strong> to None<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 21<\/h3>\n

Select both shapes and click Unite<\/strong> on the Pathfinder<\/strong> Panel.<\/p>\n

\"ps<\/figure>\n

Below are the buttons we have made.<\/p>\n

\"ps<\/figure>\n

Step 22 \u2013 Application Icons<\/h3>\n

Activate Rounded Rectangle<\/strong> tool. Click once on the canvas and set Corner Radius <\/strong>to 1 pt<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 23<\/h3>\n

Draw a rounded rectangle inside the screen for the icon base. Activate Move<\/strong> tool and Alt<\/span> + Shift<\/span> + Drag<\/strong> the shape to duplicate it.<\/p>\n

\"ps<\/figure>\n

Step 24<\/h3>\n

Select the rounded rectangles we have just created and the click Horizontal Distribute Center <\/strong>on the Align<\/strong> panel.<\/p>\n

\"ps<\/figure>\n

Step 25<\/h3>\n

Draw the shape of a phone\u2019s receiver inside the first rectangle using the Pen<\/strong> tool.<\/p>\n

\"ps<\/figure>\n

Step 26<\/h3>\n

Use Type<\/strong> and add the label under the icon.<\/p>\n

\"ps<\/figure>\n

Step 27<\/h3>\n

Inside the next rounded rectangle, draw an avatar icon. Draw an ellipse for its head and manually draw its shoulder.<\/p>\n

\"ps<\/figure>\n

Step 28<\/h3>\n

Select both shapes and click Unite<\/strong> on the Pathfinder<\/strong> tool.<\/p>\n

\"ps<\/figure>\n

Step 29<\/h3>\n

In the next rounded rectangle draw an ellipse and a comma shape. Select both shapes and click Unite<\/strong> to turn it into a balloon callout.<\/p>\n

\"ps<\/figure>\n

Step 30<\/h3>\n

Inside the last rounded rectangle, draw four smaller rounded rectangles.<\/p>\n

\"ps<\/figure>\n

Step 31<\/h3>\n

Below are our completed icons!<\/p>\n

\"ps<\/figure>\n

Step 32 \u2013 Menu Navigation<\/h3>\n

Above the icons, draw small circles. Alt<\/span> + Shift<\/span> + Drag<\/strong> the shape to duplicate it.<\/p>\n

\"ps<\/figure>\n

Step 33<\/h3>\n

Select all the circles and click Horizontal Distribute Center <\/strong>inside the Align<\/strong> panel.<\/p>\n

\"ps<\/figure>\n

Step 34<\/h3>\n

Select one of the circles and resize it bigger. This bigger circle indicates that it is the \u2018active\u2019 page.<\/p>\n

\"ps<\/figure>\n

Step 35 \u2013 Signal Icon<\/h3>\n

Inside the status bar on the upper part of the screen, draw a small rectangle and then duplicate it. Drag the top line of the second rectangle upwards using Direct Selection<\/strong> tool.<\/p>\n

\"ps<\/figure>\n

Step 36<\/h3>\n

Repeat this process until we have four rectangles as shown below.<\/p>\n

\"ps<\/figure>\n

Step 37 \u2013 Battery Icon<\/h3>\n

Draw two rounded rectangles. Select both shapes and then click Unite<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 38 \u2013 Speaker<\/h3>\n

Draw a circle and Shift<\/span> + Alt<\/span> + Drag<\/strong> to duplicate it. Hit Ctrl<\/span> + D<\/span> a few times to repeat this duplication process.<\/p>\n

\"ps<\/figure>\n

Step 39<\/h3>\n

Draw a big rounded rectangle covering the small circles.<\/p>\n

\"ps<\/figure>\n

Step 40 \u2013 Camera<\/h3>\n

The \"camera\" is simply made from some circles with different sizes with the same origin.<\/p>\n

\"ps<\/figure>\n

Step 41 \u2013 Side Buttons<\/h3>\n

Draw two rounded rectangles on both sides of the phone as shown.<\/p>\n

\"ps<\/figure>\n

Step 42 \u2013 Preparing Canvas in Photoshop<\/h3>\n

We have finished working on the phone wireframe. It\u2019s time to bring it to life using Photoshop. Open up Photoshop and then make a new file, File > New<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 43<\/h3>\n

Select all paths in Illustrator (Ctrl<\/span> + A<\/span>) and then save it to Clipboard (Ctrl<\/span> + C<\/span>). Return to Photoshop and then paste it (Ctrl<\/span> + V<\/span>). In the option dialog box select Path<\/strong>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n

Step 44<\/h3>\n

The vector path will be kept in a new path inside the Paths<\/strong> panel.<\/p>\n

\"ps<\/figure>\n

Step 45 \u2013 Basic Shape<\/h3>\n

Copy the basic shape path into a new path. Click white and black circle in the Layers<\/strong> panel to add a new Adjustment Layer. Select Solid Color and set color to #0f1219<\/strong> in the next dialog box.<\/p>\n

\"ps<\/figure>\n

Add Gradient Overlay<\/strong> to add subtle lighting onto the shape.<\/p>\n

\"ps<\/figure>\n

Step 46<\/h3>\n

Duplicate the shape we have just created and double click its thumbnail layer to change its color to #c3c6c9<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 47<\/h3>\n

From the option bar, set inner path mode to Subtract<\/strong> from path area. This will turn the shape into the phone edge.<\/p>\n

\"ps<\/figure>\n

Add Bevel and Emboss<\/strong> to convert shape into a three-dimentional shape.<\/p>\n

\"ps<\/figure>\n

Step 48<\/h3>\n

Make a new layer. Convert layer to Clipping Mask<\/strong> by pressing Ctrl<\/span> + Alt<\/span> + G<\/span>. From now on, everything you paint will go inside the phone edge. Activate Brush<\/strong> tool and set foreground color to black. Paint subtle shadows on parts of the phone edges.<\/p>\n

\"ps<\/figure>\n

Step 49<\/h3>\n

Ctrl-click the phone edge layer to make a new selection based on its shape. Click Select > Modify > Contract <\/strong>by 1 px<\/strong>. By doing this you are making the selection smaller by 1 px.<\/p>\n

\"ps<\/figure>\n

Step 50<\/h3>\n

Make a new layer and paint other subtle shadows and highlights.<\/p>\n

\"ps<\/figure>\n

Step 51<\/h3>\n

Repeat the previous step, this time use Contract <\/strong>by 2 px<\/strong>. Draw shadows and highlights on the phone edges.<\/p>\n

\"ps<\/figure>\n

Below is the difference before and after adding highlights and shadows onto the edge. We can see that the result is more realistic.<\/p>\n

\"ps<\/figure>\n

Step 52 \u2013 Screen Area<\/h3>\n

Duplicate the screen area onto a new path. Click Add a New Adjustment Layer and select Solid Color. You can use any color.<\/p>\n

\"ps<\/figure>\n

Double click the layer to open a Layer Style<\/strong> dialog box. Add Inner Glow<\/strong> and Stroke<\/strong>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n

Step 53<\/h3>\n

Let\u2019s insert a wallpaper into the screen. Drop a wallpaper picture right on top of the screen area layer. Here, I use a nice nebula image<\/a>.<\/p>\n

\"ps<\/figure>\n

Step 54<\/h3>\n

Hit Ctrl<\/span> + Alt<\/span> + G<\/span> to convert it into a Clipping Mask<\/strong>. The wallpaper will automatically go inside the screen.<\/p>\n

\"ps<\/figure>\n

Step 55<\/h3>\n

Click icon black and white circle in the Layers<\/strong> panel to add a new Adjustment Layer<\/strong>. Select Hue\/Saturation<\/strong> from the menu and use the slider to modify the wallpaper color. Set it to Clipping Mask<\/strong> again by hitting Ctrl<\/span> + Alt<\/span> + G<\/span>. This way, the adjustment layer will only affect the wallpaper and not the phone.<\/p>\n

\"ps<\/figure>\n

Below is how your layer appearance should be.<\/p>\n

\"ps<\/figure>\n

Step 56 \u2013 Main Buttons<\/h3>\n

Duplicate the main button onto a new path. Add Adjustment Layer Solid Color with the color #cccfd2<\/strong>.<\/p>\n

\"ps<\/figure>\n

Double click the layer and activate Drop Shadow<\/strong> and Bevel and Emboss<\/strong>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n

Step 57<\/h3>\n

Let\u2019s paint highlights and shadows onto the button. The process is very similar to what we did with the phone edge in Step 48 to Step 51.<\/p>\n

Ctrl-click the main button layer to make a new selection based on its shape. Click Select > Modify > Contract <\/strong>by 1 px<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 58<\/h3>\n

Make a new layer. Paint subtle highlights and shadows onto the buttons.<\/p>\n

\"ps<\/figure>\n

Step 59<\/h3>\n

Select the other two buttons and duplicate them onto a new path. Add a new Adjustment Layer Solid Color with white as its color.<\/p>\n

\"ps<\/figure>\n

Step 60<\/h3>\n

Bring down its Opacity<\/strong> to 20%.<\/p>\n

\"ps<\/figure>\n

Step 61 \u2013 Application Icon<\/h3>\n

Copy icon bases onto a new path. Make a new Adjustment Layer Solid Color. Set its color to blue.<\/p>\n

\"ps<\/figure>\n

Step 62<\/h3>\n

Double click layer and add subtle Gradient Overlay<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 63<\/h3>\n

Delete the other three shapes.<\/p>\n

\"ps<\/figure>\n

Step 64<\/h3>\n

Repeat previous process for the other colors.<\/p>\n

\"ps<\/figure>\n

Step 65<\/h3>\n

Duplicate icon shapes onto a new path. Add a new Adjustment Layer Solid Color. Set its color to white.<\/p>\n

\"ps<\/figure>\n

Double click the icon layer and activate Outer Glow<\/strong> and Gradient Overlay<\/strong>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n

Step 66<\/h3>\n

Add an appropriate label under each icon.<\/p>\n

\"ps<\/figure>\n

Step 67 \u2013 Menu Navigation<\/h3>\n

Select four small navigation circles and copy them to a new path. Add a new Adjustment Layer Solid with color #7e899b2d<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 68<\/h3>\n

Repeat the same process with a bigger \u2018active tab\u2019 in the center, this time with the color #cbced4<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 69<\/h3>\n

Add a number on top of the activate tab. I chose 3 for mine.<\/p>\n

\"ps<\/figure>\n

Step 70 \u2013 Side Buttons<\/h3>\n

Duplicate side button to a new path. Make a new Adjustment Layer Solid Color with color #b0b3b6<\/strong>. Place it behind the phone.<\/p>\n

\"ps<\/figure>\n

Step 71<\/h3>\n

Add Inner Shadow<\/strong> with Angle 0 degree<\/strong> and Inner Glow<\/strong>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n

Step 72<\/h3>\n

Repeat the process for the other button.<\/p>\n

\"ps<\/figure>\n

Step 73<\/h3>\n

Double click Layer button to open Layer Style<\/strong> dialog box. Add Inner Shadow<\/strong> but this time use 180 degree<\/strong> to add a shadow onto the button. Also, add Inner Glow<\/strong>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n

Step 74 \u2013 Status Bar<\/h3>\n

Select status bar and duplicate it onto a new path. Make new Adjustment Layer Solid Color with black as its color. Add time information.<\/p>\n

\"ps<\/figure>\n

Step 75<\/h3>\n

Duplicate the battery to a new path. Add a new Adjustment Layer Solid Color. Select green as its color.<\/p>\n

\"ps<\/figure>\n

Add Inner Glow<\/strong> with the following settings.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n

Step 76<\/h3>\n

Duplicate the signal icon to a new path and add Adjustment Layer Solid Color. For its color select white. Double click Layer<\/strong> and activate Gradient Overlay<\/strong>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n

Step 77 \u2013 Speaker<\/h3>\n

Duplicate the speaker onto a new path. From the option bar, set a smaller circle path mode to Subtract<\/strong> from the path area. Add a new Adjustment Layer Solid Color<\/strong> with #6b6f76<\/strong> as its color.<\/p>\n

\"ps<\/figure>\n

Double click Layer<\/strong> and add the following Layer Styles<\/strong>.<\/p>\n

\"ps<\/figure>\n
\"ps<\/figure>\n
\"ps<\/figure>\n
\"ps<\/figure>\n

This is the result.<\/p>\n

\"ps<\/figure>\n

Step 78 \u2013 Camera<\/h3>\n

Activate the circle and duplicate it to a new path. Add a new Adjustment Layer <\/strong>with the color #272d36<\/strong>. Do the same with the ring inside the circle but with the color #585a5e<\/strong>.<\/p>\n

\"ps<\/figure>\n

Below is the camera in 100% magnification.<\/p>\n

\"ps<\/figure>\n

Step 79 \u2013 Reflection<\/h3>\n

Duplicate the basic phone shape onto a new layer. Draw a polygonal shape cutting across the phone and set its mode to Intersect<\/strong> path area. Add a new Adjustment Layer Solid Color, set white as its color.<\/p>\n

\"ps<\/figure>\n

Double click the reflection shape and add subtle Gradient Overlay<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 80<\/h3>\n

Set Blend<\/strong> mode to Screen<\/strong> and reduce its Opacity<\/strong> to 70%<\/strong> and Fill<\/strong> to 0%<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 81<\/h3>\n

Ctrl-click reflection layer. Make a new layer and paint more highlight on its upper area.<\/p>\n

\"ps<\/figure>\n

Step 82<\/h3>\n

Place the phone layers inside a group by selecting all of them and hit Ctrl<\/span> + G<\/span>. Click the eye icon on background to hide them and make the phone sit on a transparent background. Hit Ctrl<\/span> + A<\/span>, Ctrl<\/span> + Shift<\/span> + C<\/span>, Ctrl<\/span> + V<\/span> to duplicate phone to a new layer.<\/p>\n

\"ps<\/figure>\n

Step 83<\/h3>\n

Hit Ctrl<\/span> + T<\/span> to transform the phone. Right click and chose Flip Vertical<\/strong>. Put the phone under the original phone.<\/p>\n

\"ps<\/figure>\n

Step 84<\/h3>\n

Add a layer mask and paint a gradient from white to black to fade the reflection.<\/p>\n

\"ps<\/figure>\n

Step 85 \u2013 Shadow<\/h3>\n

Activate the Brush<\/strong> tool with big<\/strong> brush size and Hardness<\/strong> 0%<\/strong>. Make a new layer and draw a black line under the phone. Set its Opacity<\/strong> to 10%<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 86 \u2013 Background<\/h3>\n

Let\u2019s work on the background. Make a new layer and start painting using different shades of blue. There\u2019s no perfect rule here. Unleash your creativity.<\/p>\n

\"ps<\/figure>\n

Step 87<\/h3>\n

Add Gaussian Blur (Filter > Blur > Gaussian Blur<\/strong>). Use very big radius sizes and make sure to activate Preview options so you can see the result in real time.<\/p>\n

\"ps<\/figure>\n

Step 88<\/h3>\n

Let\u2019s make a pixel pattern. Make a new file with size 6 \u00c3- 6 pixels.<\/p>\n

\"ps<\/figure>\n

Step 89<\/h3>\n

Hit Ctrl<\/span> + 0<\/span> to maximize the canvas magnification level. Make a new layer and draw a diagonal line using the Pencil<\/strong> tool with 1 px brush size<\/strong>.<\/p>\n

\"ps<\/figure>\n

Step 90<\/h3>\n

Hide Background<\/strong> so we only see the diagonal line. Click Edit > Define Pattern<\/strong> to save the image as a pattern.<\/p>\n

\"ps<\/figure>\n

Step 91<\/h3>\n

Return to our background, double click it and add Pattern Overlay<\/strong> using the pattern we have just made earlier.<\/p>\n

\"ps<\/figure>\n

Here\u2019s the result.<\/p>\n

\"ps<\/figure>\n

Final Result<\/h2>\n

Finally, we can bring back our phone. As you can see, we have just combined the flexibility of vector drawing in Illustrator, and the ease of pixel painting in Photoshop to achieve a realistic product image. I hope you enjoyed this tutorial.<\/p>\n

\"ps<\/figure>\n

Download<\/h3>\n

Click here<\/a> to download the final PSD for this tutorial.<\/p>","protected":false},"excerpt":{"rendered":"

In this tutorial, we are going to draw the famous Samsung Galaxy in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and then exporting it to Photoshop to add some sophisticated lighting and other effects. Step 1 \u2013 Preparing the Canvas in Illustrator Open up your Adobe Illustrator. Make a new…<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[43],"tags":[1933,1938],"topic":[4520,4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Draw a Realistic Samsung Galaxy in Photoshop - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this tutorial, we are going to draw the famous Samsung Galaxy in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Draw a Realistic Samsung Galaxy in Photoshop\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we are going to draw the famous Samsung Galaxy in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-16T13:01:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-19T14:06:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/samsung-galaxy-illustrator-photoshop\/tutorial-photoshop-illustrator-galaxy-001.jpg\" \/>\n<meta name=\"author\" content=\"Mohammad Jeprie\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mohammad Jeprie\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/\"},\"author\":{\"name\":\"Mohammad Jeprie\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7905d634db8f6140fda6236103f50bb2\"},\"headline\":\"How to Draw a Realistic Samsung Galaxy in Photoshop\",\"datePublished\":\"2012-03-16T13:01:44+00:00\",\"dateModified\":\"2022-05-19T14:06:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/\"},\"wordCount\":2391,\"commentCount\":43,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/samsung-galaxy-illustrator-photoshop\\\/tutorial-photoshop-illustrator-galaxy-001.jpg\",\"keywords\":[\"Photoshop Tutorials\",\"Photoshop UI effects\"],\"articleSection\":[\"Photoshop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/\",\"name\":\"How to Draw a Realistic Samsung Galaxy in Photoshop - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/samsung-galaxy-illustrator-photoshop\\\/tutorial-photoshop-illustrator-galaxy-001.jpg\",\"datePublished\":\"2012-03-16T13:01:44+00:00\",\"dateModified\":\"2022-05-19T14:06:48+00:00\",\"description\":\"In this tutorial, we are going to draw the famous Samsung Galaxy in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/samsung-galaxy-illustrator-photoshop\\\/tutorial-photoshop-illustrator-galaxy-001.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/samsung-galaxy-illustrator-photoshop\\\/tutorial-photoshop-illustrator-galaxy-001.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Draw a Realistic Samsung Galaxy in Photoshop\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7905d634db8f6140fda6236103f50bb2\",\"name\":\"Mohammad Jeprie\",\"description\":\"Mohammad is an author, blogger and graphic designer. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/mohammadjeprie\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Draw a Realistic Samsung Galaxy in Photoshop - Hongkiat","description":"In this tutorial, we are going to draw the famous Samsung Galaxy in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/","og_locale":"en_US","og_type":"article","og_title":"How to Draw a Realistic Samsung Galaxy in Photoshop","og_description":"In this tutorial, we are going to draw the famous Samsung Galaxy in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and","og_url":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-03-16T13:01:44+00:00","article_modified_time":"2022-05-19T14:06:48+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/samsung-galaxy-illustrator-photoshop\/tutorial-photoshop-illustrator-galaxy-001.jpg","type":"","width":"","height":""}],"author":"Mohammad Jeprie","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Mohammad Jeprie","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/"},"author":{"name":"Mohammad Jeprie","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7905d634db8f6140fda6236103f50bb2"},"headline":"How to Draw a Realistic Samsung Galaxy in Photoshop","datePublished":"2012-03-16T13:01:44+00:00","dateModified":"2022-05-19T14:06:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/"},"wordCount":2391,"commentCount":43,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/samsung-galaxy-illustrator-photoshop\/tutorial-photoshop-illustrator-galaxy-001.jpg","keywords":["Photoshop Tutorials","Photoshop UI effects"],"articleSection":["Photoshop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/","url":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/","name":"How to Draw a Realistic Samsung Galaxy in Photoshop - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/samsung-galaxy-illustrator-photoshop\/tutorial-photoshop-illustrator-galaxy-001.jpg","datePublished":"2012-03-16T13:01:44+00:00","dateModified":"2022-05-19T14:06:48+00:00","description":"In this tutorial, we are going to draw the famous Samsung Galaxy in Photoshop and Illustrator. We will start by drawing its wireframe in Illustrator and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/samsung-galaxy-illustrator-photoshop\/tutorial-photoshop-illustrator-galaxy-001.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/samsung-galaxy-illustrator-photoshop\/tutorial-photoshop-illustrator-galaxy-001.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-draw-a-realistic-samsung-galaxy-s2-using-illustrator-and-photoshop\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Draw a Realistic Samsung Galaxy in Photoshop"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7905d634db8f6140fda6236103f50bb2","name":"Mohammad Jeprie","description":"Mohammad is an author, blogger and graphic designer. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.","url":"https:\/\/www.hongkiat.com\/blog\/author\/mohammadjeprie\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2XR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=11399"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11399\/revisions"}],"predecessor-version":[{"id":59754,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11399\/revisions\/59754"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=11399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=11399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=11399"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=11399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}