HOME | DD

Description

Now, it's easier to use with more features. support two separate icons for a faster and more creative workflow. better icon quality with vector shapes and high-quality preview files. with this Photoshop template file, you can easily create your folder icons for TV series, movies, music, etc in no time. just with drag and drop your pictures and a few steps both icon and preview files will be created automatically.

File format: PSD
program: Adobe Photoshop 2020
resolution: 1024x1024 for icons & 1920x1080 for preview images
size: 177MB Uncompressed (37MB compressed-RAR)

***************
I've added a "how to use" folder that is easier to follow. however, this is the instructions:

1. open the PSD file
2. on the layer tab there are two separate layers that you can use for making icons. double click on the thumbnail of the first layer (Icon 1) to open a new window called "Icon 1"
3. in the new window (Icon 1) double click on the thumbnail of the first layer again (All the layers that need double-clicking have a red mark) to open a new window again called "picture 1"
4. now drag and drop the picture that you want and resize it to fill the icon guides. if you don't see any guides darg the layer that you added below the Guides
5. after resizing, disable the guides layer by clicking on the eye icon beside them.
6. click Save (Ctrl + S) to save changes and close the window (Picture 1)
7. now in the "Icon 1" tab you should see your icon. if you want to mask some content out of the folder shape, mask them by enabling the second layer called "masking layer" and select the unwanted areas and color them black in the layer mask
8. now click Save (Ctrl + S) again to save changes and close the window (icon 1). it may take some time to update the smart objects.
9. steps are similar for "Icon 2" layer
10. after finishing your art click on the "File>Export>Export As" to Export all the Artboards. Export "Icon 1" And "Icon 2" in PNG format with transparency and for the preview files choose JPG with %76 quality (%76 is the best balance between size and quality for web)
***************

for converting your icons to ICO (native windows icon format) you can use these free online tools:

ONLINE-CONVERT

RedKetchup

***************
Red flagged layers: layers that you should click on their thumbnail (smart objects)
Orange flagged layers: layers that I added to make the Preview pictures look better. you can disable them.

I use bilinear interpolation for my documents because I think it looks better for downsampling photos without adding white halos on the edges (unlike bicubic). I prefer bilinear for graphic design but not for photo editing. if you want to use bilinear in photoshop go to the preferences menu and in the general tab change the Image Interpolation to Bilinear.
***************

these are some icons that I've created with this mockup:
Example 1
Example 2
Example 3
Example 4

check out the older version of my folder icon mockup HERE!

I hope y'all get it right. Any doubts, feel free to ask.
Hope you enjoy it.

Description

Now, it's easier to use with more features. support two separate icons for a faster and more creative workflow. better icon quality with vector shapes and high-quality preview files. with this Photoshop template file, you can easily create your folder icons for TV series, movies, music, etc in no time. just with drag and drop your pictures and a few steps both icon and preview files will be created automatically.

File format: PSD
program: Adobe Photoshop 2020
resolution: 1024x1024 for icons & 1920x1080 for preview images
size: 177MB Uncompressed (37MB compressed-RAR)

***************
I've added a "how to use" folder that is easier to follow. however, this is the instructions:

1. open the PSD file
2. on the layer tab there are two separate layers that you can use for making icons. double click on the thumbnail of the first layer (Icon 1) to open a new window called "Icon 1"
3. in the new window (Icon 1) double click on the thumbnail of the first layer again (All the layers that need double-clicking have a red mark) to open a new window again called "picture 1"
4. now drag and drop the picture that you want and resize it to fill the icon guides. if you don't see any guides darg the layer that you added below the Guides
5. after resizing, disable the guides layer by clicking on the eye icon beside them.
6. click Save (Ctrl + S) to save changes and close the window (Picture 1)
7. now in the "Icon 1" tab you should see your icon. if you want to mask some content out of the folder shape, mask them by enabling the second layer called "masking layer" and select the unwanted areas and color them black in the layer mask
8. now click Save (Ctrl + S) again to save changes and close the window (icon 1). it may take some time to update the smart objects.
9. steps are similar for "Icon 2" layer
10. after finishing your art click on the "File>Export>Export As" to Export all the Artboards. Export "Icon 1" And "Icon 2" in PNG format with transparency and for the preview files choose JPG with %76 quality (%76 is the best balance between size and quality for web)
***************

for converting your icons to ICO (native windows icon format) you can use these free online tools:

ONLINE-CONVERT

RedKetchup

***************
Red flagged layers: layers that you should click on their thumbnail (smart objects)
Orange flagged layers: layers that I added to make the Preview pictures look better. you can disable them.

I use bilinear interpolation for my documents because I think it looks better for downsampling photos without adding white halos on the edges (unlike bicubic). I prefer bilinear for graphic design but not for photo editing. if you want to use bilinear in photoshop go to the preferences menu and in the general tab change the Image Interpolation to Bilinear.
***************

these are some icons that I've created with this mockup:
Example 1
Example 2
Example 3
Example 4

check out the older version of my folder icon mockup HERE!

I hope y'all get it right. Any doubts, feel free to ask.
Hope you enjoy it.