[Q] How do I make images like this? - EVO 4G Q&A, Help & Troubleshooting

[Q] How do I make images like this? - EVO 4G Q&A, Help & Troubleshooting

I recently saw images in the themes section, that I loved and subsequently now use for my phone. Shown:
http://forum.xda-developers.com/showthread.php?t=781455
and
http://forum.xda-developers.com/showthread.php?t=783946
Now, how do I resize the images properly? Scale, resize? Differences? What program to use (free, I'd prefer)? How to add that black bar so lovely at the bottom of the images and the text there? I tried figuring it out, but I couldn't figure out how to search how to do that specific thing.
Any help would be great! I want to start making images in that fashion for other applications, as those are very limited.

When I had my Hero, you could download Desktop Visualizer - this will allow you to associate certain pictures to the icons you want. It will also allow you yo resize them....my suggestion is start with a big icon and resize it smaller - smaller to big makes it look grainy...as for the dock bar....I used (use) LauncherPro - under LauncherPro setting you can change the dockbar....hope this helps!!

The black bar at the bottom looks to be a custom dock for LauncherPro. I've seen it in collections of LP Docks before (I'm unfortunately not immediately able to find it, but google it and spend a few minutes, and you ought to find it no prob).
As for the icons, Simi Folder would be one way to do it if what you're linking to is a folder. Not sure for just an icon that links directly to an app -- you can certainly resize icons in LPP, but I'm not sure off the top of my head how to do it and maintain the scale. You could probably compress it using Photoshop such that when it gets stretched, it looks correct? I dunno, someone else may have better ideas...

I believe people are misunderstanding what I'm asking.
I know how to get it all set up on my homescreen and such. I have the setup like that currently, no problem, using DesktopVisualizer and LPP.
I'm more asking about how they placed those bars on the image and the writing. See, they have an image that they got from wherever on the internet, put that minimalistic black transparent bar on the bottom and wrote "Texts" there, so that one would use it as a tile of sorts (as the theme they're going for is an "Android Phone 7" sort of thing"). I want to basically get images from wherever in the internet as well and use them for other applications. Like, create a, say, "Market" one, where the image I found will represent in some form, a market, and then put that black transparent bar in the image and type "Market" in some font in the corner like they did so that I can then use DesktopVisualizer to use the image as the icon in the manner shown in those posts. I'm assuming you can't just go and place a huge image (####x###) as the icon and hope it fits right. They resized theirs down to like 355x115 or something. Every time I try to resize something like that, though, it does not like it in the least. So, I'm wondering how they did that, too.
In a sense, they're like icon sets, if you will, and I want to then expand their offerings, as they only offer "icons" for a few applications or needs.
God, what a text wall. Sorry!

I wouldn't mind knowing myself, I'm all for customizing my Evo, and the more I learn the better I can do so.

I'm sure it's a relatively simple process, I just simply don't know how and wouldn't even know how to search for it. Like, what, "black bar on image?" Ha!
Hundreds of views, hardly any replies! You'd think this wise community would know!

totalanonymity said:
I believe people are misunderstanding what I'm asking.
I know how to get it all set up on my homescreen and such. I have the setup like that currently, no problem, using DesktopVisualizer and LPP.
I'm more asking about how they placed those bars on the image and the writing. See, they have an image that they got from wherever on the internet, put that minimalistic black transparent bar on the bottom and wrote "Texts" there, so that one would use it as a tile of sorts (as the theme they're going for is an "Android Phone 7" sort of thing"). I want to basically get images from wherever in the internet as well and use them for other applications. Like, create a, say, "Market" one, where the image I found will represent in some form, a market, and then put that black transparent bar in the image and type "Market" in some font in the corner like they did so that I can then use DesktopVisualizer to use the image as the icon in the manner shown in those posts. I'm assuming you can't just go and place a huge image (####x###) as the icon and hope it fits right. They resized theirs down to like 355x115 or something. Every time I try to resize something like that, though, it does not like it in the least. So, I'm wondering how they did that, too.
In a sense, they're like icon sets, if you will, and I want to then expand their offerings, as they only offer "icons" for a few applications or needs.
God, what a text wall. Sorry!
Click to expand...
Click to collapse
The text is just in the image, it isn't some magical add-on. It is probably just a black rectangle and then transparency adjusted to taste.
There are a handful of win7 style icon packs like that. You could use one of those as a template (for size) and use your own images and text. Minimal PS or GIMP experience needed. Just keep the aspect ratio of the images when you are resizing them and provided they aren't absurdly larger than the ~355x115 or whatever size you are aiming for they should still look fine.

