Dock icon reflections with Nova Launcher

[andy1223]

I'm not sure if many folks still like the shiny and reflective dock icons since the trend seems to be flat icons now. But I still like the look and was disappointed to find that Nova didn't have this option. So I kept looking and found at least one way to to do it. See screenshots below.

I'm no expert at tweaking launchers, but I have tried a few since I got the Note 3 a few weeks ago. I liked Nova the best and went ahead and upgraded to Prime (but I don't think you need Prime for this to work). I liked the scrollable docks option in Nova, among its many other features, but the one thing I couldn't get it to do was reflective dock icons on the home screens. As far as I know, ADW is the only launcher that has this feature. I tried ADW and liked it also, but it didn't have the option for scrollable docks like in Nova, at least not in the free version I tried.

So I searched forums on how to get the reflective icons in Nova and got advice from others, until I finally came up with at least one way to do it. It's nothing ground breaking and I know I'm not the the first to figure it out. But I couldn't find any other posts about it, so I'm posting now in case others are interested.

I want to say first that when I was still new to Nova's settings, I was thrown off by the 'Mirror' option in the launcher's 'Dock Style' > 'Fill Mode' settings. When I saw that option I assumed it would enable a mirror-like reflection on the dock image to reflect the dock icon images. I was wrong. Apparently, the 'Fill Mode' options, including the 'Mirror' option, are only enabled once you choose an image, like say from the Gallery, to 'fill' the dock image. Anyway, this was not what I thought it was.

So to put it very simply about how to make this work, all you have to do is:
1. find a glass-like image to use for the dock and adjust its transparency
2. use icon images that you have edited to include the partial reflection
3. use Nova's option to edit icons and change the dock icons to the new icons with reflections

It sounds easy enough and I would agree the steps are easy to do, but there are several sub-steps to take, especially for step 2.

And since this post is already long enough, I'll just include some screen shots of what I came up with. If anyone is interested, I'll be glad to provide more detail and list some free tools I used to create the reflective icons.







Oh btw... I used several online sources, including Google Images, to find shiny icon png images and wallpaper pics. If I used one of your icons or wallpaper photos, thanks for making it available online. And thanks to those who helped me figure out how to create the images with reflections.

 

[Haalcyon]

Thanks for sharing.

 

[ncphotographer]

I would love to know exactly how you did it please. Thank you!!

 

[andy1223]

