The Icon Deposit Blog

Responsive Icon Set Now on Creative Market!

Responsive Icon Set by Matt Gentile

Just created yet another huge icon set called the "Responsive Icon Set". It's now available for sale on Creative Market

The Responsive Icon Set includes the following:

  • 156 pixel perfect icons in total
  • .svg files
  • .png files in 4 sizes, 24x24, 48x48, 96x96, and 192x192 pixels
  • .psd files

Everything is entirely vector and can be scaled to any size if needed.

Purchase it Here

Developer Icon Set - Now Available!

developer_icon_set_-_available.png



Started selling an Icon set for once, so I'm proud to present the "Developer Icon Set". The set comes with 108 custom vector shapes in PNG format in 4 different sizes 16x16, 32x32, 48x48, and 64x64 pixels. PSD format in all 4 sizes and .CSH format (custom vector shapes). Everything is entirely vector and can be scaled to any size if needed, even larger then 64x64 pixels. Best of all it's only $5.

Creative Market (where it's being sold) is now open to the public so you can purchase it here: https://creativemarket.com/IconDeposit/725-Developer-Icon-Set

Popular Pages And Job Posts

Popular Pages And Job Posts

This blog post is about some updates on IconDeposit because it's been a while since our last blog post. First things first, we've updated the site to have a Popular Posts page in all major categories, as well as add an extra navigation bar below the breadcrumb navigation, that displays the Popular posts of the current category or page as well as, Recent Posts, Members of the site, Designers that have uploaded something before as well as an Upload link. This will give everyone a chance to get seen on the site and it should make it a little easier to navigate throughout the site.

Our next step is to add a Job section on the site. Yes, we will be charging per Job post listing on our site, however it shouldn't be too expensive. Each Job post will stay up on the Job Category for 30 days and you will get to display your Job post to over 500,000 single viewers each month. We plan on releasing this part of the site next month. So we will update everyone when this happends.

We even plan on releasing and IconDeposit store, so people can purchase top notch quality designs, stock photography, vector work, icons and more! This should be released before Christmas!

Follow us on Twitter to stay updated on the newest releases.

Newest Icon Deposit Features

id_new_1.png

Today was a fantastic day, I finally implemented the long awaited image color palette grabber. Every time you upload your work or images to the Icon Deposit, a color palette is automatically created from the image that was just uploaded. With some unique Javascript software you can now automatically see the "Most Dominant Color" and a full "Color Palette" of the most used colors from your image!

If you are using Google Chrome, hover over one of the colors picked out of your image in the color palette below the image. As you are hovering over that specific color, "Right Click" the color. Then choose "Inspect Element", you can also see the CSS "Hex Number" of that color which was automatically grabbed out of your image!

I Hope everyone likes the new feature! Comments and Feedback are always welcome :)

Here are some extra image previews:

First Look at "Icon Deposit Themes" and the New "Creative" Wikidot CSS Theme

I've been developing a Wikidot App called "Icon Deposit Themes" where you can upload and create anything from a Wordpress Theme to a Wikidot CSS Theme, the Application will be released shortly in Beta Mode for Facebook Users, Icondeposit Members, and Wikidot Users. For the 1st Beta version of this App, once you create your page, you will be able to edit and create your CSS theme by filling out a simple page data form with a unique Wikidot live category template to create the theme for you. All you need to do once the form is complete is click the "save" button, you will then see your new CSS theme complete in our own Wikidot Theme Preview mode. The First Beta Mode will just be for editing and creating Wikidot CSS Themes, but don't worry, in Beta 2 you will be able to upload anything Wordpress themes to Wikidot CSS themes.

In the process of creating "Icon Deposit Themes", here is the First Look of my new Wikidot CSS Theme "Creative". The following teaser video screencast that I took shows how the "New Message Notification" looks when you have a new private message and the page loads or refreshes (Pure CSS3 -webkit- animation and -moz-animation). It also show's for a brief moment how the Creative Logo looks when it's hovered over. Take a look:

Expect the new "Creative" Wikidot CSS theme to arrive some time next week with tons and tons of Unique features. Keep in mind that the video above was filmed while I was using the Google Chrome Browser. This theme is going to look fantastic in Google Chrome, but still works in all browsers at the same time, it will be availabe for all Google Chrome, Safari, Firefox, IE, and Opera Browsers, but like I said, it looks great in Google Chrome.

How To Create Knob And Dial Scratches Using Photoshop (Tutorial)

How to create knob and dial scratches using photoshop

This is an extremely useful, well very useful Photoshop tutorial. In this Photoshop tutorial, I will show you how to make some elegant and highly detailed Knob and or Dial scratches. This is a beginner, to intermediate photoshop trick, so you kind of have to know your way around photoshop to create this stylish effect. This tutorial is also for creating a knob or dial (more than just the scratches).

Step 1

Lets start this tutorial by creating a new photoshop document. Make the width 400px and make the height 300px with 72ppi and in RGB color like so:

Step 2

Next, lets create some new guides to keep everything centered, tutorials usually lack to say what guides to make, so in this one I will show you what guides to make. Go to View>New Guide. Then create a vertical guide of 50%, and create a horizontal guide of 50%. This will keep everything in line and in the center. Lastly, go to View, then make sure the Snap is checked. Then you will get something looking like this:

Step 3

Next, grab the Ellipse tool (U) and create a circle shape to about this size:

