With just about everyone using a smart phone, it is important for mobile apps to have beautifully designed icons to represent the brand. In this tutorial, we will show you how to create a beautiful 3D starfish icon using several applications including Photoshop, Cinema 4D, and ZBrush. In the process we will show you how to create 3D objects and then combine them with textures in Photoshop to create an amazing icon. Let's get started!
Tutorial Assets
To complete the tutorial you will need the following assets.
- Sand Texture (Image 5 - Large size)
- Water Texture (Image 1 - Medium size)
- Brush Pack
1. Modeling the icon border
Step 1
It's important that you have some knowledge of Cinema 4D to complete this tutorial. Open Cinema 4D and create a Rectangle Object (Create > Spline > Rectangle) or use the shortcut bar as shown below.
Step 2
Keep the rectangle selected and edit the object properties on the Attributes Manager, set width and height to 36cm, turn on the Rounding option and set the value to 6cm. For some unknown reason the pixel unit was removed from Cinema 4D, these values represents the approximate ratio of a 1024x1024 pixels icon.
Step 3
To create depth to your rectangle use the shortcut bar and select Extrude Nurbs, go to the Object Manager panel and drag the rectangle inside the Extrude Nurbs object. To edit the depth of the shape, select the object and set the Movement on the Z axis to 5cm in the Attributes Manager as shown below.
Step 4
Now it's time to convert your model into a polygonal object, choose Mesh > Conversion > Make Editable. After that you'll see a different object in the Object Manager, expand Extrude Nurbs and delete the Cap 1 and Cap 2.
Step 5
Extrusion is one of the most important tasks in 3D modeling and you will use it to create the border. Select your object, choose the Edge mode and go to menu Select > Loop Selection. Pass your mouse over the polygon until the edge is highlighted, then click on it. Ensure that a yellow highlight is over the edge, right-click and choose Extrude from the menu. Press T (Scale Tool) and hold Command/Ctrl while dragging to the center of the object, you'll notice a new face moving from the edge, set the size of X and Y on the Coordinates panel to 28cm.
Step 6
Keep the edge highlighted and repeat the last step to extrude it again, but instead of use T press E (Move Tool) and hold Command/Ctrl while dragging the Z arrow (Blue) to the left. Set the precise position on the Coordinates panel, use 0cm on the Z axis.
Step 7
Symmetry is a very useful tool, use it to close the object. Choose Create > Modeling > Symmetry, got to the Object Manager and drag your object inside Symmetry. Select Symmetry from the Object Manager and set the Mirror Plane to XY on the Attributes Manager.
Step 8
Time to make your object editable again, choose Mesh > Conversion > Make Editable, the result is a group with the name Symmetry. On the Object Manager drag Extrude Nurbs outside the group and delete Symmetry. Double click Extrude Nurbs and rename it to Icon Shape, hit enter to confirm.
You don't need the extra edge that appeared with the symmetry step, so let's remove it. Turn Edge mode on and use Loop Selection to select the middle edge, but in this case hold shift to grab the inner edge as well. Right click on any of the highlighted edges and choose Dissolve from the context menu. It's gone!
Step 9
Next you'll apply a small bevel on the edges. Keep Edge mode on, get Loop Selection tool to grab all four external edges, right click and choose Bevel. Don't do anything on the view port, instead use the Attributes Manager to apply the same settings to all edges. Type 0.1cm to Inner Offset and add 1 Subdivision, hit Apply to confirm, the edge will be subdivided into three.
Step 10
The icon border is ready to sculpt, you need to export it using a format compatible with ZBrush, go to File > Export > Wafefront (*.obj) select the path you want to store the file and hit Save. Save your project and close Cinema 4D. Well done!
2. Sculpting in ZBrush
Step 1
I think that work with ZBrush requires more artistic abilities than technical knowledge, that's why you don't need to worry if you achieve different results.
Open ZBrush and import the OBJ file you have created with Cinema4D, use the menu located at the right side of the interface. The object you have created will appear right below as a tool.
Step 2
Draw on the stage and you'll see the object you have created. Don't worry about size or position, just release the shape. Enter Edit Mode (T) and experiment the manipulation commands:
- Rotate: Click outside the object
- Move: Alt+Click outside the object
- Zoom: Alt+Click outside the object then release Alt
Before you start sculpting, it's necessary to add resolution to your object, press Command/Ctrl+D five times till the Mesh gets more than 500.000 points. The more you add the more detail you can have, but it will make your computer work very slow.
Step 3
Experiment drawing on the object you will notice deformations on the surface. While sculpting you need to know 2 simple things, hold ALT to invert the brush effect or hold SHIFT to smooth the effect. The Standard brush is the best for this kind of organic shape.
To control brush size and strength, press S for Draw Size and O for Focal Shift, you'll use it a lot.
Step 4
Don't use brush on the outside faces, concentrate the details inside.
Step 5
You can undo your steps if there is something you don't like, but ZBrush workflow is very peculiar. Sometimes the best option is to create a new document and start it again.
At this point, you should exercise your faith and trust that your object will become water soon, it depends on the material we'll use. Create soft deformations, don't apply to much strength with the brush. At the end you should get something similar as shown below.
Step 6
You need to return to Cinema 4D to continue the magic, but before add more geometry to the object, press Command/Ctrl + D and look at the control bar located below the main menu, if you got more than 3 million points it's a good time to stop adding geometry.
Step 7
Now you need to do a simple trick to reduce the number of points without affecting mesh quality. Go to Zplugin > Decimation Master configure the percentage of decimation to 5%, click on Pre-Process All and wait for ZBrush to finish the calculations. When the process is finished go to the same menu and now click on Decimate All, it will reduce the poly count of your object.
Step 8
Export your model using the Tool menu on the right and use the OBJ format.
3. Simulating realistic water
Step 1
Return to Cinema 4D go to File > Open and open the file you have created with ZBrush. Use Object Manager to rename it to Icon Shape. Make sure X and Y axis sizes are 36cm, also set Y position to 18cm.
Step 2
You need to create an infinite plane to place your icon, go to Create > Object > Plane, in the Attributes Manager set the Width and Height to 400cm and the Width and Height Segments to 5, use Coordinate Manager set the Z position to 100cm.
Step 3
Deform the plane, choose Create > Deformer > Bend. In the Object Manager drag Bend inside the Plane. Edit the fields in the Attribute Manager and Coordinate Manager exactly as shown below.
Step 4
Smooth the plane using a HyperNURBS object, go to Create > Nurbs > HyperNURBS, drag the Plane inside the HyperNURBS in the Object Manager.
To finish your plane apply a material to give color to it, go to Create > Material > New Material. The material attributes appears in the Attributes Manager, edit the color values to create a blue color (R:50 G:195 B255) and drag the Blue Ball over the plane on the view port to see the result. Rename your material in the Material panel located on the bottom left of the interface, double click the sphere name and type Plane.
Step 5
In this step you will create the water material, go to Create > Material > New Material and rename it to Water. Double click the gray sphere to open the Material Editor window and follow the images below to properly configure it. When finished drag the material upon the Icon Shape object in the view port.
Step 6
Go to Create > Light > Light to insert a light source on your scene, rename to Left Light and set the position, type -80cm for X axis and 25cm for Y axis.
Configure light properties in the Attributes Manager, choose the General tab, set Intensity to 50% and color to R220 G240 B255. In the Shadow tab select Shadow Maps (Soft) from the drop down menu, set intensity to 200% and Shadow Map to 1000x1000.
Step 7
Select Left Light, copy and paste it and rename to Right Light in the Object Manager. Use Coordinate panel to position the new light to the right of the icon, change the X axis to 80cm. Edit Intensity value to 70% in the General tab in the Attribute Manager.
Step 8
Create a SKY to compose the scene. Go to Create > Environment > Sky, apply a new material to the object with the following color settings:
- R:200
- G:235
- B:255
You can drag the material sphere from Material Manager and release over the Sky object in the Object Manager. You should see a small sphere connected to the object as shown below.
Step 9
Create some bubbles to make the water more believable, choose Create > Object > Sphere, set Radius 2cm and Segments 24, rename the object to Bubble 1. To have a better view of the object adjust the coordinates to 0cm on X axis, 10cm on Y axis and -30cm on Z axis.
Go to Mesh > Conversion > Make Editable and press T to edit the size. In the view port grab the green manipulator to resize the object on the Y axis and drag to reach 6cm, it will appear more oval. Apply the Water material to the bubble dragging it over the object.
Step 10
Add deformation to the bubble, go to Create > Deformer > Twist, set the position of the object to 10cm on Y axis, -30cm on Z axis and rotate 45 degrees on the B axis using the Coordinate Manager. Drop Twist inside Bubble 1 in the Object Manager, configure it as shown below using the Attribute Manager.
Step 11
At this points it's a good idea organize the Object Manager, Shift click the following objects:
- Sky
- Right Line
- Left Line
- HyperNURBS
In the Object Manager, click with right mouse button on any of the objects you have selected then choose Group Objects from the context menu. Double click Null group and rename it to Scene.
Step 12
Duplicate Bubble 1 by pressing Command/Ctrl + C and Command/Ctrl + V then press E (Move Tool) to drag the new bubble away from Bubble 1, the position is not important right now. Rename the duplicate to Bubble 2.
Step 13
Select Bubble 2, use the Coordinate Manager to change Y size from 6cm to 3cm, you'll notice a change in the shape. Expand the hierarchy in the Object Manager and select the Twist deformer. Alter the Angle entry in the Attribute Manager to 120º, go to the Coordinate Manager and change B Rotation to 135º.
Step 14
Repeat Steps 12 and 13 at least 4 times to create 6 different bubbles, no problems if you want more. Experiment different sizes and rotations to achieve distinctive results.
Step 15
Before you begin positioning the bubbles use the sub-menu at the view port, as shown below to turn off the Deformer visibility.
Step 16
Because we are dealing with a very complex mesh the placement of the bubbles requires the use of other cameras. Use the icon located at the right side of the view port sub-menu to change the layout.
Step 17
In the sub-menu of Top, Right and Front view choose Display > Gouraud Shading to change the preview mode.
Step 18
Start with Front view, select each bubble press E (Move tool) and place at your own will, then press T (Size tool) adjust the size of the big bubbles to fit in the Icon Shape. There is no need to be precise here, the more random and casual the better.
Step 19
Change to Top view to place each bubble over the icon shape on the Z axis.
Step 20
Change the camera layout clicking on the icon at the perspective view. Group all the Bubbles and give the name Bubbles to the group.
Step 21
To complete the scene create a camera, go to Create > Camera > Camera edit the position in the Coordinate Manager to 18cm on the Y axis and -60cm on the Z axis. To use the camera as main view click on the small square button located at the Object Manager.
Step 22
Rendering in Cinema 4D is easy part. Configure render settings in the menu Render > Edit Render Settings or press Command/Ctrl + B. Follow the images below.
Step 23
Render your image in the menu Render > Render to Picture Viewer be patient wait for the render to finish, then go to File > Save as use TIFF format.
1. Photoshop Retouching
Step 1
Open Photoshop, create a New Document 2800px x 2100px with the Resolution at 72dpi, Color Mode RGB and a Transparent Background.
Step 2
Select the Gradient Tool (G), configure to Foreground to Background and Radial Gradient in the Options Bar. Set Foreground color to R:255 G:255 B:255 and Background R:135 G:190 B:205. Drag an horizontal line while holding Shift, from the center to the border of the document.
Step 3
Open the TIFF file saved in Cinema 4D and place on your document. Name this layer Render.
Step 4
From the Tool bar select the Rounded Rectangle, click in the image and edit the fields as shown below. Position the Path around the outside edge and press Command/Ctrl + Enter to convert into a selection.
Step 5
Go to Layers and create a mask from the selection.
Step 6
Press P to grab the Pen Tool and create a Path around the inner edge, abuse of the zoom to get a very detailed path. When finished press Command/Ctrl + Enter to convert into a selection.
Step 7
Click on the mask, press D to reset Background color to black, then press Delete to mask the inner part of the layer. Put Render layer inside a group and name it Water Border.
Step 8
Inside the group create a Hue/Saturation adjustment layer, click the icon situated at the foot of the Layer panel. Activate the Clipping icon in the Properties panel to clip Hue/Saturation to the Render layer. Apply the settings as shown below.
Step 9
Repeat the last step and create 3 new adjustment layers, but pay attention to the sequence. Choose Brightness/Contrast, Levels and again Brightness/Contrast.
Step 10
Create an empty layer and name it Bright Soft Brush. Alt-drag the mask of layer Render and release over Bright Soft Brush, this will duplicate the mask. Grab a soft brush (size 300px), use white color and paint over the edges to make more bright, like an inner glow.
Step 11
Create a new layer, name it Shadow and set blend mode to Multiply. Alt-drag the mask of layer Bright Soft Brush and release over Shadow. Use the same soft brush with a dark blue color R:75 G:120 B:155, paint the inner edge creating a soft shadow.
Step 12
Create a new layer and name it Specular. Press P to select Pen Tool, draw a few shapes and convert them to selection as shown below. Paint this selection with white color to create a specular light. Add Outer Glow effect using the Layer Style button situated on the foot of Layer panel.
Step 13
Select layer Render, hold Command/Ctrl and click Create New Layer, this will create an empty layer beneath. Name the layer Soft Shadow 1 and change blend mode to Multiply. Use Elliptical Marquee Tool, set Feather value to 30 and create a selection.
Step 14
Paint the selection with a desaturated blue R:95 G:140 B:155.
Step 15
Duplicate Soft Shadow 1, rename to Soft Shadow 2 and set layer Opacity to 80%. Press Command/Ctrl + T and stretch the layer to the boundaries of document. Erase some parts using a soft brush to make it more natural.
Step 16
Import the Sand Texture to your document and label it Sand. Create a new group beneath Water Border, name it Sand and put the texture inside. Press CMD/CTRL + T and set the size to 200% in the Options bar. Don't worry with the resolution, in the next steps you'll work on that.
Step 17
Select Rectangular Marquee Tool and do a square marquee to keep only the center of the texture. Mask Sand group with this selection.
Step 18
Repair the texture removing all the dirt, use Clone Stamp (S) with a soft brush. Remember to hold Alt to clone from clean areas.
Step 19
Continuing the process of repair the texture, create a new layer above Sand and fill it with a medium gray R:128 G:128 B:128 then go to Filter > Noise > Add Noise set the Amount to 12%, Uniform Distribution and Monochromatic. Change layer Blend mode to Overlay and label it Noise. This will add grain to your texture and ease the resolution problem.
Step 20
Finally apply a Smart Sharpen filter to Sand layer, set Amount to 160%, Radius 1,5px and check More Accurate.
Step 21
Add 2 adjustment layers below Noise to regulate texture's colors, Brightness/Contrast and Color Balance.
Step 22
Create an empty layer above Noise, name it Soft Light and set Opacity to 50%. Use a soft brush(size 1300px) to draw a faded white light in the center of the sand texture.
Step 23
Add a new layer, name it Soft Shadow 1 and set Blend mode Overlay. Press B, select a soft brush (size 120px) with black color. Paint over the shadows that already exist to make them stronger.
Duplicate the layer, name it Soft Shadow 2, set Opacity to 50% and use Eraser (E) to delete some parts. Follow the images below to see what areas you need to paint.
Step 24
Add another layer, label it Cast Shadow 1 and set Opacity 50%. Paint in black a subtle shadow as shown below.
Step 25
Create a layer, name it Hard Shadow 1 set Opacity to 60% and Blend mode Color Burn. Press P for Pen Tool and draw a shape close to the edge. Command/Ctrl + Enter to transform into selection and fill it with a light blue R:144 G:184 B:214.
Step 26
Create a new layer, label it Hard Shadow 2, set Opacity to 40% and Blend mode Multiply. Repeat Step 25, but create a bigger shadow like the image below.
Step 27
Now you'll work on the starfish. Create a new layer between Water Border and Sand groups, rename it to Color. Fill a square on the center of the document with a dark red color R:125 G:5 B:15. Select new layer and press Command/Ctrl + G to create a group with the name Starfish.
Step 28
Ensure layer Color is selected in the Layers panel, then use the Pen Tool (P) to draw a 5 point star with rounded corners, like the image below. Click with right mouse button and choose Create Vector Mask from the popup menu.
Step 29
Now you have a flat star shape ready for paint. Create 2 empty layers above Color layer, name the first Soft Shadow 1 and the second Soft Light 1, select booth while holding Shift then press Command/Ctrl + ALT + G to make a Clipping Mask.
Step 30
The following steps will test your brush skills, be patient and repeat until you get satisfied. Select Soft Shadow 1, set layer Opacity 60%. Pic a soft brush (Size 100px) with a dark red R:65 G:0 B:0. Paint gently defining shadow areas as shown below.
Step 31
Go for Soft Light 1, use the same brush, but now with a light red R:165 G:0 B:0. Same deal, smooth painting bright areas.
Step 32
Create a new layer, name it Texture 1 and make a clipping mask. Grab a small brush (size 5px) with hardness 50% and set an orange color R:230 G:135 B:0. Start painting the central lines of the texture, correct your lines using the Eraser (E) with the same brush settings.
Paint soft dark strokes around the lines to give depth to the texture. Use a soft brush with a dark red R:65 G:0 B:0. Don't be super precise, mistakes make the texture feels more organic and natural.
Step 33
Keep the workflow until you get a similar result as shown below. Experiment a soft brush to fade some lines with the Eraser (E). Don't worry if your lines get a dirty look, we will further soften this effect.
Step 34
Intensify the texture, press Command/Ctrl + J to duplicate layer Texture 1, rename to Texture 2 Duplicated and set Opacity 50%.
Step 35
Create a new clipped layer with the name Soft Light 2 and Blend mode Screen. Press B, choose a ragged brush (size 200px), set color to R:210 G:175 B:140, paint an additional light over the starfish.
Step 36
Create a new layer with the name Spores, it's not necessary to make a Clipping mask this time. Use an Elliptical Marquee to draw a circle with 30 x 30 pixels and fill it with a dark red R:115 G:10 B:10. Press Command/Ctrl + D to deselect. Lock transparent pixels to avoid painting outside the layer.
Step 37
Set midtone color R:245 G:210 B:145, use a ragged brush(size 25px) and paint some bright areas, consider a light source coming from the upper right. Choose a highlight color R:245 G:210 B:145 and set brush opacity to 40%. Mix all the colors to create a sense of depth, experiment varied brush sizes.
Step 38
It'll be crazy to paint all the spores, so take advantage of copy and paste, change the size to make them different. Star by duplicating in the central circle of the star and place them on the line intersections. Don't create new layers, use only one layer, the Spores.
Step 39
To make the starfish more three-dimensional some perspective spores are necessary. Use the same process of steps 36 and 37. Draw a few and duplicate them using the same workflow of step 38. Use the lines to see where they should point, but again, don't be precise to make it natural.
Step 40
The Spores needs to cast shadow to compose with the Starfish, unfortunately there isn't shortcut to do it. Create a new layer beneath Spores, name it Spores Cast Shadow 1. Press B and choose a ragged brush (size 10px) Opacity 60% and black color. Zoom in the image to paint the shadows, remember the light comes from the upper right corner.
Step 41
Add inner shadow to the spores on the left. Create a new layer above Spores and make a Clipping mask. Name it Soft Shadow 1. Use a soft brush (Opacity 80%) and paint with a dark red R:100 G:0 B:0.
Step 42
Go to Layers panel, hold Command/Ctrl and click on the vector mask of layer Colors, a selection will appear. Now hold Command/Ctrl + Shift and click over the layer Spores it will add the spores shape to the selection.
Step 43
Use the active selection to Mask a new layer. Paint the layer with a soft light orange R:240 G:170 B:95.
Step 44
Add a final light to the Starfish. Use again the mask you have created and place it on a new layer. Paint a white light using a big soft brush(Opacity 40%).
Step 45
In the next step you'll reduce the dirt of your brushes using a texture. Get the file Water Texture and place as the top layer of Starfish group, duplicate the layer pressing Command/Ctrl + J.
Step 46
Select the original layer, go to Edit > Transform > Flip Vertical. Mirror the images and merge booth layers naming it to Texture 2 as shown below.
Step 47
Press Command/Ctrl + SHIFT + U to Desaturate the texture, next increase Shadow values to 100 in Levels (Command/Ctrl + L). Set Opacity to 50% and Blend mode to Soft Light.
Step 48
Reduce texture size to 80% (Command/Ctrl + T), and apply a Smart Sharpen filter to it, Amount 100%, Radius 1px and check More Accurate.
Mask your layer, ensure Texture is selected in Layers panel. Hold Command/Ctrl and click on the Soft Light 4 mask to create a selection, then click Add Layer Mask button at the foot of Layers panel.
Step 49
Now project some shadows on the sand, start creating a layer below Color layer and name it Cast Shadow 1. Command/Ctrl click on the mask shape of Color layer to create a selection and fill with black color. Go to Filter > Blur > Motion Blur set Angle 60º and Distance 200 pixels. Erase unnecessary parts as shown below.
Step 50
Add a new layer and strengthen the shadows close to the Starfish edge. Set layer opacity to 50% and name it Cast Shadow 2. Use a soft brush with black color.
Step 51
Close Starfish group and leave it for a while, now we need to paint the seaweed. Use the Pent Tool (P) to create a new shape at the left of Starfish.
Step 52
Create a vector mask using the active path on a new layer, store inside a new group between Water Border and Starfish. Fill the layer with the following color R:85 G:100 B:55.
Step 53
A few tips before you start. Use more than one brush varying size, softness and opacity. Use at least 4 colors, the base color, a highlight, a midtone and other for shadow, store them in Swatches. Instead of erase try painting with the base color to correct mistakes.
Define texture directions, start with a light green R:175 G:190 B:125 and a thin brush.
Step 54
Change brush and use this settings R:100 G:115 B:55 as midtone color. Attenuate brush strokes maintaining details.
Step 55
Back to Highlights.
Step 56
Add some shadows with soft brushes, R:80 G:92 B:45. Paint dust/noises to make the texture more interesting.
Step 57
Create a new layer clipped to layer Color. Use black/white to paint ambient lights and strengthen shadows.
Step 58
Add a new layer below Color to paint the shadows. Use black as color.
Step 59
Balance colors with Adjustment layers to compose Seaweed in the scene. Select Color Balance, Hue/Saturation and Levels, in this order.
Step 60
To make the scene more believable let's bury the Seaweed in the sand. Right click the vector mask of layer Color then choose Rasterize Vector Mask to transform it in a Pixel Mask. Click the mask, press D to set background color to black and select the noise brush.
Step 61
Paint to hide some parts of the plant.
Step 62
Do the same to the Starfish, create a blank mask in the group folder. Use the noise brush to hide the right arm of the star.
Step 63
Backup Starfish folder just for precaution, press Command/Ctrl + J, name your backup as Starfish Backup. Select the duplicated group, use the shortcut Command/Ctrl + E to merge it. Right click on the mask and choose Apply Mask. For the next steps a flat version of Starfish works best.
Step 64
Select Starfish Flat for a fine tuning with Adjustment layers. Don't forget to clip them all in correct sequence.
Step 65
Create a new layer above the Adjustment layers, set a dark red color R:75 G:0 B:0 and paint soft shadows.
Step 66
Add a new layer with Blend mode Overlay, grab a soft brush to paint specular highlights.
Step 67
Now we can add a final detail to the image, a subtle sand relief. Use a soft brush to paint a line at the bottom of Starfish. Apply the color R:215 G:210 B:195.
Step 68
You have reached the final step, add a last, however important Adjustment at the top of all layers. This will give a warm look to the image.
To add the extra bubbles you can render in Cinema 4D or copy and deform the ones present in the border.
Conclusion
Although the process seems complex, the techniques I have used here are simple and require more hard work than supernatural powers. The scret is to trick the eye. I hope you have learned useful things that may help you create shiny works. Thanks for completing the tutorial and keep practicing.
