• Introducing XDA Computing: Discussion zones for Hardware, Software, and more!    Check it out!

[Theme] misaClean - Tutorial

Search This thread

pnyboy27

Senior Member
Nov 19, 2009
162
65
misaClean Theme - Tutorial
qtJnE.jpg


Video below
http://youtu.be/sVGO_NuJAmw

To start things off, this is going to be my first tutorial on making a theme. This is actually my first theme I've really made. To be honest, I was actually quite surprised at how many people were interested in my theme and how I created it. Since I had quite a bit of response to it, and people wanting to create theirs, I decided to create a tutorial so that anyone could either copy what I did, or use my idea as a base to create their own unique theme. Before I get started, I would like to thank Deusex74 for creating the theme that inspired me to create my own. So without much further ado, let's begin the tutorial! =)

Apps needed:
Weather: Eye In The Sky
Home Calendar: Jorte
Church Calendar: Simple Calendar
Clocks: Zooper
Launcher: Apex Launcher or Nova Launcher, or any other launcher that will allow you to resize the grid, and have shortcuts that will allow you to go to certain pages.
Icons: Desktop VisualizeR
Wallpaper: MultiPicture Live Wallpaper

Programs:
Photoshop, or something similar would be great. I guess you could also make this in paint, but the editing program is up to you.



First thing I did was decide on how many spaces would be in my grid to fit everything I wanted and not look too crowded. I created an empty screen, removed the dock, and took an icon and placed it on the screen. After holding it, a grid with crosshairs pop up, once that popped up, I took a screen shot.
j4BAP.png


Next step is to take that screenshot and open it in Photoshop. You then have the correct resolution for the screen, and the grid for the layout. Open the rulers (Cmd+R or Ctrl+R), and drag out guideline from the ruler to each of the cross hairs. Once it's completed, it should look like this.
HBqvX.png

You now have the basic grid on how icons will fit on your screen.

From here, you can choose how big you want the picture to be to fit on the screen. After determining that, and placing it on your screen, it should look like this:.
mIXKB.png


Determine how many tabs you want, and how big you want them to be. For me, I wanted only 3 tabs to have 3 pages. If you want more, you might need to tweak the amount of your grid size so that the icons you will use to direct to each page, will fit. Remember, we still need to have icons that will direct you to the right page.
So since I only had 3 tabs, I wanted to make the home tab the largest and in the center, taking up 3 spaces, while the others only took 2 spaces.
zfZJi.png


After setting those up and creating your dividers, you can create the colored bar to span across the page just above your tabs. It should now look like this with the guide lines turned off
jHUY9.png


That's all there is to making your first page. After that, just copy that and repeat for your next pages. Your layout should look like this when completed with the layers all the same for each page.
2dnXl.png

aA689.png

aA689.png

Save your wallpapers as a png for a higher quality image.

Now, unless you want to create your own icons, you're done with Photoshop and on the computer. You can skip down below on how to make it work on your tablet.

If you want icons, it's quite simple. Since you already have the grid and guide line in place, you already know how big each icon will be. With your guide lines turned on, take your marquee tool
nzVhH.png

and draw out the square indicating how big one icon will be. You will need to create at least one of these in this size to create a blank icon.
z86Pe.png

After selecting this shape, fill it with a color on a new layer. It doesn't matter the color. After filling it, copy it (Cmd+C or Ctrl+C). Go to file and create a new file with your clipboard as your preset. Then change the resolution to 150, just so it can look cleaner on a higher res screen. Your height and width may vary depending on your grid size you set up in the beginning.
izJZ3.png


With this new file, you can create your icons. You can either find pictures, create icons with Illustrator or any other vector based program. The first thing we will make though, is your blank icon. This blank icon will go over the tabs we created on your homescreen which will act as screen shortcuts. So what you will do is simply turn off the layer(s) so that nothing is on, and you will see a checker board indicating that it is transparent.
QSnb0.png

Save as a png since jpgs aren't able to save transparencies.

After you are done with your icons, you are finished with your computer, and now we move to the tablet. Of course, make sure you transfer all your pictures to your tablet, via usb, Google Drive, or whatever you choose.


Tablet:

When saving these images onto your tablet, there's kind of a special way on how and where to save them. Create a folder named misaClean Theme in the root folder if your internal memory. In that folder, you will create several folders. First folder you will create is Wallpapers. Within the wallpapers folder, you will create several folders for each tab you want. So for example, for mine, within the Wallpapers folder, I created a folder named Church, Home, and Media. Within these folders, you will insert the corresponding wallpaper you created. Be sure that no other picture is insider there besides the wallpaper for that page.

*After saving the wallpaper, be sure to crop out the area where the Home, Back, and Multi tab are using the default gallery. When cropping, on the bottom left, you'll see a box that says Original. Press there and be sure to press on None so that there are no cropping dimensions when cropping your wallpaper. You want to make sure you crop out just the wallpaper. So if you had an area for the nav-bar buttons, and the notification panel, be sure to crop that, so that all you have left is just the wallpaper you created.*

Go to your home screen and for wallpaper, click on Live Wallpapers. Choose MultiPicture Live Wallpaper, and click settings. Here you will see Common settings and Screen 1 settings and Add individual settings. Go ahead and add more individual screen settings depending on how many tabs you created. Screen 1 will be your leftmost screen. Even if you want your main page to be something in the center or right, so keep that in mind when setting up which wallpaper will be on each screen.
Fdk82.png

Click on Screen 1 settings.
Click on Picture source, then click on Picture Folder. (I guess you could also use Single Picture, but for some reason, I had problems, so that's the reason why I'm doing it this way)
Click on Folder Path at the top
Locate where the wallpaper folder is, and press OK.
Repeat for the next screens.

After you are done setting up your wallpaper, set it up as your wallpaper. Now you can go ahead and place all your icons/widgets on your page. Over the tabs you created, I'm not sure if other launchers have this capability, long press and click "Apex Actions." Down at the bottom, you will see Screen 1, 2, etc.
AYEg4.png


Place those shortcuts over each of the tabs indicating which shortcut goes to which page. It should now look something like this:
AKBJc.png


Now, it looks a little messy. This is the reason why we created those blank icons. Long press on each of the icons, and press edit. Click on the icon, and replace it with the blank one you created. Repeat that for all the icons.

When you're done, it should look nice and clean, and when you click over each tab, it should direct you to the corresponding page. You now completed the the tutorial, and have a nice clean theme for your home screen. Hope you enjoyed that tutorial.

Thank you for your interest in this tutorial and theme. If you would like to donate, and buy me an ice cream, click the button below. Thanks again!!








Download:

If you want to download the psd I created and just swap out the words and images, feel free. Enjoy!
https://www.dropbox.com/s/zvoiwamotfqhhva/misaClean.psd

Special thanks to those who donate(and let me know if you did)
kraamerica
 
Last edited:

Anrikus

Senior Member
May 14, 2012
214
210
Thanks for the guide.
I tried something similar in the past, but not as detailed as you posted.
I mostly arranged my screens with the icons and widgets I wanted to use, made a screenschot of that and used this as a background layer with 30% opacity. Then tried to fit the rest together ^_^

Just out of curiosity. What transmission effect are you using?
 

pnyboy27

Senior Member
Nov 19, 2009
162
65
Thanks for the guide.
I tried something similar in the past, but not as detailed as you posted.
I mostly arranged my screens with the icons and widgets I wanted to use, made a screenschot of that and used this as a background layer with 30% opacity. Then tried to fit the rest together ^_^

Just out of curiosity. What transmission effect are you using?

That sounds like an interesting thing. Do you have any pictures of what that looks like? I'd like to see how that was accomplished.

As for the transitions, I'm uploading a video to YouTube so you can see. For Apex, I am using the Scale effect with no infinite scrolling, and for the MultiPicture Live Wallpaper, I am using the 3D Slide.
 

Anrikus

Senior Member
May 14, 2012
214
210
That sounds like an interesting thing. Do you have any pictures of what that looks like? I'd like to see how that was accomplished.

As for the transitions, I'm uploading a video to YouTube so you can see. For Apex, I am using the Scale effect with no infinite scrolling, and for the MultiPicture Live Wallpaper, I am using the 3D Slide.

Well I don't think it's very interesting as it sounds.
I basically skipped the part with the grid and used my screenshot as pseudo grid.
2012-12-13_19.49.53-1.jpg


Then I started to arrange the images I wanted to use. With the Background I could always crosscheck if everything was in order.
2012-12-13_19.49.53-2.jpg


I also used the dockbar to jump to several pages.
So I was able to add more pages without altering the background.

As I said it was the lazy way to create an Background with several pages ;)
For the labels in the dockbar I later used "Simple Text-Text Icon Creator" from the market.
 
Last edited:

pnyboy27

Senior Member
Nov 19, 2009
162
65
Well I don't think it's very interesting as it sounds.
I basically skipped the part with the grid and used my screenshot as pseudo grid.
2012-12-13_19.49.53-1.jpg


Then I started to arrange the images I wanted to use. With the Background I could always crosscheck if everything was in order.
2012-12-13_19.49.53-2.jpg


I also used the dockbar to jump to several pages.
So I was able to add more pages without altering the background.

As I said it was the lazy way to create an Background with several pages ;)
For the labels in the dockbar I later used "Simple Text-Text Icon Creator" from the market.

Oh okay, I see what you did there. Yea, I usually get picky on how things look, haha. If one thing doesn't work, I scrap it all and change plans completely, haha.
 

spthacker

Senior Member
Jun 24, 2012
627
137
Suffolk
excellent howto, just one thing can you share the screenshot with the crosses on it, as I use Nova and for some reason it won't display these and let me do a screen grab as well?
 

pnyboy27

Senior Member
Nov 19, 2009
162
65
excellent howto, just one thing can you share the screenshot with the crosses on it, as I use Nova and for some reason it won't display these and let me do a screen grab as well?

If you download my psd, you should be able to just turn on the guidelines under the view menu and select view guidelines. Either that or you can just save the pic I have with the guidelines on the tutorial and create the guidelines. Using my screen shot as a template.

Sent from my SGH-T999 using xda app-developers app
 

pnyboy27

Senior Member
Nov 19, 2009
162
65
I am not able to get the transitions look smooth/slow like in your video...any other trick on that?

There are several things you could check. I'm not too familiar with Nova if they have the same settings, but in Apex, if you go to the Apex settings and under home screen settings, you can mess around with the minimum scrolling time, and transition effects. I have mine set at 0 and effect is scale.

For the multi picture wallpaper app, my transition type is 3d slide. I don't see anything here for speed.

And last, if you go to your settings, and down to developer options, you can adjust the transition animation scale as well as the others. You can mess with those until you come up with the right speed you like. Mine is just set to 1x on all 3 of them (window, transition, and animator).

Sent from my SGH-T999 using xda app-developers app
 
  • Like
Reactions: ExilHh

ExilHh

Senior Member
Jan 24, 2009
693
135
Nuremberg
There are several things you could check. I'm not too familiar with Nova if they have the same settings, but in Apex, if you go to the Apex settings and under home screen settings, you can mess around with the minimum scrolling time, and transition effects. I have mine set at 0 and effect is scale.

For the multi picture wallpaper app, my transition type is 3d slide. I don't see anything here for speed.

And last, if you go to your settings, and down to developer options, you can adjust the transition animation scale as well as the others. You can mess with those until you come up with the right speed you like. Mine is just set to 1x on all 3 of them (window, transition, and animator).

Sent from my SGH-T999 using xda app-developers app

That are the exact settings i used (running Apex) but transitions looks really ugly here...may be its because i use some more screens than only 3. So Apex has to jump from page 2 to 6 for example. Never mind, i will try harder to get a solution! ;o))
Thanx for giving me some inspiration and for your help of course!

Mike
 

pnyboy27

Senior Member
Nov 19, 2009
162
65
That are the exact settings i used (running Apex) but transitions looks really ugly here...may be its because i use some more screens than only 3. So Apex has to jump from page 2 to 6 for example. Never mind, i will try harder to get a solution! ;o))
Thanx for giving me some inspiration and for your help of course!

Mike

Yea, having more pages might make things want to move quicker, therefore not really showing much of the animation. If you slow down the animations, you might be able to see them flow a little more. But then again, reaching to another page, might take a while, and make it seem like your tablet's running a little slow. Glad to have helped!

How did you create the icons on the media tab? :D

For those icons, it's very similar to the Windows 7 icons others have posted in the past. To do them, I used the same grid that I set up for the wallpaper, and used the marquee tool to select the amount of space I wanted my icon to take up. After selecting it, I filled it with a random color, copied it, opened up a new file using the clipboard preset, and pasted the picture I wanted to represent that app. After creating the image for the icon, and saving it to my tablet, I used Desktop VisualizeR to create the icon.

For example, if I made my image to be 1x3, I used the 1x3 template in DVR. From there you click on the "Select Icon" and locate the image you created. For "Select Action," you choose the corresponding app. If you want a label to go with your icon, you can leave it in, or rename it. Choose your colors for the text and the background, and the touch effect, and you should be good. Click "OK" and you're done.
 

