[GUIDE]Making an SVG graphic for android - Android Themes

Hello guys,
This is a thorough tutorial (with images) on how to make an SVG graphic for use in android themes
SVGs are vector graphics which do not get pixelated upon enlargement and retain their originality and they are a little faster to draw than PNGs
Click to expand...
Click to collapse
Tools Used:
Adobe Illustrator (any version but CS5+ would be great)
Notepad++ (or any other text editor would do)
Online PX to DPI checker (important)
Expertise:
Only some knowledge of Illustrator required to build an SVG out of it
Of course we can always make our own graphics if we know illustrator enough but for the sake of this tutorial, I will not go into that part instead I will use just a normal image from internet since this is not a graphic design tutorial but how to make an svg and format it properly to use in android
STEP 1 - PREPARE FOR INTIALS
First we need to know which graphic are we going to make since we will need its dimensions.
Here I will make a wifi icon which is displayed in dropdown panel, in other words, Quick Settings Panel.
This icon is present in systemUI folder with different modes named as
ic_qs_wifi_0,
ic_qs_wifi_1,
ic_qs_wifi_2,
ic_qs_wifi_3
ic_qs_wifi_4
So in total, we will have 5 icons of Wifi. Since all these icons are same except the bars opacity to detemine strength of signal, we will make only one SVG of it and manipulate its opacity in others to make different modes.
Now, I have this PNG in dimensions of 168x168px in folder drawable-xhdpi and I need to know its DPI for correct display in phone. Here DPI checker becomes handy.
{
"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"
}
Our illustrator canvas is going to be 84px X 84px.
STEP 2 - VECTORIZE THE IMAGE
Open Illustrator, File > New and use the following settings and click OK
Now we need an image, as I said that I will just use a random image from google, so this is what I have selected, you can also use this one for practicing purpose. (HINT: I usually use keywords like "wifi icon png" in google and select an image which is at least 250x250px in dimension and there are no mixed colors or gradients)
When we have this image saved in my PC, we will just drag it open in illustrator over the same file we just started
Now its time to Image Trace this PNG to get it in vector shape.
This tool is present in WINDOW > IMAGE TRACE in illustrator. Click it to get the dialog if you dont have it already there.
Select the Image, In the Image Trace Dialog, click on "Black and White" Icon to trace it in B&W tones.
You will get something like this
The image has taken the form of vector but isn't editable yet, so we will need to Expand it to get the separate layers. The tool is in OBJECTS > EXPAND
Just press OK in the Expand Dialog
Now we have the separate vector layers for everything in that image, it is grouped in one and usually becomes annoying if you want to select only one layer in that group, it will instead select the whole group so we will just un-group it to root level (this is usually un-group two times). The tool is in OBJECTS > UNGROUP. or else the shortcut is CTRL+SHIFT+G (press two times)
After ungroup, we will have all the layers separated and we will remove the layers we dont need, that is all the white we have there.
First click outside image anywhere to deselect everything and then click on white to select it and press DEL on your keyboard.
We are now left with only black stripes which are our wifi lines. There are 4, one circle and 3 curves.
Sicne we need them all seperate to set the opacity later, so we will not merge these together. (I will come to this part later)
Now select all these 4 layers and scale them down to fit in the white canvas we created with File > New
Now I want my wifi icon to have a circle behind it as well, so we will head to make a circle.
Press L to select Eclipse Tool and draw a circle in the center of the image.
Make sure this new created circle layer lies below all other layers
HINT: You can zoom in the canvas to see better for working. a 500% zoom is good here.
Now I will have to make a Compound Path of this circle to correctly generate its code usable on android.
Select the Circle by clicking on it and then Right Click on your Mouse and select "Make Compound Path"
If you have more than 1 layer, its always a good idea to color them with different colors to later identify their code upon export. because we are gonna need it.
Color All other stripes separately as well. You can color them anything you want because they wont effect our SVG.
We now have a vector of wifi with a circle we are going to use in SVG. head to next step
STEP 3- PREPARE THE SVG
Assuming that until here, we have everything under control, Just head to "File > Save As", and in the save dialog, select SVG, and click on Save once. (Only Once)
Make sure you have the same settings in the next dialod and press button SVG CODE.. to open the code in browser.
In the browser, you will see some nasty code that may seem to you a Ferengi Alliance Code of Business Conduct but dont worry, we dont need to understand a single bit in it but copy only chunks of this code to Notepad++ or the text editor you are using.
I have highlighted those chunks which we need to copy one by one in the same order from top down as they are,
-- BUT FIRST--
Lets build the svg file base structure to copy the chunks to, and we also need some introduction to the code in it.
In notepad++, make a new file and paste the code below in it
Code:
<?xml version="1.0" encoding="utf-8"?>
<vector android:height="84.0dip" android:width="84.0dip" android:viewportWidth="84.0" android:viewportHeight="84.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
</vector>
In the above code,
we are defining a vector with attributes of height and width of canvas and actual image in it. i-e 84..0dip as we concluded from px to dpi converter.
Next is the Path. We have 5 chunks of Path tag since we had originally 5 layers made in Illustrator.
Each Path tag has its attributes which will tell android how to render this svg.
android:fillColor will be the color of the shape
android:alpha will be transparency of the shape. 1.0 being opaque and 0.0 being completely transparent.
androidathData will be actual data of the shape layer (here in attributed to as PATH) which we created
Please note that these attributes are case sensitive. so if you write pathdata instead of pathData, it will not work.
Now Back to the browser where we have our code. Please see the picture below
In the above picture, I have highlighted the chunks of code we need to copy and paste between pathData attributes.
Do them in order as blue to first and pink to last.
The first highlight is the data of circle
Second is data of Wifi small circle
similarly other 3 path datas are data of 3 curves we had in wifi
After you are finished, your code should look something like this
Note that your path data and number will look completely different than mine because there are too many factors involved, i-e placement of your shapes, size of shapes and shapes themselves etc etc
I have put alpha of first pathData to 1.0 because this is the circle and I want it opaque.
Next I have put alphas of all else to 0.3 because first image is going to be drawn in android when there are no wifi signals or wifi is not connected, so 30% opacity to wifi curves.
Save this image as ic_qs_wifi_0.png
Now look into the picture below
In this, I have put alpha of second path to 1.0. This is when you will be getting only one bar of wifi so one bar will turn white and rest will stay semitransparent.
Save now as ic_qs_wifi_1.png
Similarly keep adding 1.0 alpha to android:alpha and save respectively as ic_qs_wifi_2.pngic_qs_wifi_3pngic_qs_wifi_4png
Put them in your theme folder in com.android.systemui/res/drawable folder (I guess you know this part if you are a themer)
Your image will be drawn in android as
Please feel free to ask me anything about it and I will be more than happy to guide you guys.
Please do not forget to quote me when you ask something as this way I will get notifications on mobile to reply to you quicker.
Thanks.

Related

[Tutorial] Notification Dropdown Text Color Changes/Status Bar Changes (Sense 3.0)

I hope this little tutorial from Average Joes will help the many questions about how to change the Notification Dropdown Text Color.
I have been on a mission for a couple of months to figure this beast out. Read many threads, PM'd many others. Alot of info is out there about how to change the text color for notification dropdown for Sense 2.0 and Sense 2.1. But Sense 3.0 made some changes to the structure of the XML's and how the Status Bar was using them. I will write out how I did it, and hopefully it will guide you along to what I think is an awesome change for a ROM or a Theme to make..
Requirements:
1. You must be able to decompile and compile your SystemUI.apk and Framework.apk
2. Understand how to edit XML's.
3. Know how to back up and flash all these changes. I would never suggest making all changes at once to SystemUI. If you make a mistake,your Status bar will fail to show up upon booting the phone..
This is what mine looks like:
{
"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"
}
In the first part I will cover changing the text color for Quick Settings Tab..
If you find an error of discover a new way of doing it, please let me know so I can update this tutorial..
1. Quick Settings
2. Status Bar
3. Transparency Notification/Quick Settings
4. Time Location on Notifications
5. Changing Text Color of Notifications in Dropdown
6. Animation in Notification Dropdown!!!!
** Special Thanx to - Stoney66,fernando sor,Bad Seed customs for creating this mod**
7. Using Wallpaper as Background in other Windows
** Special Thanx to - Clever for showing me this mod**
Always, Always Backup!!!!
Quick Settings:
(Part 1) - Changing Text Color of Primary and Secondary Text
Primary Method:
SystemUI\res\drawable-hdpi\layout\status_bar_preference.xml
1. Header Name of Item
Look for:
<TextView android:textSize="@com.htc:dimen/list_primary_m" android:textColor="@color/list_item_primary_text"
a. Substitute "@color/list_item_primary_text" with “#ffrrggbb” (whatever rgb color you want)
2. Status of Header Item (like on/off i.e secondary text)
Look for:
<TextView android:textSize="@com.htc:dimen/list_secondary_m" android:textColor="@color/list_item_secondary_text"
a. Substitute "@color/list_item_secondary_text" with “#ffrrggbb” (whatever rgb color you want)
Secondary Method: (Coming Soon)
Why the two?
The primary keeps any other text within the system from changing. The secondary method can affect any other ares of the the system that call upon this color in the xml. You decide what is best.
(Part 2) - Quick Settings Label
SystemUI\res\drawable-hdpi\layout\quick_settings.xml
Look for:
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:gravity="center_vertical"
a. Add android:textColor="#ffrrggbb” (whatever rgb color you want)
Example:
<TextView android:textAppearance="@style/TextAppearance.StatusBar.Title" android:textColor="#fffffd80” android:gravity="center_vertical"
Gets you a Yellow Label:
Status Bar Color - Date/Clock
SystemUI\res\drawable-hdpi\layout\status_bar.xml
Look for:
1. Clock
Look For:
<com.android.systemui.statusbar.Clock
a. Add: android:textColor="#ffXXXXXX" the “X’s” are in RRGGBB
Example:
<com.android.systemui.statusbar.Clock android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:textColor="#ff3366CC"
2. Date
Look for:
<com.android.systemui.statusbar.DateView
a. Add: android:textColor="#ffXXXXXX" the “X’s” are in RRGGBB
Example:
<com.android.systemui.statusbar.DateView android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:textColor="#ff3366CC"
Transparency Background for Notification Dropdown and Quick Settings
SystemUI\res\drawable-hdpi\values\drawables.xml
Look for:
1. Complete Transparency
<item type="drawable" name="list_item_background">#ffffffff</item>
a. Substitute: #ffffffff with #00000000
b. This will give you complete transparency
2. Partial Transparency
<item type="drawable" name="list_item_background">#ffffffff</item>
a. Substitute: #ffffffff with #77000000
b. This will give you less transparency
Results:
Two Lines Text in Notification Dropdown
Coming soon
Colorized Text in Notification Dropdown
SystemUI\res\values\colors.xml
<color name="white">#ffffffff</color> (This changes what the text color is when pressed in notifications)
<color name="black">#ff000000</color>
<color name="half_white">#7fffffff</color>
<color name="half_black">#7f000000</color>
<color name="primary_text_color">#ffffffff</color> (This changes the Notification Text Header)
<color name="secondary_text_color">#ff000000</color> (This changes the Notification text Content)
In each of the above lines marked with a comment, Substitute the >#ffXXXXXX with you RRGGBB values you want your text to be.
Screenshots coming in a few..
** I have this done in my mods for a while, however special thanx to Jon for finding out it only needed this file changed instead of several that I had done before. I knew it should take as many files to change the color. THANK YOU JON!!!
Time on Notifications Location
Framework-res\res\layout\status_bar_latest_event_content.xml
Look for:
<android.widget.DateTimeView
Cut and paste whole line into the second or third <Linearlayout... Right after the corasponding Textview
Placing the DateTimeview in the second <Linearlayout will place the time on the first line of the Notification.
Placing the DateTimeview in the third <Linearlayout will place the time on the second line of the Notification
Animation in Notification Dropdown!!!!Ported by myself!
** Special Thanx to - Stoney66,fernando sor,Bad Seed customs for creating this mod**
Required Attached files at bottom of post
All in SystemUI:
res\drawable\status_bar_background_animation.xml
res\drawable-hdpi\pulldown_anim1.png (1 thru 36)
res\layout\status_bar_tracking.xml
res\values\public.xml
Copy status_bar_background_animation.xml to the SystemUI\res\drawable folder.
Edit to suite, it has 36 png's list, but you can do how many every you want. Ensure you have the same amount of png's in res\hdpi\*.png as you have listed in the status_bar_background_animation.xml
status_bar_background.png - Controls the background, might need to make it more transparent so animation can be seen
Manual:
Edit status_bar_tracking.xml
Look for: (Should be first line)
<com.android.systemui.statusbar.TrackingView androidrientation="vertical" androidaddingLeft="0.0px" androidaddingRight="0.0px" androidaddingBottom="0.0px" android:focusable="true" android:visibility="gone" android:descendantFocusability="afterDescendants"
Replace with:
<com.android.systemui.statusbar.TrackingView androidrientation="vertical" android:background="@drawable/status_bar_background_animation" androidaddingLeft="0.0px" androidaddingRight="0.0px" androidaddingBottom="0.0px" android:focusable="true" android:visibility="gone" android:descendantFocusability="afterDescendants"
Notice we are adding the adding the status_bar_background_animation
Edit Public.xml
Look for any "APKTOOL_DUMMY_XXXX" id=XXXXXXXX
Change the APKTOOL_DUMMY_XXXX with:
status_bar_background_animation
Results: Edit only one line to define the resource!!!
<public type="drawable" name="status_bar_background_animation" id="0x7f020198" />
(DO NOT USE THIS ID=="0x7f020198") leave which ever ID Number is there from the APKTOOL_DUMMY!!!!!
Required Files for Animated Notification Dropdown!!!!!
This looks exciting I sure hope you know what your doing lol, you taking the first 6 posts!!!!!!
Man, this is epic, this is exactly what I was looking for couldn't have asked for better! Looking forward to the rest!
Wow Dude! After all that typing, I hope you still have the use of your hands. I didn't really have much to say, other than, this is an impressive tutorial, Gun so, I just thought I would drop by and...
c_live_lee said:
Wow Dude! After all that typing, I hope you still have the use of your hands. I didn't really have much to say, other than, this is an impressive tutorial, Gun so, I just thought I would drop by and...
Click to expand...
Click to collapse
Thanx, much more to come. Time I start giving back to all those that want to learn as well, or those that just like something I did.
Gotta be gone out of town for a week at a funeral. This thread is not dead. Just on a break.
1. Color text
2. What png's are where in the status bar.
3. Movement of clock to center
4. Deleting clock off status bar.
That is just to name a few items that will be spelle dout how to do.
I am always looking for more ideas..
Awesome work man! Can you tell me where the text and color for the notification pulldown header is located?
http://db.tt/dUpdaAt
Were it says gingeritis 3d, i wana be able to change the text to my themes name, and i want to change the color of the bar underneath that one, the one that says notifications
Sent from my TBolt using my f***king thumbs...
sonami said:
Awesome work man! Can you tell me where the text and color for the notification pulldown header is located?
http://db.tt/dUpdaAt
Were it says gingeritis 3d, i wana be able to change the text to my themes name, and i want to change the color of the bar underneath that one, the one that says notifications
Sent from my TBolt using my f***king thumbs...
Click to expand...
Click to collapse
I am away from my main computer, but from memory it's in the
SystemUI\res\layout\status_bar_expanded.xml (again from memory.. will add as soon as I get back into town)
Ive been trying to learn how to theme for the longest. Im going to study ur guide and make sure i can do it perfect! Thanks
I'll ask the obvious n00b question ... what app can I use to edit the file via phone or OS X. I've been trying to use the UOT kitchen to change the notification text color. The preview looks good but it always comes out black. I stumbled upon this topic doing a search. I understand where (SystemUI\res\drawable-hdpi\layout\status_bar_preference.xml) and what (FF000000 to FFFFFFFF) needs to be changed, but I'm having trouble getting the right tool(s) to let me open/edit the file. I've attached a screenshot. I'm trying to make the text white. Thats all I need to do. Thanks in adv.
*edit*
should mention I'm currently on BAMF Forever 1.0.2 which is Sense 3. I'm usually on CM7 and the UOT Kitchen works perfect on it.
julesism said:
I'll ask the obvious n00b question ... what app can I use to edit the file via phone or OS X. I've been trying to use the UOT kitchen to change the notification text color. The preview looks good but it always comes out black. I stumbled upon this topic doing a search. I understand where (SystemUI\res\drawable-hdpi\layout\status_bar_preference.xml) and what (FF000000 to FFFFFFFF) needs to be changed, but I'm having trouble getting the right tool(s) to let me open/edit the file. I've attached a screenshot. I'm trying to make the text white. Thats all I need to do. Thanks in adv.
*edit*
should mention I'm currently on BAMF Forever 1.0.2 which is Sense 3. I'm usually on CM7 and the UOT Kitchen works perfect on it.
Click to expand...
Click to collapse
on OS X I use text wrangler for editing xml's.
Gunthermic said:
Colorized Text in Notification Dropdown
SystemUI\res\values\colors.xml
<color name="white">#ffffffff</color> (This changes what the text color is when pressed in notifications)
<color name="black">#ff000000</color>
<color name="half_white">#7fffffff</color>
<color name="half_black">#7f000000</color>
<color name="primary_text_color">#ffffffff</color> (This changes the Notification Text Header)
<color name="secondary_text_color">#ff000000</color> (This changes the Notification text Content)
In each of the above lines marked with a comment, Substitute the >#ffXXXXXX with you RRGGBB values you want your text to be.
Screenshots coming in a few..
** I have this done in my mods for a while, however special thanx to Jon for finding out it only needed this file changed instead of several that I had done before. I knew it should take as many files to change the color. THANK YOU JON!!!
Click to expand...
Click to collapse
I have done this and it does not change the second line of the notification. It also turns the first line back to black if you select it and let go, i.e. selecting Disk Drive or Charge Only. Is there another xml file that I need to edit along with this one to chane the text color of the notifications?
Edit: Nevermind, I figured it out. Thanks for the tutorial.
Devildog8791 said:
I have done this and it does not change the second line of the notification. It also turns the first line back to black if you select it and let go, i.e. selecting Disk Drive or Charge Only. Is there another xml file that I need to edit along with this one to chane the text color of the notifications?
Edit: Nevermind, I figured it out. Thanks for the tutorial.
Click to expand...
Click to collapse
What did you do?
More tutorial to come.
Gunthermic said:
What did you do?
More tutorial to come.
Click to expand...
Click to collapse
To be honest, I found a theme that already had it done and compared the xml files.
Edit: I am having one problem though. It seems that some third party apps like Pandors and Handcent are still black text. Do you know where I need to go to fix this or is this something that you are battling too?