The second link says it comes with photoshop templates. You could always just download the 30 day free trial of photoshop.

looks like a simple photoshop job to me, just add a second layer above the background, rectangle marquee the section you want to be the transparent bar, then paint bucket the area with a black (or any color) at 50% opacity, then add text.

jstalford said:
The second link says it comes with photoshop templates. You could always just download the 30 day free trial of photoshop.
Click to expand...
Click to collapse
Wow, can't believe I missed that. Oops!

Those are pretty cool looking layouts nice find.

Related

Modified Icons for Kaiser Home Plugin

Hello all,
You may have seen my earlier thread with the modified color clock digits for the HTC Home Plugin. Well, I just can't leave well enough alone! This started off as JUVS color version of the Kaiser Home Plugin. I took some of the icons from JUVS version and some from Schaps. Then I made the 'unselected' ones dark and lit up the selected one with a bright spotlight. I also changed the house colors a bit and turned it to face the other side. Just didn't seem right with a blue roof . I like it better now and I hope you do too, see screenshots attached.
To install:
First install JUVS Kaiser Home Plugin, color version, see the CAB file later in this thread. Then go in and make sure the plugin is unchecked in Settings, Today, Items. Make a backup of the HH_FW*.* and HH_HOME*.* files in your Windows folder for safe keeping. Then copy the contents of the ZIP file attached to the Windows folder on your device (not the zip itself, extract the contents) replacing the same-named files. Reselect the plugin and take it for a spin. Love it? Good! Hate it? Restore the original set of icons and associated files or reinstall.
By the way, the colored clock digits I made for the original HTC plugin work perfectly here too. Copy them over the same way if you like. You can find them in this thread: http://forum.xda-developers.com/showthread.php?t=314510
And, that reminds me, I figured out the bezel issue affecting some of the icons in the files I put out for the original HTC Home Plugin. For those who were bugged by that issue I am attaching a bezel fix ZIP file that will correct the issue and leave a nice transparent icon background in keeping with the them of that set of files. You could use this fix on this Kaiser version as well and it will remove the spotlight from the selected item without affecting the colors and brightness/darkness differentiating selected and unselected. You just have to see it to see if you like it.

Is this for Hermes or Kaiser? This is posted in the Hermes WM6 forum.

Yes!
This applies for both actually, but I'm using it on a HERMES, running the Kaiser HTC Home Plugin. See the 5 tabs instead of 3? If you want it, look for JUVS version in this thread: http://forum.xda-developers.com/showthread.php?t=316107

gmgonzal, great work again! Thanks!!!

i'm trying to copy over the files in vista but i can't seem to... do i need to do this via the phone?

nevermind, stupid vista won't let you extract from an explorer view of a zip file

so the spotlight for each tab seems to show the old black/white icon when it is selected... going to try to recopy the files again.

That's because...
absolutg said:
so the spotlight for each tab seems to show the old black/white icon when it is selected... going to try to recopy the files again.
Click to expand...
Click to collapse
This is meant as a mod for the JUVS color version of the Kaiser Home Plugin. It brings the color icons that you are missing. You should install that first, then copy these icons over. I'm including the CAB file here in case others need it also...

do you know if this has the fixes included in the version posted on pg 6 of the original thread? thanks!

works well now. was wondering if you could do the spotlight with a transparent backgd instead of the gray? looks better with the default ATT them. thanks!

