FORUMS
Remove All Ads from XDA

[Theme] misaClean - Tutorial

162 posts
Thanks Meter: 65
 
By pnyboy27, Senior Member on 13th December 2012, 10:35 AM
Post Reply Email Thread
misaClean Theme - Tutorial


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.


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.

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:.


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.


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


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.



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

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.

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.


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.

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.

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.


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


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
The Following 28 Users Say Thank You to pnyboy27 For This Useful Post: [ View ] Gift pnyboy27 Ad-Free
 
 
13th December 2012, 10:44 AM |#2  
OP Senior Member
Thanks Meter: 65
 
More
******RESERVED********
13th December 2012, 10:44 AM |#3  
OP Senior Member
Thanks Meter: 65
 
More
*************RESERVED**************
13th December 2012, 11:02 AM |#4  
Senior Member
Thanks Meter: 211
 
More
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?
13th December 2012, 11:11 AM |#5  
OP Senior Member
Thanks Meter: 65
 
More
Quote:
Originally Posted by Anrikus

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.
13th December 2012, 07:16 PM |#6  
Senior Member
Thanks Meter: 211
 
More
Quote:
Originally Posted by pnyboy27

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.


Then I started to arrange the images I wanted to use. With the Background I could always crosscheck if everything was in order.


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.
Attached Thumbnails
Click image for larger version

Name:	2012-12-13 19.49.53-1.jpg
Views:	1205
Size:	25.7 KB
ID:	1560823   Click image for larger version

Name:	2012-12-13 19.49.53-2.jpg
Views:	1329
Size:	27.2 KB
ID:	1560824  
14th December 2012, 06:23 AM |#7  
OP Senior Member
Thanks Meter: 65
 
More
Quote:
Originally Posted by Anrikus

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.



Then I started to arrange the images I wanted to use. With the Background I could always crosscheck if everything was in order.


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.
14th December 2012, 10:16 AM |#8  
Senior Member
Thanks Meter: 30
 
More
oh goodness. THANKS FOR THIS TUTORIAL.

such a clean and simple look. LOVE IT.
The Following User Says Thank You to ayopancheezy For This Useful Post: [ View ] Gift ayopancheezy Ad-Free
15th December 2012, 04:14 PM |#9  
kraamerica's Avatar
Member
Flag West Michigan
Thanks Meter: 11
 
More
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.
Attached Thumbnails
Click image for larger version

Name:	Blank.png
Views:	858
Size:	2.9 KB
ID:	1565510  
The Following User Says Thank You to kraamerica For This Useful Post: [ View ] Gift kraamerica Ad-Free
16th December 2012, 05:29 PM |#10  
spthacker's Avatar
Senior Member
Flag Suffolk
Thanks Meter: 140
 
More
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?
16th December 2012, 08:41 PM |#11  
ExilHh's Avatar
Senior Member
Flag Nuremberg
Thanks Meter: 136
 
More
I am not able to get the transitions look smooth/slow like in your video...any other trick on that?
Post Reply Subscribe to Thread

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes