Iconshock Sophistique Inspiration, Part 1

We are always looking for some inspiration. Today I’m looking on iconshock stock icons, on their Sophistique general icons set. This tutorial is the first part of Sophistique set related tutorials.
The final result is the bonus for you - Free Icon Set (PSD/20 icons)
Sophistique Inspiration Icon Set Preview


This PSD was downloaded 1833 times.


We are starting from the nice symbols from Sophis set.
Here’s the screenshot of PDF sapmle. So let’s play with this symbols.
Original Pdf Screehshot


At first, create a blank document (File->New or Ctrl+N), width - 200px, height - 200px. You can set the white background at “Background Contents” option or simply fill the default layer.
Blank document, white filled layer
Next - create a new layer (Layer->New->Layer… or Ctrl+Shift+N). Pick “Elliptical Marquee Tool”, select circle holding Shift, something like that:
Circle Selection
Then you can fill selected area (”Paint Bucket Tool”) with some color to play with layer styles.
Fill selected area
Go to layer styles (Layer->Layer Style->Blending Options or doubleclick on layer) and apply “Inner Shadow” with such options
Apply Inner Shadow
Next - create smaller circle in the center of bigger one. Ctrl+Click on the circle layer icon to select all the layer area. To center the selection simply hold Shift+Alt while modyfiyng selection (Select->Transform Selection). Something like that:
Transform Selection
Now you can create a new layer for the smaller circle, of course you were able to create that layer earlier (when selecting the new area). Fill the layer with some color and go to layer “Blending Options”. We’ll apply “Inner Shadow” and “Color Overlay” to make a little glass effect. The inner shadow color: #003483 and the color overlay: #dbe0e3.
Apply Inner Shadow to Smaller Circle
Next step - to improve background circle. Select smaller layer (Ctrl+Click on layer icon), go to Select->Modify->Contract and Contract the selection with 1 px. The next - select background circle layer and hit del to delete unnecessary area. Now you will see
Improved Background Circle
To add glass effect we will add a new gradient layer.Gradient Options Create a new layer and select smaller circle area (Ctrl+Click on layer icon), then pick Gradient tool with a white foreground color. Start to drag gradient from the center of the circle.
Drag Gradient to top (holding Shift)
The result:
The Gradient Result (More Glass Effect)
And now, the hardest part - creating the crystal swirl. Pick the “Pen Tool” and select the area to modify:
Select Area using Pen Tool
Click on the center of the bottom border and drag mouse to the bottom-right to make a symmetric swirl:
Modify Selected Area
Now you are able to cut off unnecessary space. Rasterize the layer (Layer->Rasterize->Layer or right-click on the layer), select the smaller circle area and invert selection (Select->Inverse or Ctrl+Shift+I) - you wil see something like that:
Inverted Selection, swirl
Hit Del to remove selected part of the layer, and make it a little smaller (Edit->Free Transform):
Little Smaller Swirl
After applying the transformation, apply a fade out effect to the swirl. You can do it by adding the layer mask and Gradient Tool. So, add the layer mask (little icon at the layer menu) and select rectangle area around the layer. Add Layer Mask IconNow pick the Gradient tool (you will notice foreground/background colors switched to white/black, also note the gradient options). Layer Mask Gradient OptionsNow drag the mouse to the top and you will see your swirl fading out, like here:
Mask Applied, layer fading out
Finally, the last step - add the “i” symbol (place it under the swirl layer, “Times New Roman”, 157pt) with the following layer styles (”Bevel and Emboss”, “Gradient Overlay”, “Stroke”):
“I” symbol gradient options
Bevel and Emboss, “i” symbol
That’s it. Enjoy.
Final Result
Don’t forget to download the icon set. And wait the next part of Sophis tutorial.

10 Responses to “Iconshock Sophistique Inspiration, Part 1”

  1. very nice

  2. […] The Not Simple Solutions tarafından göz kamaştırıcı ikon yapımı proje dosyaları ile birlikte bir eğitsel. […]

  3. Thanks Love the swirl. Instead of scaling in the the two sections you might try select>modify-contract or add by pixels. I use it quite a bit and it works great.

  4. Hey!

    Nice tutorial. Only thing is that I cant rasterize it for some reason :S

    Any suggestions?

  5. to Bill K. Anderson - simply rightclick on the layer you want to rasterize (if it’s shape ofcourse) and select “Rasterize”.

  6. Great Tutorial

  7. […] Not Simple Solutions ‘dan göz kamaştırıcı ikonlar ve eğitsel. yazar Yenibelge | Kategorilenmemiş | Geri izleme | RSS […]

  8. Great Tut!
    Thanks for sharing
    DM

  9. nice job, thx alot

  10. best i don’t have any word’s to explain thanks a lot. friend.

Leave a Reply