Step 4

Next, we will double click on the shape's color (next to the shape in your layers palette), and make the shape the following color: #CCCCCC, the color is used in image for the step above:

Step 5

Now to create the knob or you can call it a dial if you'd like to. Okay, so lets double click on your shape in the layers palette, bringing up the Blending Options, or you can go to Layer>Layer Style>Blending Options. For step 5, click on the Drop Shadow layer style. Make the Blending Mode normal, then make the opacity 15%. Next, when changing the Angle, Make Sure you uncheck the Global light, once you have done that you can make the angle at 56deg (degrees). Next, you will need to make the distance of the drop shadow to 2px (pixels). Then keep the Spread at 0%, then make the Size to 10px. Then make the Contour similar to the one in the picture below. Keep the Anti-aliased unchecked, and then keep the noise at 0%. Make sure the color is at #000000 (black) Your Drop Shadow Layer Style should look like this:

Step 6

We will make the next layer style, for this one, make sure the Inner Glow layer style is checked. To style the Inner Glow, we will need to make the Blending Mode normal, keep the Opacity at 100% and the Noise at 0%, then make the color #FFFFFF (white). Keep the Technique at Softer, have the Source at Edge. Then keep the Choke at 0%, and make the Size 3px. Then keep Contour normal like the one in the photo below, and keep the Anti-aliased unchecked. Then make the Range at 50% and the Jitter at 0%. Your Inner glow should look like this:

Step 7

Now to create a nice Bevel and Emboss. You need to make the Style and Inner Bevel, make the Technique Smooth, keep the depth at 100%, make the Direction Up, make the size 1px, and keep the soften at 0px. For the Shading, make sure the Global Light is unchecked, then make the Angle 111deg, and the Altitude 42deg. For the Contour, make it normal like the one in the image below, the Anti-aliased should be unchecked. For the Highlight Mode keep it Normal, make it a white color (#FFFFFF) and slide it to 100%. For the Shadow Mode keep it Normal, make it a black color (#000000), and slide it to 32%. Your Bevel and Emboss Layer Style should look like this:

Step 8

Lets now finish the knob layer style with creating an elegant Gradient Overlay. Keep the Blending mode Normal, and make the Opacity 100%. Next, to create this specific gradient you must copy the following. This is read from Left to Right so pay close attention. There should be 9 total Color Stops for this gradient. The First (1st) color stop should be color #AAAAAA (grey) and have a location of 0%. The Second (2nd) color stop should be color #f7f7f7 (light grey) and have a location of 9%. The Third (3rd) color stop should be color #C8C8C8 (gray) and have a location of 14%. The Fourth (4th) color stop should be color #F7F7F7 (light grey) and have a location of 31%. The Fifth (5th) color stop should be color #C5C5C5 (gray) and have a location of 51%. The Sixth (6th) color stop should be color #FFFFFF (white) and have a location of 57%. The Seventh (7th) color stop should be color #BBBBBB (grey) and have a location of 63%. The Eighth (8th) color stop should be color #F2F2F2 (light grey) and have a location of 75%. The Ninth (9th) color stop should be color #AAAAAA (grey) and have a location of 100%. Lastly, let's keep the reverse unchecked, the Style should be at an Angle, align it with the layer, and make the angle at -132deg and scale the gradient to 100%. In the end, your Gradient Overlay should look like this:

Step 9

Now that the knob/dial is done, we can finally create the Scratches (scratched/etched effect). You will need to go to the tab "Paths", this should be above your Knob/Dial layer. After you click on the Paths tab, select the knob layer by Loading the Path as a Selection, this will select the knob layer. Next (wile keeping the selection, Do not deselect it, if you do happen to deslect it just reselect Shif+Ctrl+D), create a New Layer (Shift+Ctrl+N). Then grab the Bucket tool (G) and fill the layer (inside the selection) with the foreground color #FFFFFF (white), and make sure it's at 25% when you do the Bucket Fill, keep the blending mode normal before you fill it.You should get a light white transparent layer like so:

Step 10

Then go to Filter>Noise>Add Noise. You will need to make the noise amount 400% and make the distribution, Uniform. Make sure the Monochromatic is checked. Your noise layer should end up like this:

Step 11

Now to make the Noise "Spin". You will now have to go to Filter>Blur>Radial Blur. Make the Amount 30, for the Blur Method select Spin, and for the Quality, keep it at best.You should end up with this:

Step 12

For the Grand Finale, let's add some better detail and polish it up a bit, it's very quick, nothing long. For the Scratch layer, make the Opacity 80% (not the Fill opacity, just the regular layer opacity). Then Switch the Blending mode (for the layer) from Normal to "Color Burn". You should end up with this:

That about sums it up, I hope you enjoyed my tutorial on How To Create Knob And Dial Scratches Using Photoshop! Please comment and let me know if you liked this tutorial or if this helped you out in some way.

License: Creative Commons Attribution 3.0

- Re-sale and or Re-distribution is forbidden.

- Remember to link back to Icondeposit.com or this post if you are using this elswhere.

The file for this includes the whole tutorial as well as the PSD for the finished image.

Head over to the "Design Category" to download the file: https://www.icondeposit.com/design:dial-version-3-includes-tutorial

page 1 of 41234next »
Copyright © 2011-2019 Icon Deposit - All rights Reserved