iPhone Designing - AppMobilize.com

Make a bowling ball composition

Valeriu Dodon — Wed, 22 May 2013 09:05:09 +0000

In this tutorial we will make a bowling ball composition for iPhone game Midnight Bowling using different applications like Google SketchUp for compositing objects and Photoshop for the rest of the coloring and effects.

SketchUp Part:

So I want you to begin with creating a document in Google SketchUp. Go File and gt; New.

The very good thing about SketchUp is that you have millions of components ready for download directly into the SketchUp. So we have to have a sphere for creating a bowling ball, so go to the components menu. If in default windows look - go Window and gt; Components.

Here you can see built in components, there options and statistics. You can also see a search bar where you can type any word and Google SketchUp will find a model for you. So I did paste there the word - Sphere.

Here I have even several spheres to choose from. So I picked the one with the polygons.

The round edged shape will be the PIN.

Create more pins around the sphere.

Now rotate each of them a little bit. I also turned on the shadow to see better the space.

And here is our composition.

There is no render in SketchUp, you can drop shadow and create fog I think. The other thing is that you can change the style of the whole scene. So here it is:

Export the image like 2D drawing into the Jpeg Format. (figure1.jpg, figure2.jpg)

Photoshop part.

Download brushes: BowlBrushes.abr and TwirlBrush.abr

So we are now jumping into Photoshop. We have several Jpegs to work with in Photoshop. These work more like maps.

Here we are with Outline document and SketchUp Document in Photoshop ready to start the fight. I and #39;m beginning to make selections. The basic goal is to divide mass *(objects: ball and pins) and *space (background).

We don and #39;t have lots of tones semi- tones and complex shadows so we are able to pick selections easily.

Make an upper part selection (sky area) and copy it to a new layer.

I filled this area with color so you can see how good was our selection (don and #39;t use complex effects before the rendering.

Do the same with the lower area.

Now for the objects: we still have to divide all the objects. I will start form the ball.

Make a selection around the ball (use elliptical selection tool). Make a new layer. Use soft edged brushes to fill the selection with color.

Then add some texture to emulate the marble surface of the ball. I have a custom brush for that.

Now I and #39;m beginning to create the holes of the ball: we need 3 in total. I use elliptical marquee tool to do this.

Single layer style to create edges:

Now as you know - marble has a very big reflecting value. So we have to do it.

Select the whole ball, press and hold Alt key and extract the area you want to leave within the selection.

Now as my semi part is to find a wood texture to put on the floor of the image. This is the easiest part. Just type in WOOD Texture in Google or in any other search engine you like.

I want to see how it is:

The Pin part. As for the pins, I want to create them using pen tool because I need proper curves, but first I need to make several lines. Do remember that all the pins have different positions.

I did some sketch lines now I want too make them look even better.

Here are my pins surrounded with paths.

To make selection out of the path go to PATCH box (if defaults near the Layers / Channels menu in the bottom right corner). Alt + click on to make it acts like selection.

When the selection is still on create a new layer and cover all the pins with color (white) - use either gradient, brush or any other painting tool.

So the pins have stripes as you know if you played bowling - I didn and #39;t but I know that they sometimes do have horizontally aligned stripes.

Select pen tool and make 2 curves like this.

Alt + click on the path to select the patch area.

Create a new layer and cover the selected area with paint. I used fort edged brush to do it.

I suppose pins are made of wood ....and yeah, they are polished too, so we to create that polish glow.

Make a selection like this - try to follow the areas near the edges, try to understand the volume of the shape.

Something like this: Create a new layer and use white to transparency gradient to make reflection.

Do the same with the rest of the pins: one by one: AND on the ball one too) - select the whole ball extract the area on the bottom and use the white semi opaque gradient.

Now remember to that the ball is near the pins and it has pin reflection of it.

I and #39;ve actually took on pin, transformed it like so it could march the balls form and volume - the edges are not so important here. When you do this select the whole ball layer, do Select inverse command by clicking right mouse within the selection; then type delete.

As for the background adjust the colors and make them more saturated, apply some gradients first and I did also use Airbrush *soft edged brush with a little bit lighter blue in the middle section.

I think that background needs a little bit more attention - use curved brush and just make one vertical stroke. Transform it in perspective (CTRL when transforming) to create dynamic perspective feel.

Make some difference in tones of the floor.

Dotty brushes are good for special effects like blows and something like blows.

So our image is basically done - time to agjust highlights and saturates the image a little bit. Saturate the ball a little bit.