Here you go
absolutg said:
works well now. was wondering if you could do the spotlight with a transparent backgd instead of the gray? looks better with the default ATT them. thanks!
Click to expand...
Click to collapse
I guess I could , I wanted to do that next myself, it takes more effort to clean up the graphics for that. Check back...

This is great, thanks! Removing the bevel was part of the things I wnated to change about this plugin. What I would really love to be able to do now is completely remove the useless highlight that appears over the icons when they are selected - is this possible?
edit: just to be clear from the post above ... the highlight I mean is not contained in the images, I mean the OS highlight that appears over the images themselves when selected.
Also, for me personally, it would be great to be able to change the colour of the font used - if I change the colour of the clock images, then the font stay white which looks inconsistent to my fussy brain!
Thanks for any help with the highlight thing though.

good work, works well ! thank you!

I know what you mean
drblow said:
What I would really love to be able to do now is completely remove the useless OS highlight that appears over the images themselves when selected.
Click to expand...
Click to collapse
That highlight pi$$es me off too, what I always wanted to do was have the icons in greyscale and then make them bright color when selected, with no highlight around them. But that highlight seems to be built into the code. As far as the text color, Zoharbl said in my previous thread that you can change the text color for each Today screen item with a program called Today Agenda, but I haven't tried it to see if it works on the text on the top of the HTC Plugin. Here's a link if you want to try it:
http://forum.xda-developers.com/attachment.php?attachmentid=44083&d=1184589532

You're welcome
ratcom said:
good work, works well ! thank you!
Click to expand...
Click to collapse
Glad you liked it.

gmgonzal said:
That highlight pi$$es me off too, what I always wanted to do was have the icons in greyscale and then make them bright color when selected, with no highlight around them. But that highlight seems to be built into the code. As far as the text color, Zoharbl said in my previous thread that you can change the text color for each Today screen item with a program called Today Agenda, but I haven't tried it to see if it works on the text on the top of the HTC Plugin. Here's a link if you want to try it:
http://forum.xda-developers.com/attachment.php?attachmentid=44083&d=1184589532
Click to expand...
Click to collapse
Thanks for the reply. That's exactly what I want to see aswell! I'll try that app & let you know if it works.

interesting idea

Chome Configurator Panel Icons Tutorial

Hello xda's, altough I'm not that technically savvy, I managed to learn how to create and manage icons to use in creating Chome Configs panels. Thanks to some xda members like Stylez and Nrg for their help so here it goes, and please correct me if I'm wrong.
Find your icon, I like using the icons from www.iconspedia.com, their icons are hardcore and of course hi-res.
The icon size is 22x22 with the highest dpi you can manage. To resize the icons I use Paint.Net(Stlyez ) this program is so ridiculously simple its not even funny, just play with it for a minute and you'll have your icon outputted in no time at all.
Icon Name (like the say, "don't know why it is, it just is" lol)
To have some common factor I use the name Chome in my icons that will be used in my panels ie.
chome_gps_sat_active.png
chome_gps_desat_inactive.png
or you can just name it - icon_sat_active.png and icon_desat_inactive.png but again notice the common factor
I don't know why its sat_active.png and desat_inactive.png but all the icons have to end in that format. Once you have your icons launch Chome Config and create your panel ie. Gps, once you see it go inside and create your 1st page, at the top it says:
Panel Icons:
here you'll follow the aforementioned format including the path of the icons like so:
\Windows\chome_gps_sat_active.png;\Windows\chome_gps_desat_inactive.pg
I highlighted the ";" so you don't forget, if you mess up the icon name or path, you'll end up seeing a red icon with an "x" in the middle, alerting you that something is wrong
The active icon is the icon that will show up when you select that panel and the inactive icon is the icon that will show up when you are not in that panel. If you put the both icons the same, then common sense dictates that the panel will use only one icon for inactive and active views, a lot folks like to have inactive and active icons just to show a little contrast but the choice is strictly yours, and that's why I think this is such a great piece of software, its so configurable yet simple to use once you get the basics. Below are a couple of my icons I used for my Gps panel that holds the following apps: Garmin, Google Maps, Live Search. The little color icon is my active and the bw is my inactive and the original, so you're able to compare the scaled down versions
Well I hope this helps someone and again if some of the more technical members can add some more knowledge, please comment

