[Nexus 7 Themes and Apps] pnyboy27:
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