[Tutorial] How To Make A Custom Google Maps Icon Using Photoshop

{
"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"
}
Let me start by saying that I used Photoshop CS6 to make this but you can use almost any design software to create it. The base we will be creating can be used for an icon set using the mask we’ll be making as well as stock images or your own. I’ve included the PSD file for easy reference so download it and fire up Photoshop, let’s get started! (Here's the video tutorial if you hate to read. )
THE BASE
Step 1: Open a new document. Name it whatever you like, set the size to 512x512 pixels and the ppi to 300. Set the color mode to RGB.
Step 2: Grab your rounded rectangle tool,(It’s hiding below the rectangle tool). Now click somewhere near the center of your artboard and set the dimensions to 490x490 with a corner radius of 66 pixels. Hit enter, now double click the layer in the layers panel and rename the layer “base”.
Now hold ctrl+a to select everything, switch to your move tool (v) and up in th etop toolbar click the indicators to center the square. Hit ctrl+d to deselect. You should now have something that looks like this.
Step 3: Make a copy of the square by holding down ctrl and tapping J on the keyboard. Hide that layer for now by clicking on the eye next to the thumbnail in the layers panel.
Step 4: It’s time to add a gradient to the base. With the base layer selected, click on the “fx” icon at the bottom of the layers panel and select “gradient overlay”. In the new dialog box that pops up click on the actual gradient to open up the color picker. Double click the color stops and type in C5C5C5 for the hex code on the first color, and E4E4E4 for the second. Leave everything else set to default and click ok until you are back at your artboard. You should now see something like this. (without the shadow)
THE ICON
Step 5: Now draw out a long skinny rectangle using the regular rectangle tool making sure to draw it all the way across your artboard. Like this:
Hold ctrl+T to bring up the transform tool and, holding shift, rotate the rectangle over the top right corner of the base. Rename this layer to “One”. Copy that layer using cntrl+J and rotate it across the right side of the base, a little lower than the corner. Repeat the process until you have something like this:
Step 6: Arrange the rectangles in this order in the layers panel: Two>One>Five>Three>Four. Now select both One and Two using cntrl+left click. With the rectangle tool selected change the fill of the shapes to D7D253. Now select the remaining shapes and color them AEAEAE.
Now draw a brown rectangle to add some color. Use the color code A6917D and place it below all of the “street” layers. You should now have something like this:
Step 7: Group all the rectangles together by selecting them all and hitting ctrl+G. Then right click on the group in the layers panel and select “merge”. Now select the base layer, right click it in the layers panel and select “rasterize layer style”. Reselect the group of shapes and right click, select “create clipping mask”.
Step 8: Next up on our to do list is the little blue location indicator. Grab your ellipse tool and, while holding shift, click then hold down alt as well and drag out a circle. Place it over the number three layer. Let’s give our circle a subtle blue gradient. Go to fx>gradient overlay and set the gradient colors to 88adc5 and 84b1d1. While you've got the fx box open, give it a drop shadow and lower the shadows opacity to 75% with a distance of 7 pixels and a size of 13 pixels. Set the angle to 90 degrees. Click ok. It should now look like this:
THE MASK
Step 9: Make one last copy of the base layer. Right click on it and select “clear layer style”, then move that bad boy to the top of the list. Up in the navigation panel go to filter>noise>add noise and make sure uniform is selected and give it 4% noise, click OK.
Step 10: Let’s add a gradient to the mask. Set the foreground color to eeeeee. And go to fx>gradient overlay. Once in the fx box, select foreground to transparent gradient. Set the style to radial, the angle to 90 degrees and the scale to 150%. It should now look like this:
Now just decrease the opacity of the mask layer to 29%.
Step 11: Next we will give it a nice subtle drop shadow. Re select the base layer. Go to fx>drop shadow. Set the color of the shadow to 595957. Set the opacity to 48%, angle to 90 degrees and both the distance and size to 5. It should now look like this:
Finally, save it as a .png image file. If you’re going to be making an icon set, be sure to place your themed icons in-between the base and mask and save them individually. Thanks for reading, I hope you had fun and learned a thing or two along the way.​

[TIPS, TRICKS, GUIDES and SHORTCUTS] Graphics Software Help for Themers

TIPS, TRICKS, GUIDES and SHORTCUTS
Graphics Software Help for Themers
I created this thread for anyone who would like help or want to learn quick ways in which to make theming and/or modding easier while using various graphics software. This software includes Adobe CS(Photoshop, Illustrator, etc.), GIMP, Paint.NET, Xara, CorelDRAW, Painter, etc.
This thread ideally should be able to help those who would like to use a particular program to create icons, launcher themes, boot animations, wallpapers, etc. There are lots of great theming help threads but within these threads there may be a few questions on how to use certain software to accomplish various tasks. A thread dedicated to just that would be ideal so as to not to deviate from the main topics of those threads.
All questions pertaining to how you would use a particular software for your creation are welcome and I would encourage other themers or anyone else who has knowledge and would like help, to please do so.
I am mostly familiar with Photoshop. I'm by no means an expert but I'm comfortable enough with the program to be able to be helpful wherever and whenever I can. There are XDA members who know more than I about this particular program as well the others mentioned.
I will add to this thread as much as I can and will also add helpful posts of other users to the OP.
Lets start:
How to open multiple images as Photoshop layers:
1. Opening Adobe Bridge and navigate to the folder that contains the images you want to add to your document. I have Bridge open to a folder on my Desktop with five images inside of it. I’ll select the first image (the one on the left) by clicking on its thumbnail.
{
"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"
}
2. Then, to select the other two images as well, I’ll hold down my Shift key and individually select images or click on the last of the five images (the one on the right). All five images are now highlighted and selected. Or CTRL+A to select everything in your folder.
3. With all of the images selected, go up to the Tools menu in the Menu Bar along the top of the screen in Bridge, choose Photoshop for a list of Photoshop-specific options, then choose Load Files into Photoshop Layers.
4. Photoshop will open automatically, if it’s not open already, and will add all five images (or as many images that you have selected) into the same document. It may take a few moments for Photoshop to process everything, but when it’s done, you’ll see a single document open on your screen containing all of your photos.
(Photoshop) How to apply an action for your images. You can record an action and set it to one to three buttons. (Photos may be provided later)
1. Go to Window and click Action and the Action popup or menu will show on the right.
2. Click the drop-down next to Action and click New Action.
3. Name your action whatever you'd like. Where it says Function, I would recommend creating one so you don't have to keep selecting your action and clicking the Play button every time you want to use your action. For example, you can make F2, Shift+F2, or Ctrl+F2 a function and anytime you you want your action to start, just click the button or button combinations you made.
4. Click Record and perform your action from start to finish then click the Stop button. Now all you have to do is keep clicking your pre-programmed button anytime you want to use these actions on your images.
(Photoshop) How to batch apply one action to multiple images. Once you have a recorded action you can apply it to an endless amount of images at one time without pressing anything.
1. Go to File > Automate > Batch.
2. At the top in the Play section, where it says Set, find your folder in the drop-down.
3. Underneath Set you will see Action. The drop-down will have your pre-programmed actions and select the one you want.
4. Now go to the Source section. Click the Choose button and select the folder in which you would like your image files saved then Click Ok.​
Reserved
One more
vanessaem said:
One more
Click to expand...
Click to collapse
cool work......this will help new members
Good job, are you still playing on adding more to this thread?
mloc33 said:
Good job, are you still playing on adding more to this thread?
Click to expand...
Click to collapse
Thanks a lot. I would like to but don't have the time at the moment. This thread was also created for the community. It's for anyone looking for troubleshooting with the various graphics programs used to theme. Any and everyone could take part and is encouraged to do so. But I guess no one needs the help...lol.
However, the thread is still here.
On gimp, I opened a .PNG file, a quick setting toggle icon to be specific, it is in a greenish-yellow color and I wanted to change to white. So I set the foreground color to absolute white and picked the pencil tool, lower its size down to a pixel then I clicked on the image,expecting white color to fill the pixel, instead it "popped" out the same greenish-yellow color of the original image. Tried another tool, still the same result. But tried another .PNG image and BAM! white comes out.......then I realized some .PNG images worked while some didn't. Does anybody know what's causing this?
I'm still new to GIMP
And also the foreground color never changed from white and background never changed from black......... also if black is used as foreground color it works. So what's wrong with white??
Samuel2599 said:
On gimp, I opened a .PNG file, a quick setting toggle icon to be specific, it is in a greenish-yellow color and I wanted to change to white. So I set the foreground color to absolute white and picked the pencil tool, lower its size down to a pixel then I clicked on the image,expecting white color to fill the pixel, instead it "popped" out the same greenish-yellow color of the original image. Tried another tool, still the same result. But tried another .PNG image and BAM! white comes out.......then I realized some .PNG images worked while some didn't. Does anybody know what's causing this?
I'm still new to GIMP
Click to expand...
Click to collapse
Are you trying to do image masking in order to fill a particular area white?
Actually, Im trying to add white on top of the old color to as to change the whole icon to white. If that is what you also meant, then yes....
Samuel2599 said:
Actually, Im trying to add white on top of the old color to as to change the whole icon to white. If that is what you also meant, then yes....
Click to expand...
Click to collapse
I'm not sure if GIMP had anything to do with one .png's ability to work properly over another. However, it may depend on the quality of the actual image itself.

[Kustom][Official] Kustom Komponents

Kustom Live Wallpaper (KLWP) is the most powerful HD Wallpaper creator ever! KWGT is Widget creator counterpart. Use their awesome WYSIWYG (What You See Is What You Get) editor to create you own design and display any data you need, at once, and with wonderful animations too (KLWP only)! If you need more info or have questions please use these thread:
KLWP: http://forum.xda-developers.com/android/apps-games/app-kustom-live-wallpaper-t2916666
KWGT: http://forum.xda-developers.com/android/apps-games/app-kwgt-kustom-widget-maker-android-4-4-t3225173
Please use this thread to share Kustom Komponents WIPs, Kustom Komponent Screens or links to free Kustom Komponents (komp.zip files)
Komponents are basically presets inside a preset or reusable items, so a way in Kustom to create your own redistributable object. So, for example, let's say you want to create a clock but hide the complexity to the user and enable him to just set the color and the font in use, well, Komponents will do exactly that!
Material Clock Komponent sample: https://www.youtube.com/watch?v=RbvJwPQeTNc
Signal Bar Komponent tutorial: http://kustom.uservoice.com/knowledgebase/articles/434600
Quick reference, how to create a komponent
Open a preset, press "+" on top right to add a new module
Select Komponent -> New Skin
Create your Komponent possibly using "globals" (for globals check http://kustom.uservoice.com/knowledgebase/articles/426738-how-to-use-globals)
Export the Komponent pressing the "export" icon on top bar
Go in your SD card under "Kustom/Komponents"
Share the file "komp.zip" as it is
How to use a Komponent
Copy the "komp.zip" file as it is in the SD card under "Kustom/Komponents"
Open a preset, press "+" on top right to add a new module
Select Komponent -> SD Card and browse for the desired Komponent
Weather Komponents
Since weather komponents are quite a common need i have attached an example one to start with so you can create a new one very very quickly. There are 2 ways to do that:
From PC:
Open the attached komp.zip file
Replace all the images in the "Bitmaps" folders keeping the same names
Save the Zip
Done!! If you want also to change title / author either edit the "preset.json" file in the zip or import export as instructions below
From the device:
Add the Komponent from your SD card
Go inside the Komponent and Inside the "Bitmap Group" with the Advanced Editor
Pick a new image for every state listed (so enter the image, press "pick image" and choose the corresponding image)
Export with your details / name / description
Done!
Welcome everyone! Show us what you've made!
Baseline Komponent for the creation of Weather Iconsets
This komponent should be available to all of you in the next update, but if you want it now have at it in the link below.
So this is a fairly straight forward iconset using the well know Climacons glyph set.
There are several reasons I built and released this as an unlocked, free, Komponent.
1st. You can use this as a base to create your own LOCKED/Paid Komponent APKs. You still have to do a bit of work, but all of the code base is already in place for making the right icon show.
2nd. The globals here give you some ideas on what you should be including with your iconset Komponents. Just having a font is OK, but having other stuff like background shapes is better.
3. This is FAR easier to handle in terms of creating weather layouts. You no longer need to go into the code and change wi(icon) to wf(icon, #) for every single icon you have in your forecast list.
Simply add the Komponent, and choose from the DAY dropdown list which you want, Current or Forecast#, the code takes care of the rest.
List of Globals
*Day* (list) - Choose current or forecast day number
*Iconset* (font) Change the icons the Komponent uses easily
*Icon* (color) - Changes the color of the weather icon
*IconSize* (number) Change the size of the weather icon relative to BG
*Outline* (toggle) Change icon to an outline
*Stroke* (number) Change the width of the outline.
*BGStyle* (list) Change background shape (off, square, Circle, Exagon)
*BG* (color) Change the color of the backgroud shape
*Corners* (number) adjust the corner roundness on the BG shape.
Please remember that if you change the font used, you do HAVE TO go into the "Weather Icon" text layer and change the formula to reflect with characters your icons are assigned to.
Saved for a How-To on editing the code for your own font.
Coming soon.
ritalin said:
This komponent should be available to all of you in the next update, but if you want it now have at it in the link below.
Please remember that if you change the font used, you do HAVE TO go into the "Weather Icon" text layer and change the formula to reflect with characters your icons are assigned to.
Click to expand...
Click to collapse
Very basic question I know, but how do I install this? I can't find which folder to place it in...
StrangerWeather said:
Very basic question I know, but how do I install this? I can't find which folder to place it in...
Click to expand...
Click to collapse
Please check post on top, just copy it in the SD card under "Kustom/komponents" (the directory should already be there), then you can add it in the editor as you add a shape or text, just select Komponent -> SD card and browse for this. Since that Komponent is unlocked you will start in simple mode (you will see the tunable options only) but if you want to edit the komponent you can just "unlock" it and see the internals.
frankmonza said:
Please check post on top, just copy it in the SD card under "Kustom/komponents" (the directory should already be there), then you can add it in the editor as you add a shape or text, just select Komponent -> SD card and browse for this. Since that Komponent is unlocked you will start in simple mode (you will see the tunable options only) but if you want to edit the komponent you can just "unlock" it and see the internals.
Click to expand...
Click to collapse
Thanks but precisely the problem is that I don't see a folder called Komponents. I have bitmaps, wallpapers and fonts. That's it.☺
Edit: OK, never mind, I just created it...
StrangerWeather said:
Thanks but precisely the problem is that I don't see a folder called Komponents. I have bitmaps, wallpapers and fonts. That's it.☺
Click to expand...
Click to collapse
Ooops! The "komponents" folder is not created automatically. I have fixed this on next version, you will have to create it manually this time or just try adding a komponent, select SD card, it will show an empty list but create the folder. Thanks for reporting!!
Changing weather images
{
"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"
}
Download Komponent: https://www.dropbox.com/s/g45gl7ac9aex82y/weather_images.komp.zip?dl=0
Haven't been on Xda as much lately but glad you started this Frank!
Thx!
New Premium Weather Komponent
Soft Elements
https://play.google.com/store/apps/details?id=org.qlagdesigns.softelements
This is the first of many weather iconset komponents, I will be releasing.
This Komponent takes the "Kitchen Sink" approach to its design. Thats to say that there are a large number of GLOBALS, to allow you to take my icon design and make it your own. All in all there are 30 globals for customization. Allowing you to change everything from the size of the icon, its color, its design, to the shape, color and other special characteristics of background shapes.
*LIST OF GLOBALS:*
Code:
[B]*ICON GLOBALS*[/B]
1. Day
2. Icon Color
3. Icon Rendering Mode
4. Icon Size
5. Outline (Fill, Outline, Combined
6. Stroke Width
7. Stoke Color
8. Stroke Rendering Mode
[B]*BACKGROUND SHAPE GLOBALS*[/B]
1. Shape Style (NONE, Square, Circle, Exagon)
2. Corner rounding
3. Background Color
4. Background Gradient Type
5. Gradient color
6. Gradient Width
7. Gradient Offset
8. Gradient Center X
9. Gradient Center Y
10. Shadow On/Off
11. Shadow Blur
12. Shadow Direction
13. Shadow Distance
14. Shadow Color
[B]*BACKGROUND SHAPE BORDER GLOBALS*[/B]
1. Border On/Off
2. Stroke Width
3. Stroke Color
4. Stroke Gradient Type
5. Stroke Gradient Color
6. Stroke Gradient Width
7. Stroke Gradient Offset
8. Stroke Gradient Center X
9. Stroke Gradient Center Y
Media App Iconset.
*Media Icon Komponent is live in the playstore*
https://play.google.com/store/apps/details?id=org.qlagdesigns.mediaapps
*Since Im offering this up for free, do me a favor and rate the app.*
This Komponent allows you to display an icon of the currently selected Music source.
There are a total of 40 different media apps that are supported by this iconset.
Additionally there are two other icons to handle apps that do not have their own icon.
1- A generic media icon, that appears only when none of the package name checks in the string are true.
2- A special icon that only displays if Media Utilities renders a null output for current package name. This icon is useful to relay the fact that a source needs to be choose.
This Komponent is UNLOCKED you can do with it as you like, so long as your follow two conditions.
1. You may NOT repackage this as your own Komponent and attempt to sell it.
2. If you use this in your own project and decide to sell said project, please provide attribution.
*IMPORTANT INFO*
This Komponents code uses Media Utilities to provide the package name of the current app in use. When Kustom builds this feature directly into the app, I will update this Komponent to reflect the new variables.
The Playstore version of Media Utilities is no longer being updated and does not seem to function with this Komponent. You need the latest build meant for KitKat, v153. You will need to side load this apk. The files can be found on the Media Utilities Beta Community page. https://plus.google.com/communities/103994832080931061321
KSymbolSet for Kustom
This is a Set of Symbols and Signals as Komponents made for the app 'Kustom Live Wallpaper'.
The Sets starts with 4 Symbols/Signals and will be continously extended.
Alarm/Battery/Cell-Wifi Signals/MusicStatus
Possible Settings:
WMAlarmSymbol:
MainClr: Color for the Symbol when Alarm is active
OffColor: Color for the Symbol when Alarm is off.
WMCellSignal:
MainClr: Color for the Symbol
OffColor: Color for the Symbol when Mobile Network is off.
WMWifiSignal:
MainClr: Color for the Symbol
OffColor: Color for the Symbol when Wifi is off.
WMBatterySymbol:
MainClr: Color of Symbol
WarnClr: Color of Symbol when WarnPerc reached
FullClr: Color of Symbol when FullPerc reached
FlashClr:Color of the Flash when charging
WarnPerc: Percentage when you will be warned.
FullPerc: Percentage when Battery is full
FullType: Type of Sysmbol ON Filled Symbol, OFF stroked Symbol.
WMMusicStatus
playclr: Color for PlayButton
pauseclr: Color for pauseButton
You need Media-Utilities:
Ultra configurable National Geographic picture of the day Komponent by Carla Jacobs.
How to use?
Copy the Komponent in the sdcard under "kustom/komponents" (folder should be already there) or import it from the app (pressing "+" to add a Komponent and then the "+" on bottom left and click "import" to select it from your phone memory)
Create a preset or start from a builtin one
Press "+" on top right to add a new item
Select the Komponent
Configure parameters as you like, scale, reposition and so on. Loading the images might take some time (so save it and go to your home to see it in action)
@frankmonza question. Why can't I export the bitmap weather Komponents? Scalable works fine.
rkucheran said:
@frankmonza question. Why can't I export the bitmap weather Komponents? Scalable works fine.
Click to expand...
Click to collapse
You should be able to export both, what's not working?
frankmonza said:
You should be able to export both, what's not working?
Click to expand...
Click to collapse
The images show "not set" after export.
rkucheran said:
The images show "not set" after export.
Click to expand...
Click to collapse
Please contact me via hangout on G+ or send me an email, shouldn't happen
frankmonza said:
Please contact me via hangout on G+ or send me an email, shouldn't happen
Click to expand...
Click to collapse
Cleared cache and data and fresh install. So far seems to be OK. Thanks for your reply.
Edit - Spoke too soon. Not working again.
Hi Frank! First I want to thank you for this masterpiece, one of the best apps I've used on android. I just have one question. Is changing weather icons available only in paid version?
Sent from my Nexus 4 using XDA Free mobile app

[KLWP] [TUTORIAL] Create a Material animated Floating Action Button

This is the first of a set of basic animation tutorials for KLWP. If you do not know what KLWP is main thread is available here.
Final result (full video tutorial at the end, final result KLWP file attached)
{
"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"
}
Step 1: create the FAB button that will trigger the animation
Start from an empty preset
Create a global that will be used to trigger the animations (Globals -> Add -> Type Switch), this global will be used to control animations around
Add the Image for the FAB, change its name to better see it in the list
Load an Image that you like, here i am using a generic "plus" button
Set single Touch action to "Global Switch" and pick the global we just defined ("FAB"), so when touching this image that global will be toggled on/off
Go to animations and add a new one, select "ReachOn -> Global Switch" so it will be triggered by the global switch, set speed to 5 to make it faster (5 is 50ms), set type to Rotate and amount to "63" so it will not rotate completely and stop a bit earlier looking like an "X" instead of a "+" (you can test the animation pressing the "play" button on top)
To make it a bit fancier add another animation triggered by the same global, set speed to 5 as above and select "Color Filter Out", this will desaturate the image on click, making it black and white when opened
Your button is done! Save, go back to screen and see it in action. Cool eh?
Step 2: create app button
Add another Image object, change its name to "Facebook" or whatever you want
Add a Switch animation of type Scroll so the Image will move when switch triggers, set speed at 5 as above, and play with "speed" and the "play" button on top right until you reach the desired result, set also the "angle" param if you want to change scroll direction and mode to "overshoot" if you want to bounce when opening
Add another Switch animation of type "Fade In" so the item will fade in when switch changes (and while fades), the item will disappear because its initial state will be invisible, if you click the play button you will see it become visible
Go back to the root and check with the global switch (changing it) if the animation is ok, if its ok change the position of the Facebook button and place it on top of the list so it will go below the FAB (so it will look like it appears from the back)
Done! Save and test it on screen
Step 3: create additional buttons
Copy the facebook button using copy / paste
Change the name and the image (in this case we use Youtube)
Go to animations and change the scroll "speed" parameter to make it go farther, test it with play (you will just see an empty red rect because the item is transparent but it will be enough to tune speed
Save, done!
Video
https://www.youtube.com/watch?v=-UA1kIZcCp4
Nice job Frank. As always.
Sent from my OnePlus One using Tapatalk Pro
Awesome thanks Frank!
Great lil tutorial...thumbs up!
Sent from my LG-D850 using XDA Premium HD app
Great Tutorial.
Could you make a tutorial with animation between wallpapers (screens)?
mimidudu said:
Great Tutorial.
Could you make a tutorial with animation between wallpapers (screens)?
Click to expand...
Click to collapse
Like changing wallpaper when swiping or something different?
frankmonza said:
Like changing wallpaper when swiping or something different?
Click to expand...
Click to collapse
Hi frankmonza,
How to make a horizontal menu to switch the color of the letters, when we move the screen?
Sample Menu:
Files Home Weather - white letters
Screen 1: Home data
Screen 2: Weather data
Screen 3: Calendar events
When the corresponding screen is showed in menu the word corresponding is yellow, the other two whites.
Thanks in advance for your help.
mimidudu said:
Hi frankmonza,
How to make a horizontal menu to switch the color of the letters, when we move the screen?
Click to expand...
Click to collapse
Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.
In general the idea is the following to create the text item (and i will try to create a tutorial on this):
You create a Text object, position it, set font and so on, and set text to one of the menu items
Go to animations and set animation to "fade out"
Copy the text module you created, set color to yellow or what you prefer (the selected color)
Go to animations and replace "fade out" with "fade in"
Done, at this point your text will be white in all the screens and fade to yellow in the center one
Then, in order to create the ones in screen 1/3 do this:
Copy the 2 modules you created above
Change text and position them to the left or right (depending on where it should be)
Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
Done, these items will get selected in their screen
Finally to create the bar below that moves:
Create a rect, yellow, thin, below the center
Go to animation and set animation to "scroll"
Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)
Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.
Hope it helps and i will try to make a video / proper tutorial soon.
I will try.
Thanks.
Can you fix the YouTube link?
AndreAkaNick said:
Can you fix the YouTube link?
Click to expand...
Click to collapse
Fixed sorry
how add touch actions??
frankmonza said:
Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.
In general the idea is the following to create the text item (and i will try to create a tutorial on this):
You create a Text object, position it, set font and so on, and set text to one of the menu items
Go to animations and set animation to "fade out"
Copy the text module you created, set color to yellow or what you prefer (the selected color)
Go to animations and replace "fade out" with "fade in"
Done, at this point your text will be white in all the screens and fade to yellow in the center one
Then, in order to create the ones in screen 1/3 do this:
Copy the 2 modules you created above
Change text and position them to the left or right (depending on where it should be)
Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
Done, these items will get selected in their screen
Finally to create the bar below that moves:
Create a rect, yellow, thin, below the center
Go to animation and set animation to "scroll"
Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)
Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.
Hope it helps and i will try to make a video / proper tutorial soon.
Click to expand...
Click to collapse
This could be a separate tutorial in itself. :good:
Bump.

Categories

Resources