Good post man, looks like it took some time to do this... So lets keep this post up in order for people to see it and not start new threads asking questions on this topic...

Re: Setting Up Panels
To carry on the subject here is how to set up your CMYApplication the same goes for all panels.
Here is what it look like:
I have set up Opera Mobile
The Red arrow is the name of panel when condensed "not on the panel"
The Blue is the name shown on the top of panel when expanded
The Green is the location of the .exe "program want to open"
The Purple is the location of the picture .png "i place mine on storage card in a folder called PNG"
You may find that page 2 doesn't show as i think there is a bug i have had it on both ROMs hide the page and make a new one to get 20 pages for 20 programs
Hope this helps.

Excellent guys !

stylez said:
To carry on the subject here is how to set up your CMYApplication the same goes for all panels.
Here is what it look like:
I have set up Opera Mobile
The Red arrow is the name of panel when condensed "not on the panel"
The Blue is the name shown on the top of panel when expanded
The Green is the location of the .exe "program want to open"
The Purple is the location of the picture .png "i place mine on storage card in a folder called PNG"
You may find that page 2 doesn't show as i think there is a bug i have had it on both ROMs hide the page and make a new one to get 20 pages for 20 programs
Hope this helps.
Click to expand...
Click to collapse
Nice post man... I like the picture tutorial

Re: Making Panel
Here is a video of me making an Office panel please do not copy my location of the .exe's as they will be different.
But this will show you how to make your own panels
Hope it helps.
YouTube:

stylez said:
Here is a video of me making an Office panel please do not copy my location of the .exe's as they will be different.
But this will show you how to make your own panels
Hope it helps.
Click to expand...
Click to collapse
Looks nice man for sure

jdoggraz said:
Looks nice man for sure
Click to expand...
Click to collapse
I try my best lol just on the up to my Tube, then will post link saves people having to download shame that can embed vids on here, or can we?

I did some searching around, but I couldn't find an answer. Has anyone indexed these panel icons, and the reference numbers for the default? I'm trying to find a panel icon for the myfaves in black and white, so that I can add it to my quick dialer panel. Any thoughts?

stellarvelocity said:
I did some searching around, but I couldn't find an answer. Has anyone indexed these panel icons, and the reference numbers for the default? I'm trying to find a panel icon for the myfaves in black and white, so that I can add it to my quick dialer panel. Any thoughts?
Click to expand...
Click to collapse
There you go.

This is such a good post lol I use it still lol as I tend to keep forgetting 1 or 2 steps...

lol, stylez did a great a job on the video, we should have more of these, how about one for featherweather2, any takers

Nice work I somehow managed to not comment a long while back. I figured some of this out thru trial and error but some of the tutorial actually helps me tinker even more if I want too. It just sucks that one must redo all of it again with a simple flash...

pfunkside said:
Nice work I somehow managed to not comment a long while back. I figured some of this out thru trial and error but some of the tutorial actually helps me tinker even more if I want too. It just sucks that one must redo all of it again with a simple flash...
Click to expand...
Click to collapse
Thanks.
There must be more we can do through walk through edit.cpr? I got a how to change the panel with PE which i could upload but maybe we need a thread deicated to it all?
Blackjack2 you could change the title to something else like Video & Picture tutorials?
Just a thought...

I feel dumb but is there any docs on how to use Chome I cannot seem to figure it out and I don't want to mess anything up.
Thanks!

You're looking at one buddy, just ask and we'll tell you.

This was very helpful, as I was sort of lost. I had the right idea, but some things weren't totally right until the picture tutorial that stylez put together. Thanks so much.

Great job to both of you.
I added a link to this thread in the original CHome Configurator thread.