Tap Q to enter quick mask - make this kind of mask (right in the center) - use black to transparency rounded gradient for this.

Tap Q once again to enter the selection mode.

Flatten the image - and the final step will be to apply radial / zoom blur to the selected area.

And we are done!

Final

Thanks for reading this tutorial. I really enjoyed making it. You can view the final image below.

Subscribe to the iPhone AppMobilize Tutorials + RSS Feed for the best Photoshop tuts and articles.

Moto X Mayhem

Valeriu Dodon — Wed, 22 May 2013 09:05:09 +0000

Hello and welcome in making of Moto X Mayhem - (iPhone game) wallpaper. In this tutorial I will show you the way how the original wallpaper or Moto X Mayhem can be made.

So let and #39;s start form choosing the size of our painting area and dropping values on the scene.
Now start making selection with lasso tool and filling them with simple opaque color.

This is a simple method that shows us the basic value points: meaning - it shows the definition of the plains of the environment. And do remember to put each plane on a separate layer.

We need everything to be separated on layers to easily select the whole plain by clicking CTRL + click on the layer and dropping color on each of the plains.

Create the sky by applying blue to transparency layer from sky point to ground.

The clouds were created with PS custom brushes to save time.

I and #39;ve also used selections to refine the edges of the mountains.

It took me quite a lot of time to find the proper font - but the exit was near me all the time.

This is the font and character settings.

...layer stiles too. Note that the color of the - drop shadow and stroke- is the same.

2 capitol M and #39;s are about 5 times bigger than the other characters: 200px.

If you look and the original wallpaper you can see that there are a lot of little rocks there - and they are so beautifully and properly aligned. Did you paint those by hand - one by one? NO! - There is a very easy and interesting way to do that.

Create a new document with the same dimensions as the original image (image we are making).

Create something like funny rock shape.

Apply these layer styles:

Result:

The thing is here that you paint on this layer and the effects will stay. Now we can create nice rocks. Example:

Copy layer style:

And paste it to a new layer on the image.

And paint that rock - but you still have to paint every rock.

Make this selection (like a plant) and create that plant.

The bike stage: it is all simple here - you have to select the area and fill it with color here - It is all about this here. Do this on a separate document or layer.

Let and #39;s start from the wheels.

Make the sketch of the frame:

Make the wheels - stay with initial selection - to transform the selection from the center hold CTRL + SHIFT while transforming.

Make the stars of the alloy wheel - firs draw guide lines to follow with, then create a selection and fill it with color or gradient.

Just cope the star parts and align them properly from the center - it is all done .... Just watch carefully.

Now the wheel protector - create this shape on a new layer. Select the area around it and define it as a brush. Edit and gt; Define brush Preset.

Note that all that matters here is the spacing jitter, so check it for good.

See the effect:

Make a patch around the wheel, go to patch menu and click the stroke the patch button.

Do the same with brake disk.

And about the brakes: create that support be selecting an area and filling it with color.

I and #39;ve just copied the front wheel and make just several transformations to create rear wheel.

Now for the bike and frame of the bike, it is all easy here: Just make selections with Polygonal Lasso Tool. And fill the selections with colors.

As for the rider - the same dial here, but first I and #39;ve created a little sketch to define the proportions of the rider.

We are done here now we can put the rider into the environment. Final

Thanks for reading this tutorial. I really enjoyed making it. You can view the final image below.

Thank you for reading, I hope you found something interesting for you and see you next time.

Subscribe to the iPhone AppMobilize Tutorials + RSS Feed for the best Photoshop tuts and articles.

Create nice wallpapers for the desktop

Valeriu Dodon — Wed, 22 May 2013 09:05:09 +0000

The next lesson I and #39;ll show you how to create nice wallpapers for the desktop.

Firstly we need to represent a new file (File and gt;New) of 1920x1200 px and 72 dpi. Then choose the black color for this layer, applying the Paint Bucket Tool (G) for this operation.

Make a copy of this layer (Ctrl+J) and select Filter and gt;Noise and gt;Add Noise, setting the next demonstrated parameters:

We and #39;ve got the next background:

Then choose Filter and gt;Filter Gallery and gt;Sketch and gt;Bas Relief.

This way we and #39;ll get the texture of the wall:

Fill 50% on the layer

Create a new layer Shift+Ctrl+Alt+N and give it the next indicated color:

Change the layer and #39;s parameters:

We and #39;ll get a dark wall:

Create a new layer, giving it a new color:

Set the next parameters for the last made layer:

It and #39;s the result we must get on this stage:

Next select the Blending Options. Have a left click on this layer on the layers and #39; panel and set the next parameters:

Fill 0% on the layer:

We and #39;ve got a wall with the backlight:

Make a correcting layer on the layers and #39; panel:

Set the next shown parameters:

The background became colder:

Select the Brush Tool (B) of white color and represent a brushstroke of big sizes:

Opacity: 50% for the brush

Change the layer and #39;s parameters with those from below:

Download out of Internet the Apple logotype and place it as below:

Choose the next demonstrated Blending Options:

We and #39;ll get a metallic logo:

Create a new layer and represent a kind if marking like on the picture below and fill it with green color:

Do this operation several times, the same way from below:

Press Ctrl button, click on the logo and #39;s layer and we and #39;ll get a marking. Then click on the mask representation on the layers and #39; panel:

We and #39;ll get a colored logo:

Set for this layer the selection from here: Blending Options and gt;Pattern Overlay. The texture should be selected out of the library Texture Fill 2.

We and #39;ll get a texture on the made logo:

Insert the mask on this layer:

Click on it and give it black color:

Download out of Internet the brushes bloodbrushes2_invaynestock.abr, choosing the one from below of black color:

Not leaving the mask, we and #39;ll represent several spots:

Make a new layer and situate it under the logo and #39;s layer, representing the spots with the brush of white color:

It and #39;s the result you should get:

Change the Fill option on 16%:

We and #39;ll get the next spots:

Represent several new spots on a new layer again:

Change the layer and #39;s parameters:

We and #39;ll get the next result:

Next we and #39;ll create an ellipse on a new layer, choosing the Elliptical Marquee Tool (M).

Have a right click on it and choose out of the menu the Stroke option:

Set for this layer the next Blending Options:

It and #39;s the result we and #39;ll get on this stage:

Then move off the unnecessary elements with the Eraser Tool (E), Hardness 0%.

Now we and #39;ll create a new layer, placing it under the layer containing the logo. Represent a big brush stroke, the same way we did at the beginning of the lesson and set the next demonstrated parameters for the last made layer:

Final

Thanks for reading this tutorial. I really enjoyed making it. You can view the final image below.

Subscribe to the iPhone AppMobilize Tutorials + RSS Feed for the best Photoshop tuts and articles.

How to represent wallpapers on Apple topic

Valeriu Dodon — Wed, 22 May 2013 09:05:09 +0000

This lesson I and #39;ll show how to represent wallpapers on Apple topic.

For the beginning let and #39;s create a new file (File and gt;New) of 1920x1200 px and 72 dpi.

Download out of Internet the texture (download texture), compress it (Ctrl+T) and place it the same way as below:

Make a copy of it (Ctrl+J) and place it near the first one. Put together both layers, selecting them on the layers and #39; panel (Shift+ left mouse click) and then press Ctrl+E.

Make a copy downside and reflect it vertically (Ctrl+T). Right mouse click on the texture and choose Flip vertical.

Put together all the layers and decolorize them (Ctrl+Shift+U). Then press Ctrl+L and set the next parameters from below:

It and #39;s the result you should get:

Download out of Internet the texture we need (download texture) and place it as it is shown below:

Decolorize them and clean out the edges with the Eraser Tool (E).

Let and #39;s make the color inversion, pressing Ctrl+I.

Change the Blending mode on the layers and #39; panel:

As a result we and #39;ve got leaks on the texture:

Next we have to download out of Internet the brush, named GrungeProcedural.abr. Set the parameters as it is demonstrated below: Opacity of 10%.

Paint with black color a new layer as it is indicated below:

... and then white color.

Create a new layer and select the Paint Bucket Tool (G) for it to paint it in brown. The color and #39;s code is indicated on the picture.

Set the next shown parameters for the last made layer:

Download out of Internet the next texture (download texture) and place it as below:

Select the Magic Wand Tool (W), mark out the white zone and then delete it.

Decolorize the layer.

Set the next Blending mode

Download out of Internet one more texture (download texture), placing it as below:

Press M button and make a right click on the texture to get the menu. Here choose the option Color Range. Select white color and press Ok. Then move off the marked white color.

Set the next parameters:

We and #39;ve got a dirty texture:

Now we and #39;ll select the Rectangle Tool (U) and stretch out the rectangle on the whole canvas. Then make a double click on the layer on the layers and #39; panel and choose Blending Options to set the next parameters:

It and #39;s necessary to get the darkening effect along the edges, as in the example below:

Create one more new layer and set the next parameters:

Select the menu next indicated on the layers and #39; panel:

Choose a photo filter and select the next parameters:

It and #39;s the result you should get:

Select the Brush Tool (B) and set its parameters as it is demonstrated next picture: Opacity 40%.

On the new layer we and #39;ll paint the lowest half of the canvas:

Download out of Internet the logotype (download apple logotype) and place it as below:

Select the next Blending Options for the logo and #39;s layer:

We should get some effects that will become visible later.

Download the texture and place it the same way from next picture:

Put the cursor between the logo and #39;s layers and the wood texture, holding on Alt button and make a mouse click. The top layer will become a mask.

The wood texture lays on the logo:

Create a new layer and choose here the Rectangular Marquee Tool (M) to represent a rectangle element, fill it with the indicated color, applying the Paint Bucket Tool (G).

Select the next shown parameters for this layer:
Blending mode

Then transform this layer into a mask.

This operation needs to be done with all the colors.

We and #39;ll get a wood colored logo as a result:

Download the brush, entitled TB_grunge003.abr, giving it the color # FFE9BA.

Create a new layer and represent on it the scratch effect, as in the picture below:

Set Blending Options and gt;Inner Shadow.

This is the result we should get:

This layer must be transformed into a mask:

Create a new layer for the highlight. Choose the brush and set the next parameters for it: Opacity 10%.

Set for this layer Blending mode.

We and #39;ve got the highlight:

Now enter the menu indicated on the next picture, on the layers and #39; panel.

Set the next parameters as on the picture below:

Final

Thanks for reading this tutorial. I really enjoyed making it. You can view the final image below.

Subscribe to the iPhone AppMobilize Tutorials + RSS Feed for the best Photoshop tuts and articles.

Represent nice wallpapers in Apple style

Valeriu Dodon — Wed, 22 May 2013 09:05:09 +0000

This lesson I and #39;ll tell you how is it possible to represent nice wallpapers in Apple style. Create firstly a new file (File and gt;New) of 1920x1200 px and 72 dpi.