pellatarte

Senior Member
Dec 7, 2011
169
24
Hello guys,

Thanks for this tutorial it's huge!!!!

I've made my own theme but i only have one problem left :(

I use 3 screen the default one (number 2, the one in the middle ;)) is OK, but when i scroll let or right (it's the same) i see my other wallpapers but they seems to be part of the screen number too because in the screen 1 and 3 i only have black wallpapers :( It looks like the size is not good or something like that....

I don't know where can be the problem.... The size of the wallpaper? Parameters in Apex (i've selected Multi screen with scrolling and i use a 10x7 grid) ? Parameteres in Multiple pictures (I've selected "fit to fullscreen" for every screen)?

Is there someone who can help me? Thanks in advance.

Best regards.
 

Top Liked Posts

  • There are no posts matching your filters.
  • 28
    misaClean Theme - Tutorial
    qtJnE.jpg


    Video below
    http://youtu.be/sVGO_NuJAmw

    To start things off, this is going to be my first tutorial on making a theme. This is actually my first theme I've really made. To be honest, I was actually quite surprised at how many people were interested in my theme and how I created it. Since I had quite a bit of response to it, and people wanting to create theirs, I decided to create a tutorial so that anyone could either copy what I did, or use my idea as a base to create their own unique theme. Before I get started, I would like to thank Deusex74 for creating the theme that inspired me to create my own. So without much further ado, let's begin the tutorial! =)

    Apps needed:
    Weather: Eye In The Sky
    Home Calendar: Jorte
    Church Calendar: Simple Calendar
    Clocks: Zooper
    Launcher: Apex Launcher or Nova Launcher, or any other launcher that will allow you to resize the grid, and have shortcuts that will allow you to go to certain pages.
    Icons: Desktop VisualizeR
    Wallpaper: MultiPicture Live Wallpaper

    Programs:
    Photoshop, or something similar would be great. I guess you could also make this in paint, but the editing program is up to you.



    First thing I did was decide on how many spaces would be in my grid to fit everything I wanted and not look too crowded. I created an empty screen, removed the dock, and took an icon and placed it on the screen. After holding it, a grid with crosshairs pop up, once that popped up, I took a screen shot.
    j4BAP.png


    Next step is to take that screenshot and open it in Photoshop. You then have the correct resolution for the screen, and the grid for the layout. Open the rulers (Cmd+R or Ctrl+R), and drag out guideline from the ruler to each of the cross hairs. Once it's completed, it should look like this.
    HBqvX.png

    You now have the basic grid on how icons will fit on your screen.

    From here, you can choose how big you want the picture to be to fit on the screen. After determining that, and placing it on your screen, it should look like this:.
    mIXKB.png


    Determine how many tabs you want, and how big you want them to be. For me, I wanted only 3 tabs to have 3 pages. If you want more, you might need to tweak the amount of your grid size so that the icons you will use to direct to each page, will fit. Remember, we still need to have icons that will direct you to the right page.
    So since I only had 3 tabs, I wanted to make the home tab the largest and in the center, taking up 3 spaces, while the others only took 2 spaces.
    zfZJi.png


    After setting those up and creating your dividers, you can create the colored bar to span across the page just above your tabs. It should now look like this with the guide lines turned off
    jHUY9.png


    That's all there is to making your first page. After that, just copy that and repeat for your next pages. Your layout should look like this when completed with the layers all the same for each page.
    2dnXl.png

    aA689.png

    aA689.png

    Save your wallpapers as a png for a higher quality image.

    Now, unless you want to create your own icons, you're done with Photoshop and on the computer. You can skip down below on how to make it work on your tablet.

    If you want icons, it's quite simple. Since you already have the grid and guide line in place, you already know how big each icon will be. With your guide lines turned on, take your marquee tool
    nzVhH.png

    and draw out the square indicating how big one icon will be. You will need to create at least one of these in this size to create a blank icon.
    z86Pe.png

    After selecting this shape, fill it with a color on a new layer. It doesn't matter the color. After filling it, copy it (Cmd+C or Ctrl+C). Go to file and create a new file with your clipboard as your preset. Then change the resolution to 150, just so it can look cleaner on a higher res screen. Your height and width may vary depending on your grid size you set up in the beginning.
    izJZ3.png


    With this new file, you can create your icons. You can either find pictures, create icons with Illustrator or any other vector based program. The first thing we will make though, is your blank icon. This blank icon will go over the tabs we created on your homescreen which will act as screen shortcuts. So what you will do is simply turn off the layer(s) so that nothing is on, and you will see a checker board indicating that it is transparent.
    QSnb0.png

    Save as a png since jpgs aren't able to save transparencies.

    After you are done with your icons, you are finished with your computer, and now we move to the tablet. Of course, make sure you transfer all your pictures to your tablet, via usb, Google Drive, or whatever you choose.


    Tablet:

    When saving these images onto your tablet, there's kind of a special way on how and where to save them. Create a folder named misaClean Theme in the root folder if your internal memory. In that folder, you will create several folders. First folder you will create is Wallpapers. Within the wallpapers folder, you will create several folders for each tab you want. So for example, for mine, within the Wallpapers folder, I created a folder named Church, Home, and Media. Within these folders, you will insert the corresponding wallpaper you created. Be sure that no other picture is insider there besides the wallpaper for that page.

    *After saving the wallpaper, be sure to crop out the area where the Home, Back, and Multi tab are using the default gallery. When cropping, on the bottom left, you'll see a box that says Original. Press there and be sure to press on None so that there are no cropping dimensions when cropping your wallpaper. You want to make sure you crop out just the wallpaper. So if you had an area for the nav-bar buttons, and the notification panel, be sure to crop that, so that all you have left is just the wallpaper you created.*

    Go to your home screen and for wallpaper, click on Live Wallpapers. Choose MultiPicture Live Wallpaper, and click settings. Here you will see Common settings and Screen 1 settings and Add individual settings. Go ahead and add more individual screen settings depending on how many tabs you created. Screen 1 will be your leftmost screen. Even if you want your main page to be something in the center or right, so keep that in mind when setting up which wallpaper will be on each screen.
    Fdk82.png

    Click on Screen 1 settings.
    Click on Picture source, then click on Picture Folder. (I guess you could also use Single Picture, but for some reason, I had problems, so that's the reason why I'm doing it this way)
    Click on Folder Path at the top
    Locate where the wallpaper folder is, and press OK.
    Repeat for the next screens.

    After you are done setting up your wallpaper, set it up as your wallpaper. Now you can go ahead and place all your icons/widgets on your page. Over the tabs you created, I'm not sure if other launchers have this capability, long press and click "Apex Actions." Down at the bottom, you will see Screen 1, 2, etc.
    AYEg4.png


    Place those shortcuts over each of the tabs indicating which shortcut goes to which page. It should now look something like this:
    AKBJc.png


    Now, it looks a little messy. This is the reason why we created those blank icons. Long press on each of the icons, and press edit. Click on the icon, and replace it with the blank one you created. Repeat that for all the icons.

    When you're done, it should look nice and clean, and when you click over each tab, it should direct you to the corresponding page. You now completed the the tutorial, and have a nice clean theme for your home screen. Hope you enjoyed that tutorial.

    Thank you for your interest in this tutorial and theme. If you would like to donate, and buy me an ice cream, click the button below. Thanks again!!








    Download:

    If you want to download the psd I created and just swap out the words and images, feel free. Enjoy!
    https://www.dropbox.com/s/zvoiwamotfqhhva/misaClean.psd

    Special thanks to those who donate(and let me know if you did)
    kraamerica
    2
    I've found the solution if it can help someone ;)

    Click to: WORKAROUND FOR SOME APPLICATION in multipicture live and then set it to NONE :)
    1
    oh goodness. THANKS FOR THIS TUTORIAL.

    such a clean and simple look. LOVE IT.
    1
    Blank Icon .png

    Here is a "blank" icon for your use. Or here: https://dl.dropbox.com/u/46958507/Blank.png

    It's in there, trust me. :)
    1
    I am not able to get the transitions look smooth/slow like in your video...any other trick on that?

    There are several things you could check. I'm not too familiar with Nova if they have the same settings, but in Apex, if you go to the Apex settings and under home screen settings, you can mess around with the minimum scrolling time, and transition effects. I have mine set at 0 and effect is scale.

    For the multi picture wallpaper app, my transition type is 3d slide. I don't see anything here for speed.

    And last, if you go to your settings, and down to developer options, you can adjust the transition animation scale as well as the others. You can mess with those until you come up with the right speed you like. Mine is just set to 1x on all 3 of them (window, transition, and animator).

    Sent from my SGH-T999 using xda app-developers app