Opera on panel
Hello,
Ive been trying to add favorites from opera to a panel, is there a tutorial somewhere how to do this ?
I actually have not been able to add Opera mini to a panel but I think this is how I installed Opera mini..I went to mini.opera.com and installed it but to access the application I have to go to start/java/launch opera.. I can find opera in the application list if I use the template for apps in ChromeConfig and it does add it to a panel it just doesnt work lol
So if anyone knows how to get either of those to work would be awesome.
Thanks in advance.

Hey guys,
Thanks a lot for your tutorials but I am still not able to get my icons to show up. The icons on the top bar(_sat_active.png and _desat_inactive.png) show up just fine but it is the individual icons that dont show. This is the case for both my applications as well as my contacts. Any suggestions?

{Team Rejectz} THEME/DESIGN CHEAT SHEET{moved to theme sec sorry} {Still Working On}

This first post is about using Adobe Illustrator
I figured I would share a little knowlege of my designing and how when i came to android it helped out in making theming my rom so much quicker
ATTACHED AT THE BOTTOM IS A STARTER LAYOUT TO HELP MAKE LIFE EASIER FOR YOU!!!!!! :fingers-crossed:
THEME/DESIGN CHEAT SHEET
INDEX1. Tools..........................................................................
2. Begin.........................................................
3. The Setup...........................................
4. The Artboards.........................................................
5. Adding And Modifying Multiple Artboards.....................
6. Saving your Icons.................................
7. Layers, Colors, And Strokes................................................
8. SELECTING MULTIPLE LAYERS AND ICONS TO CHANGE COLOR AT ONCE.
9. TRACING TOOL...................................................
10. Keyboard shortcuts coming soon
1.TOOLS
First remove Adobe Photoshop and Fireworks from your playlist. To me these tools are crap or for short cuts. lol but short cuts coming soon
"Adobe Illustrator" and some quick learning or know how.
I'm not going to go over every single tool because if anyone knows illustrator lol its just way to many. Im just going to get to the main ones in this case in point.
2. BEGIN
Adobe Illustrator is one of the best graphic design tool I've ever used Ever. Your images would no longer start of as just a pic anymore. Now its time to learn vector.
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics. "Vector", in this context, implies more than a straight line.
Vector graphics is based on images made up of vectors (also called paths, or strokes) which lead through locations called control points. Each of these points has a definite position on the x and y axes of the work plan. Each point, as well, is a variety of database, including the location of the point in the work space and the direction of the vector (which is what defines the direction of the track). Each track can be assigned a color, a shape, a thickness and also a fill. This does not affect the size of the files in a substantial way because all information resides in the structure; it describes how to draw the vector.
WIKI^^^^^ thanks
In short this means that all the res you would lose resizing images in Photoshop or Fireworks wouldn't be lost in Adobe illustrator because it use the vector format
When designing in vector you have so many capabilities that any format doesn't, like proper shading, 3D effects and the easiest way to change the color of multiple vec's at once on the same artboard.
The art board is the space and area in which your design would be held on. It's the only part that would be use to create the png, jpeg, etc. Anything on the edge or off of the artboard wouldn't come up at all in the image. This is convenient to me because I like to have almost the entire framework or system res themed perfectly. Meaning all color and tints and shade all match to the T. You also can line up anything to the artboard or to an object perfectly, so no more miss shaped png's lol.
There's also some tools there that you also seen in Photoshop and Fireworks.
My favorite part of adobe illustrator is the Effects section. This is how to avoid messing up when trying to make your own shading, shadows, 3D effects, glows and more. Trust me, when you get a taste of the effects your going to be trying anything!!!!!!
3. THE SETUP
Now it's time to prepare.
First you need to start a new project. Go to file and select new. Give your project a name. i prefer the name of the rom.
New documents profile - Don't change this because it going to change to custom by itself.
Number Of Art Boards - Keep this at 1 (im going to tell you how to add more)
Size - don't touch anything after size, just make sure Units Say Pixels
Advanced(drop down the menu) - There are 2 color mode RGB - and CMYK. Rgb modes give your stage for the artboards a white background as if it was on paper. Cmyk leave it empty or transparent like in a PNG. It's your choice on which you want.
Raster Effects - Make sure it's at High 300 PPI
4. THE ARTBOARDS
THERE IS A STARTER KIT FOR ARTBOARDS ATTACHED
The Artboard is pretty much a stage. This is where all the magic happens.
Now when your designing any icon you should make sure you know the sizes. Knowing all the sizes can be a hassle right, but this is where it gets really easy. Say you have 30 icons that are 72x72 if you have a project set up with multiple art boards you would be fine. because once you have made all the icons the save size is just a drag and click away.
5. ADDING AND MODIFYING MULTIPLE ART BOARDS
If you noticed which I'm sure everyone has, that some images match the size of other. This is where it gets very easy to make save and do it in a quick fashion.
Go to "File", scroll down to Document Setup and click on it. A window will appear don' worry about anything it the window unless you want to change things yourself. Just go to Edit artboard. You will notice that the screen has turned grey and now you artboard is the only thing thats white. If you hover over the grey you will see that your drag symbol has turned into a square. Us this to add more artboards. Click and hold on to the grey area and drag your mouse. You will see that you just added another artboard. To resize the artboard the Width which is labeled W and the Height which is labeled H will be in the upper right hand corner. Click on the artboard you want and start to reshape it according to the size you need. You can also drag the artboards to which ever place you want it to sit. Once done just click on the mouse pointer icon on the right and everything will be back to normal.
6. SAVING YOUR ICONS
When saving your icons make sure that where ever your project is you have it as the target location when saving. On your first save you should locate the folder and where the original file is and replace and save it. No need to type in the name. If you know where it is alphabetically, then just scroll to it, click on it and the name should appear in the File name box. If it tell you the file already exist, Do you want to replace? click Yes, but make sure you have a backup copy of the folder just in case. Also make sure you are on the right art board when saving. All it takes is a click on the artboard and you would be just fine.
7. ANCHORS, LAYERS, COLORS, AND STROKES
You ever find it a very long task to make all your icons the same or correct color. Or in short make them match. Well in vector format you can change all of the icons color at once. It has to be selected though. I know you wondered what the white arrow was for, well wonder no more. The white arrow it to select a layer, stroke, or any anchor on the vector image.
ANCHOR - this is single or multiple dots on a vector image that controls the path, line and/or stroke.
Layer is a section of the image thats either below, side by side, or on top of another image. You can change positions by right clicking on the image and use arrange to move its position.
Colors well you know what these are, But Illustrator has three different kind Grey Scale, RGB and CMYK (will be explained later)
Strokes are pretty much a line. It can be around the image, by itself or combined to create an image.( Will Be explained on how to manipulate a stroke in a image.)
To make it short grab the white pointer and have at it lol.
8. SELECTING MULTIPLE LAYERS AND ICONS TO CHANGE COLOR AT ONCE.
We all know images have layers but say you have several vector images that are 2 colored icons or more colors just stick with 2 for a sec. If you go to the image with the white pointer, You can click on the one color on the image and change it without making a mistake and turning the whole icon one color. Now to select more than one of the icons, say all of them where blue and green. Click on the green part of the icon. Now go to the top and click on "Select" scroll down to same. When the menu pop out, you will see that there are many ways to select multiple types of images. For right now click the one that says "Fill Color". All of the icons will be selected that has that same shade or ton of green. (note you must have them already colored in to match in order to select same). Now when you change the color they all will adjust together to make them Perfect.
9. TRACING TOOL.
This tool i would recommend that you stay away from and just design your stuff from scratch. Now I'm about to contradict myself lol but this tool is so f'ing handy if used right.
When tracing and image your pretty much turning it into a vector image with paths, strokes, and anchors. Its pretty much a conversion tool but difficult to use. If you have a colorful image that's when it gets hard. But if you have like a solid color shape its kinda easy.
Say like you have a picture of a solid black triangle in .png and .jpeg because you didn't feel like drawing one. Drag it to the artboard. You will see a button up top that wasn't there b4 called "Live Trace". Click on it and you will see your triangle go from a rough .png/.jpeg image to a smooth vector format triangle.
Now it gets hard.
If you have a multiple color image there are ways to trace it to a vector but not all get it the way you want. Just play around with it a little and you will see what i mean. The traces I'm talking about are in the drop down menu right next to the "Live Trace" button. You will see a slim button with a down pointing arrow.
10. Keyboard short Cuts(coming Soon)
To Be Continued - meaning im Sleepy lol