Take the Paint Bucket Tool (G) of grey color (#cccccc) to paint the primary layer.

Then select the Rectangle Tool (U) and stretch out the rectangle on the whole canvas. Fill 0% on the layer.

Select by double click on the layer the Blending Options and gt;Gradient Overlay on the layers and #39; panel and set the next parameters:

It and #39;s the result you should get on this stage:

Make a copy of this layer (Ctrl+J) and change the gradient and #39;s direction.

Now we and #39;ll represent a new canvas of 15x15 dpi. Insert two circles inside of it of black color. They may be represented with the Ellipse Tool (U).

Select the next demonstrated menu:

There will appear a window, click here Ok. Then pass on our very first canvas and select the next menu:

Choose pattern in the window:

You and #39;ll get the next result:

Set the next demonstrated Blending Options for the made layer:

You and #39;ll get a darkening effect on the edges:

Let and #39;s represent a new canvas of 80x80 px 72 dpi. Do the same operation we did earlier:

Then select Magic Wand Tool (W) and click between the circles. You and #39;ll get the next marking:

Create a new layer and fill the marking with black color:

The primary layer may be removed and continue working with the last one. Set the next Blending Options for it:

As a result we and #39;ll obtain the effect of metallic grid:

Then select the Brush Tool (B) of any color and represent a rhomb on this layer, painting the openings.

You must get the next result:

Download out of Internet the Apple logotype, placing it on the picture as it is shown below:

Press Alt button and have a left click on the layer containing the logo, on the layers and #39; panel. You and #39;ll get the next marking. Switch on the layer containing the grid and press Delete button. The layer with the logo should be temporary hidden. You and #39;ll get the next result:

Switch on the logo and #39;s layer and set the Fill parameter on 0%. Then select the next Blending Options and gt;Stroke for the layer:

We and #39;ve got the highlight on the metal:

Choose the Brush Tool (B) (Opacity 30%) with the same parameters demonstrated below and draw a kind of shadow on the created layer under the grid and #39;s layer.

You and #39;ll get the next result:

Create another layer, placing it under the layer containing the shadow. Choose the next indicated color for the layer:

Select the next Blending mode as in the example below:

We and #39;ll get the texture behind this layer:

Then select the Brush Tool (B) on a new layer (Blending mode-Overlay) and draw a kind of luminescence on the logo with the white color. The brush and #39;s parameters should be left the same with those of the shadow and #39;s representation.

Create one more layer and place it under the layer with the grid. Try to picture more contrasting shadows on the logo, using the same brush and #39;s parameters.

Click on the grid and #39;s layer and then click with the Magic Wand Tool (W), pressing Shift, on the logotype and #39;s opening, till we and #39;ll get the complete marking. Create a new layer under the layer with the contrasting shadow. Select the Rectangular Marquee Tool (M) and move the marking downside.

It and #39;s the result you should get:

Have a right click on the marking zone and press Ctrl+Shift+I. There will be an inversion of the marking. Take the brush with any color and paint the zone under the rhomb.

Select the next Blending Options for the new layer:

Final

Thanks for reading this tutorial. I really enjoyed making it. You can view the final image below.

Subscribe to the iPhone AppMobilize Tutorials + RSS Feed for the best Photoshop tuts and articles.

The 3G's battery meter for iPhone

Valeriu Dodon — Wed, 22 May 2013 09:05:09 +0000

As an iPhone fan I decided to create wallpaper with cool 3G's battery meter. In this Photoshop lesson, we'll create a detailed icon of a battery similar to the one used for the iPhone touch. Amazing output in the end.

For the beginning create a new file (File>New) having 1920x1200px/72ppi. Then take the Paint Bucket Tool (G) and fill the new background layer with black color.

Then pass on creating the battery. Choose the Rounded Rectangle Tool (U) set Radius to 5px in Options Bar and represent a shape. Fill is set to 0% for this layer on the layers' panel.

On the lateral sides we'll add several anchor points using the Add Anchor Point Tool.

Click on created anchor points and drag it as shown:

We've got the next shape.

Next select the Layer Style. Make a double click on the left mouse's button on this layer on the layers' panel and set the Gradient Overlay as shown:

Next we'll set gradient in Gradient Editor. With red is indicating the Opacity for color stops. Place the color stops as shown:

This way we've got a glass body.

Then select the Pen Tool (P) to represent the lateral element. Set Fill to 0% for the layer.

Next select the Layer Style. Make a double click on the left mouse's button on this layer on the layers' panel and set the Inner Shadow as shown:

Add Inner Glow:

Set Gradient Overlay:

Set the gradient the same way we did at the beginning of our lesson:

This is what we have to get at this stage:

Make a copy of the lateral part by using the shortcut Ctrl+J. Go to Edit>Transform Path>Flip Horizontal and place it on the other side as shown:

Select now the Ellipse Tool (U) and represent the inside element of the battery. Set Fill to 0% for this layer:

Next select the Layer Style. Make a double click on the left mouse's button on this layer on the layers' panel and set the Stroke as shown:

You must get the same thing as in the example below:

Pass on representing the battery's plus element: Make a copy of the lateral part firstly and then resize it with Free Transform option. Using after that the Convert Point Tool, we may adjust the left battery's element.

You must get the next result:

Now we'll represent the indicator of the battery's charge. In this case we'll make a copy of the battery's body and make the appropriate transformations as in the image below. Place this layer under the glass body.

Next select the Layer Style. Make a double click on the left mouse's button on this layer on the layers' panel and set the Inner Shadow as shown:

Add Outer Glow:

Set Inner Glow:

Add Gradient Overlay:

Gradient Editor:

We get almost the made up battery:

The inside elements should be done with the Ellipse Tool (U), which layer will be situated under the layer containing the glass body.

It's the result you should get on this stage:

Now we'll represent the battery's reflection. Make copies of all the layers, except the black background's one and put them all together. Press Shift button as to select out all the layers and then right click on these layers on the layers' panel. Press Ctrl+E to put them together. Next we'll place the batter's copy in the mirror by vertical position using Free Transform options, as it is indicated below:

Choose the Eraser Tool (E) (Opacity 20%) to clean out the bottom part as in the picture below:

Next we'll make a copy of the battery and put together all its layers. On the new layer we've got, select the Filter>blur>Gaussian Blur and set the parameters demonstrated below:

We'll get the next result:

Set Fill to 40% for this layer. Create a new layer again and use the Brush Tool (B) to insert several highlights on the battery with the Opacity of 30% and the parameters shown below:

On the next image there are indicated the appropriate zones for drawing the highlights.

Final

Thanks for reading this tutorial. I really enjoyed making it. You can view the final image below.

Subscribe to the iPhone AppMobilize Tutorials + RSS Feed for the best Photoshop tuts and articles.