Ok, I'm trying to remember the steps... Like I said, I'm no expert at working with graphics or tweaking launchers but I'll try to list the steps I used on my Note 3.
(P.S. I knew it would take a little typing but I didn't realize it would take this much. These steps look overwhelming but they're really easy and don't take long at all once you figure out how to do the first one.)

For step 1: I used a glass-like dock image that was included with the DCikonZ icon pack. I downloaded the pack looking for different icons and it just happened to have a dock image I liked. I'm sure you can find more or even create one yourself. I think the dock images and the icons have to be in the PNG format, but I could be wrong.

Once you have a dock image, I'm sure you know how to enable the dock within the Nova settings, but just in case...

1. Go to Nova Settings > Dock > Dock Style
2. Tap the On toggle at the top right to enable the dock image.
3. Tap the background image. This lets you choose an image from the Gallery or Built-In images.
4. If you scroll past these you should see the DCikonZ images, or any other icon pack images you have installed. Tap to select one.
5. While still in the Dock Style settings, you can also choose the Shape and Transparency of the dock image. I'm using Arc and 0%.
6. Tap Done when your finished.
7. Then check Enable Dock in the Dock settings page.

(At the very end, after you have the modified icons with reflections on your phone, you'll also want to play with the other Dock settings like Dock Icons, Width Margin, Dock Height, etc.)

For step 2: The basic idea is that you'll consider which apps you want on your dock, then find the matching icons you want to use, and edit them to add the partial reflection. Then you just use Nova's settings to replace the dock icons with the new icons with reflections.

I'm pretty sure the icons you find should be in PNG format. Again I'm no expert but I think the PNG format allows for transparent backgrounds. I used free icon download sites like softicons.com, iconarchive.com, and iconfinder.com. There will probably be different file sizes to choose from. I tried to use the 128x128px size whenever I could.

Editing the icons: I did the image editing on my PC and then sent the modified icons to my phone. You'll need a photo editor that works with PNG images. I used a free download photo editor called Inkscape. It worked well, but I remember having to spend a little time learning how to use the program. You'll want to open the PNG icon image in the editor and crop it to reduce the border size. Depending on the icons you use, some may have larger borders than others. The border being the space from the edge of the icon to to edge of the background, which should be transparent. The smaller the border, the less space there will be between the icon and it's reflection. For example, if you crop the icon image so that there is no border on the bottom, then the reflection will touch the icon.

After the icon is edited to reduce the border, you'll need to be sure to re-save it as a PNG file.

Tip if using Inkscape: I can't remember exactly how to crop an image using Inkscape so you may have to Google that, but I think I can save you some time when re-saving the file as a PNG. But first you'll need to re-size the image page after cropping...

1. After you have cropped the image to reduce the border, go to File > Document Properties > Page tab > Custom size section and click the plus beside Resize page to content...
2. Click Resize page to drawing or selection
3. Then close Document Properties

The method for saving the file as a PNG with a transparent background in Inkscape is not very intuitive. I thought I could simply go to File > Save As and choose the PNG file type, but this did not work. The only file type to choose from is Cairo PNG, and it saves the image with a white background. So here's how to save it as a PNG with a transparent background...

1. Go to File > Export Bitmap
2. Click Browse and choose a file name and location to save the file. It should show PNG as the file type.
3. Click Save and then click Export. This should save the PNG with a transparent background.

Adding the reflections: This is the easiest part, thanks to the folks at GenerateIt.net. They have a free tool on their site that allows you to upload a PNG image, generate an attached reflection to the image, and then re-save it as a PNG with a transparent background. The tool is located at www.generateit.net/reflection/index.php.

The steps here are easy and self-explanatory. You can choose your cropped icon PNG file, then choose the percentage of reflection you want, then choose transparent background, and then save the modified image as a PNG to a file location of your choice.

You may have to do it a few times with the first icon, then test it by adding it to the phone to see which percentage of reflection works best for you. For example, if you choose 50% then obviously the reflection will be half of the icon image. For me I think 50% was too much because the reflection extended past the glass dock image. I think I had to use 25% to keep the reflection on the glass.

One more thing to consider when generating the reflection... if you choose a higher reflection percentage it will make the overall image taller. And since the dock icon size is limited in Nova, to accommodate the taller image it reduces the size of the overall image resulting in a smaller dock icon. You'll have to play with it to see what I mean.

Step 3: Finally you'll need to save the modified PNG icon image to your phone and use Nova's settings to change the dock icons to the new icons with reflections. Since I edited the icons on my PC, I found it was quick and easy enough to email the icons to my phone. I then saved the icon email attachments on my phone, which saved into the Download folder in the Gallery. I guess you could also transfer them to the phone with the USB cable connected.

To switch to the new icons in Nova...

1. Add the apps of your choice to the dock (the ones you created the new icons for).
2. Then tap and hold on each dock icon to access the edit icon menu.
3. Tap Edit and go to the location on your phone where you saved the new icons. For me it was Gallery > Download.
4. Tap the icon you want and it should take you to the Crop Image screen. There's no more cropping but instead you'll want to select the whole image.
5. So tap the Crop icon at the bottom and choose Free.
6. Then drag the dot handles on the image to select the whole image including the reflection.
7. Tap OK, then tap the check mark and you should see the reflected icon on the dock.

That's it, easy right? Ha

Like I said earlier, once you have the reflected icons on your dock, you should play with the other Nova Dock settings like Dock Icons, Width Margin, Dock Height, etc. These settings will let you adjust the size, spacing, and overall look of the dock and icons.

Again, it's much easier than it looks here. Once you figure out how to do the first one you can fly through the others. If you give it a try and you think I left out a step or you get stuck, just let me know and I'll try to help.