Photoshop Short Cuts
Photoshop Short Cuts

Adobe Fireworks Shortcuts
Adobe Fireworks Shortcuts

Using Adobe Flash To Make Bootanimations, Banners, and Sigs
Using Adobe Flash To Make Bootanimations, Banners, and Sigs

lorjay589 said:
Using Adobe Flash To Make Bootanimations, Banners, and Sigs
Click to expand...
Click to collapse
This is damn near the best post for theming I've ever seen! Simply awesome!. Please put this in the theming section for other young devs and themers alike. This should be a sticky!

{Team Rejectz} THEME/DESIGN CHEAT SHEET {Still Working On}

Photoshop Short Cuts
Photoshop Shortcuts
Index
1. .9 shortcuts Without Decompressed png
2. Batch File Opperation

Adobe Fireworks Shortcuts
Adobe Fireworks Shortcuts

even more

My biggest problem would be the dreaded 9patch
Sent from my SPH-D710 using xda premium

gtuansdiamm said:
My biggest problem would be the dreaded 9patch
Sent from my SPH-D710 using xda premium
Click to expand...
Click to collapse
dreaded 9patch? what is so hard about .9's

rujelus22 said:
dreaded 9patch? what is so hard about .9's
Click to expand...
Click to collapse
Lol yea thats the same thing i was thinking but, Im going to put a short cut for .9 patches for people who don't know how to do it. For Photoshop and Fireworks. But im not going to go into full details because there are post on here with that. Im just going to explain a quick way without decompressing a .9 png

