Photoshop Tutorials

Learn tips and tricks, cool effects, and how to use the Photoshop tools more effectively


Loading Interface - part 1


Sick of the loading interface? Learn how to make rich loading interface with blending modes, gradients, and tons of layers.

Download out of Internet the same texture, like the next one, having 1280x1024 px and 72 dpi.

Create Loading Interface in Photoshop CS3

Press CTRL+SHIFT+U

Create Loading Interface in Photoshop CS3

Set the next parameters for the above downloaded texture’s layer by making a mouse click on the layer we work with in the layers’ panel: Blending Options>Gradient Overlay

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3

Next we shall use the Ellipse Tool (U)

Ellipse Tool (U). "" Use the ellipse tool to draw ovals and circles. To draw a circle, hold down the Shift key while dragging. Double-click the ellipse tool to open the Color inspector.'); return false">Ellipse Tool (U)
to represent the primary layer of an abstract element:

Create Loading Interface in Photoshop CS3

The layer’s parameters: Blending Options>Outer Glow

Create Loading Interface in Photoshop CS3

Blending Options>Inner Glow

Create Loading Interface in Photoshop CS3

Blending Options>Gradient Overlay

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3
Loading Interface - part 2


Blending Options>Stroke

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3

Next try to represent a circle, colored with #565656. It’s necessary to use for the beginning the Ellipse Tool (U)

Ellipse Tool (U). "" Use the ellipse tool to draw ovals and circles. To draw a circle, hold down the Shift key while dragging. Double-click the ellipse tool to open the Color inspector.'); return false">Ellipse Tool (U)
to represent the outside edges and then press Alt button to cut out the inside element’s part, applying the same tool.

Create Loading Interface in Photoshop CS3

The layer’s parameters: Blending mode-Lighten
Blending Options>Inner Glow

Create Loading Interface in Photoshop CS3

Blending Options>Bevel and Emboss

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3

Using the already known Ellipse Tool (U), try to create the next layer, belonging to the same element:

Create Loading Interface in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Blending Options>Stroke

Create Loading Interface in Photoshop CS3
Loading Interface - part 3


Create Loading Interface in Photoshop CS3

Use the last applied tool to represent the next layer, belonging to the same abstract element we want to get finally:

Create Loading Interface in Photoshop CS3

The layer’s parameters: Fill 0%
Blending Options>Drop Shadow

Create Loading Interface in Photoshop CS3

Blending Options>Inner Glow

Create Loading Interface in Photoshop CS3

Blending Options>Gradient Overlay

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Blending Options>Stroke

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3

Select the Rectangle Tool (U) for the next step to draw a vertical black stripe, crossing the central part of the colored circle:

Create Loading Interface in Photoshop CS3
Loading Interface - part 4


Make twenty - three copies of this last made layer and select Free Transform option to turn the copies around their axes on a certain angle:

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3

Combine in a group all the layers containing the black lines (press Ctrl button to mark out the corresponding layers and hold on the left mouse’s button to take the accentuated layers on Create a new group selection). Apply the next indicated parameters for the new group: Opacity 20%

Create Loading Interface in Photoshop CS3

Make a copy of the last made group containing the black lines. We need to get back the Opacity option on 100% on the copied group, erasing on the copy all the lines, except those shown below:

Create Loading Interface in Photoshop CS3

Select the Ellipse Tool (U)

Ellipse Tool (U). "" Use the ellipse tool to draw ovals and circles. To draw a circle, hold down the Shift key while dragging. Double-click the ellipse tool to open the Color inspector.'); return false">Ellipse Tool (U)
to represent the next layer of the abstract element on the central part of the colored circle:

Create Loading Interface in Photoshop CS3

The layer’s parameters: Blending Options>Outer Glow

Create Loading Interface in Photoshop CS3

Blending Options>Gradient Overlay

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Blending Options>Stroke

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3
Loading Interface - part 5


Try to make one more circle, choosing the same Ellipse Tool (U)

Ellipse Tool (U). "" Use the ellipse tool to draw ovals and circles. To draw a circle, hold down the Shift key while dragging. Double-click the ellipse tool to open the Color inspector.'); return false">Ellipse Tool (U)
. Firstly we’ll represent the outside edges of this circle and then when pressing Alt button, applying the mentioned tool, it’s possible to cut out the middle part of the circle and after that cut out one more part of the same circle, like it is represented below:

Create Loading Interface in Photoshop CS3

The layer’s parameters: Fill 20%
Blending Options>Drop Shadow


Create Loading Interface in Photoshop CS3

Blending Options>Gradient Overlay

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3

Use the Pen Tool (P)

Pen Tool (P). "" allows you to make lines that change colour and shapes on the project.'); return false">Pen Tool (P)
, for drawing the next layer of the abstract figure. Its shape may be corrected with the Convert Point Tool.

Create Loading Interface in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Create Loading Interface in Photoshop CS3

Blending Options>Gradient Overlay

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Blending Options>Stroke

Create Loading Interface in Photoshop CS3
Loading Interface - part 6


Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3

Select once again the Pen Tool (P)

Pen Tool (P). "" allows you to make lines that change colour and shapes on the project.'); return false">Pen Tool (P)
to picture a highlight of white color which shape is possible to correct with the Convert Point Tool.

Create Loading Interface in Photoshop CS3

Choose the next demonstrated parameters for the layer: Fill 20%

Create Loading Interface in Photoshop CS3

Select the same Pen Tool (P) to create a triangle which shape must be corrected with the Convert Point Tool.

Create Loading Interface in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Loading Interface in Photoshop CS3

Blending Options>Gradient Overlay

Create Loading Interface in Photoshop CS3

Gradient’s parameters:

Create Loading Interface in Photoshop CS3

Blending Options>Stroke

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3
Loading Interface - part 7


Applying the earlier chosen instruments (Pen Tool (U) and Convert Point Tool), it is possible to draw another highlight of white color:

Create Loading Interface in Photoshop CS3

Set the next parameters for the last made layer: Fill 17%

Create Loading Interface in Photoshop CS3

Now we shall use the Ellipse Tool (U)

Ellipse Tool (U). "" Use the ellipse tool to draw ovals and circles. To draw a circle, hold down the Shift key while dragging. Double-click the ellipse tool to open the Color inspector.'); return false">Ellipse Tool (U)
to draw a highlight of white color. Next there will be used the Add Anchior Point Tool to insert a top on the bottom part, as it is shown next image and then make the appropriate corrections the same way from below:

Create Loading Interface in Photoshop CS3

The layer’s parameters: Fill 20%

Create Loading Interface in Photoshop CS3

Create a new file (File>New) of 4x4 px and 72 dpi. We shall use on it the Pencil Tool (B)

Pencil Tool (B). "" To use the pencil tool, simply select it from the toolbar by depressing the pencil tool icon. When you do so, you can draw on the canvas. Try it out. And don\'t forget to modify your brush size, roundness, angle, etc ...'); return false">Pencil Tool (B)
(brush 1 px) to represent the same pattern from next picture of white color.

Create Loading Interface in Photoshop CS3

Edit>Define Pattern
Next step includes using the Ellipse Tool (U) on a new layer (Create new layer) on which must be inserted the last made pattern.

Create Loading Interface in Photoshop CS3

The layer’s parameters: Opacity 20%, Fill 0%
Blending Options>Pattern Overlay

Create Loading Interface in Photoshop CS3

Create Loading Interface in Photoshop CS3

The loading interface is finished!

Subscribe to: Posts (Atom)