Dude, this rocks. I will be using this like crazy for sure.

hi, I'm interested in learning how to theme, but I must admit, teaching me may be a pretty big project since the extent of my experience is making themes in UOT Kitchen.
would this tool be a good place to start?

mjs2011 said:
hi, I'm interested in learning how to theme, but I must admit, teaching me may be a pretty big project since the extent of my experience is making themes in UOT Kitchen.
would this tool be a good place to start?
Click to expand...
Click to collapse
yes sir this is the perfect place, while not done, im going to apply all of my knowledge of design to help out

Thanks! I may reach out to you privately as well, because I'd really be starting from scratch.

What would be killer is if we had a reference guide for the names for certain harder to find pngs. Background files and such.

[Theme] misaClean - Tutorial

misaClean Theme - Tutorial
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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

******RESERVED********

*************RESERVED**************

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?

Anrikus said:
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?
Click to expand...
Click to collapse
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.

pnyboy27 said:
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.
Click to expand...
Click to collapse
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.

Anrikus said:
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.
Click to expand...
Click to collapse
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.

oh goodness. THANKS FOR THIS TUTORIAL.
such a clean and simple look. LOVE IT.

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.

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?

I am not able to get the transitions look smooth/slow like in your video...any other trick on that?

spthacker said:
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?
Click to expand...
Click to collapse
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

ExilHh said:
I am not able to get the transitions look smooth/slow like in your video...any other trick on that?
Click to expand...
Click to collapse
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

pnyboy27 said:
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
Click to expand...
Click to collapse
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

How did you create the icons on the media tab?

ExilHh said:
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
Click to expand...
Click to collapse
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!
infi.krantz said:
How did you create the icons on the media tab?
Click to expand...
Click to collapse
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.

NICE
spthacker said:
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?
Click to expand...
Click to collapse
WOW....nice!!!:good:

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.

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

I love this theme

Develop Bugs

welcome