WOW! Becoming a Samsung Mobile UI Themes Designer


welcome to Wow webinars of wisdom from

the Samsung developer program I'm Toni

Moreland and today we're talking themes

so a theme is the phone user interface

that you can design the background the

app icons fonts all of the different

screens and then upload that design to

the Galaxy store and sell them around

the world so if you're joining us live

and you want to chat with us and you

have any questions you can post your

questions and we'll get to them

throughout the webinar if you're

watching this later and you have

questions just use our forum post a

question there and we'll get to your

answers all right so you're ready to

start designing and selling to the world

excellent so Samsung makes it easy and

free and Mac or PC all without doing any

coding the software is called theme

studio but we don't just let anyone use

it you have to show us that you have the

design skills and you do that by

submitting a themes portfolio so today

I'm going to talk to you about what

makes a great themes portfolio

submission and I'm also going to talk

about what is not a good themes

portfolio submission so how do you do

that without the software well you

download our starter kit it helps you

come up with the different screens that

are required to show as well as the app

icons fonts you can establish the colors

don't worry that you don't know how

themes do do works just have fun be

creative be different this is your

concept design of what your theme would

look like when you're done with your

theme design submit your portfolio our

review team will then look over the

designs if we love your work

we'll give you access and you can start

designing and selling themes using theme


all right let's talk themes so what

makes a great themes portfolio

submission and more importantly what

doesn't make a great themes portfolio

submission so the first tip I want to

give you is don't use copyrighted images

in fact don't even use stock images we

want to see your talent as a designer so

all of the graphics that are in your

concept must be custom that you designed

yourself you know there's a lot of

themes out there on the Galaxy store and

one of the most important things is to

be unique so we want to see custom

artwork that you designed yourself in

your concept when submitting your

portfolio there are six different

screens that we need you to design the

lock screen the home screen message

screen the dialer contact and settings

it's super important that your design is

cohesive sitting on the review board we

see a lot of different designs that come

in that are really nice but the contact

screen won't look like the setting

screen they'll actually look like two

different concepts so it's important

that your overall concept is very

cohesive and that every screen conveys

that concept

all right colors lots of colors to

choose from it's very important that

your theme has a nice color palette to

it don't just go pick random colors and

throw them in there actually take some

time and look at your colors and come up

with a nice color palette if you need a

little help there's actually websites

online that you can use that will help

you determine a nice color palette all

right let's talk fonts so fonts can be

fun and fonts can be crazy but fonts can

also be hard to read so when you're

designing a phone UI you want to make

sure that the fonts are easy to be read

I mean people are grabbing this phone

and looking at it quickly they need to

be able to read the words in your theme

so one of the areas that I like to have

a lot of fun with are the app icons do

not use the default icons that are

included with the starter kit we need

you to redesign all of the icons and

symbols that are in the starter kit

often we'll get submissions from people

that have created a great concept the

others wonderful design but they haven't

recreated all of the app icons and when

that happens we have to reject it so

make sure you redesign all app icons in

the starter kit you spend a lot of time

on it don't worry you can actually use

these icons on few

things that you submit and remember

these are icons and symbols that need to

be easily read it quick clamps so you

don't want to have a busy background

behind them and they should be easily

legible people should understand what

the icon symbol represents have fun but

you know be smart with that all right

when you're done with your design take a

break step away from your computer go do

something fun clear your mind


when you come back to your design you

won't see all the individual elements

you are working on you'll see the design

as a whole you can answer that question

is my design cohesive all right let's

talk getting started so what are the

steps the first step is to go download

the starter kit the starter kit includes

a Photoshop template file for those that

are not using Photoshop though we

actually include also a PDF that shows

you the example screens that you need to

redesign as well as all the app icons

and we also give you a phone frame of

one of the Samsung devices so that you

can design within the phone frame itself

all right so let's take a look at the

starter kit starter kit includes the

Photoshop template file an example PDF

file as well as just the blank phone

frame I'm gonna go ahead and open up the

Photoshop template file and you'll see

within this Photoshop file there are

seven artboards here one of the our

boards is just the directions that tells

you all of the steps that are required

the remaining six artboards those are

the artboards that you're required to

redesign when you're submitting your

application now I'm using a really neat

feature within Photoshop called generate

image assets what I'm gonna do is go up

to the file and just make sure that

generate image assets is selected now

what that does is that each of the

artboards that end with dot jpg those

artboards are automatically exported by

photoshop into a new subfolder so i'm

gonna go back to my Finder window and

notice now within this folder I have a

new subfolder that ends with assets if I

open that up you'll see here are the six

JPEGs that have automatically been

exported now what's really neat with

this feature is that as I work with the

artboards and I make changes to them

Photoshop automatically exports and

updates all of these JPEGs so it makes

it really easy for you when it comes

time to exporting your JPEGs for your

application okay I'm gonna go back into

Photoshop here

so I'm gonna start working with these

artboards and update the different

layers the one thing I want to do to

make it easy to navigate is make sure

that auto select is selected what that

does is as I click on the elements

within Photoshop Photoshop will

automatically select that item so I want

to work with this background here now if

you've noticed there's a special icon on

some of these layers these are all smart

objects what that means is there's an

embedded Photoshop file within this

master Photoshop file so I'm gonna

double click the background and now what

I'm gonna do is take my part work that I

already designed I'm just gonna copy it

to the memory of the computer and I'm

gonna paste it into this new Photoshop

file I'll go ahead and get rid of the

background it's not needed the next

steps pretty important you have to save

it so I just did the key command for

save and then I'll close that and you

can see it updated in my artwork there

but not only did it update there I'm

gonna go back to my Finder window open

up that asset folder and notice now the

home dot jpg file has been updated it's

pretty cool

the next thing I'm gonna do is start to

update the different elements within

this design let's go ahead and change

the text so I'm gonna go ahead and click

on one of those that'll open up that

subfolder here I'm gonna select all of

my text layers I'm gonna want to change

the color of that let's pick something

that is more in line with this design

find a nice purple that'll work and then

let me change the font I'm gonna go up

to this font here Advent Pro gonna

select semi bold now the next element to

work with are gonna be the app icons so

I'm gonna just click on the phone icon

there and you can see it automatically

selects that smart object layer I'm

gonna double click that layer so that I

can open up the smart object I'm gonna

go to my artwork that I've already

designed I'm just gonna go up to select

all copy go on to that layer then just

go paste I'll delete

the original phone app save it that out

of the way and you can see it's updated

here but because it's a smart object

whatever that artwork is used within

this Photoshop master file it'll update

there as well so notice down here in the

lower left corner because it's the same

icon it's updated there as well all

right I'm gonna go through pretty

quickly here and just update the

remaining app icons so again selecting

the icon double-clicking the smart

object gonna open up my artwork select

all edit copy go to here edit paste

delete this layer save and it's updated

hey we're done updating all of the app

icons the homescreen

the most part yeah it's basically done

maybe I make a couple other little

tweaks to some of these other icons up

in here other symbols but this design is

basically done the next step would be to

go and update the remaining five

artboards that we see here now when

you're done updating your artboards you

then it must compress this folder so I'm

just gonna right-click select compress

and it saves a zip file that zip file is

what you're gonna include when you

submit your application okay next let's

take a look at the example PDF so just

like the Photoshop file we have

different pages of the PDF that are the

different artboards that you're going to

design the first page though is the

that's the directions and you can see

here we're suggesting that the artwork

we created at 1440 pixels wide by 3040

pixels tall that'll give us a nice

high-res design for us to critique from

there we've got the different screens

that you would decide so this shows the

basic lockscreen the homescreen the

dialer screen the contacts messages and

settings so you can use this as your

inspiration for your design to show you

all of the elements that need to be

designed and again to stress you must

update all of the icons that you see

here now you can use this PDF as your

inspiration for using whatever design

program it is that you would like to use

if you're not using Photoshop and lastly

let's take a look at the phone at frame

dot PNG file so this is simply just a

single layer transparent image of a

frame if you're using an alternative to

photoshop like or sketch you can

take this PNG file and bring it into

that design program and use it as your

frame to design within alright let's

take a look at some actual theme

portfolios that were submitted I went

through a few of our latest rounds of

submissions and grabbed some theme

concepts that really show great design

all of these designers I'm gonna share

have been accepted into the themes


I am only showing four screens for each

just so that I can show them a little

larger all right let's take a look at

this first one here this one is

extremely creative absolutely love this

artwork very whimsical concept of the

catching stars this looks to be

hand-drawn love the color tone very

earthy and old-world feeling the font

that this designer selected was perfect

it matches great with this with this

hand-drawn concept I love that little

bit of drop shadow that's behind the

text that ensures that it will stand out

from the background these icons are

great match the the hand-drawn concept

definitely captures that style I love

how they downplayed the lockscreen art

on the home screen knowing that these

app icons need to stand out even the

weather icon of the cloud and the Sun

that's hand-drawn I just overall it's an

excellent theme concept in design okay

so the second concept here this is quite

different excellent execution love the

color palette this really works well

across all the screens love the design

style with the different gradients real

simple font and here it really works

well with this concept these icons are

great they really really pop in this

design love the white background behind

the icons with the gradient fill for the

symbol notice over there in the in the

contact screen though the designer

reversed that out they put the gradient

background behind the white letters it

really makes it so those letters pop but

yet give a unique style unique look

compared to the app icons that were on

the home in the lockscreen

overall just a great design love love

this love this concept

all right another great design here this

third design love the leather texture

with the stitch seems very realistic I

love having that dark background on the

lockscreen and then the light background

fall of the other screens it really

enhances the the experience of unlocking

your phone this is similar to like

having a book covered and you open up

that book to reveal the pages of the

book love the icons they've got a great

3d rendered look to them

excellent reflected highlights on the on

the icons very clean and simple font

real easy to read color palette it's

pretty unique you know what but it

actually works you know it's not a

highly saturated color palette and very

elegant really really strong concept

love this design alright and finally

this fourth design here that I'm sharing

again a very simple but yet very elegant

design love the restrained color scheme

but yet has a very saturated feel to the

to the color that really helps make

those white icons pop on this design

excellent legibility you can really see

how easy it is to read not just the

icons and the apps but even the fonts a

very simple clean font overall just a

very well executed design more than one

yes definitely

as long as the themes good I mean

remember you're gonna be judged on what

you submit so if you submit a great

design along with a design that maybe

it's not so good you're gonna be judged

as a whole as a UI designer so make sure

you're sending strong designs so people

often ask what can they do that help

themselves get approved well one thing

we tell them is give us a cover letter

you know tell us a little bit about you

as a designer give us links to some of

your portfolios show us some of your

other work so when can you submit your

portfolio for review well you can

download the starter kit at anytime at

work on your designs but because this is

an exclusive group there's actually a

window for submitting that window is

open every other month for two weeks

once we've received all of the

applications we then take about four to

five weeks to review all of the

different designs

if you've been accepted you'll get an

email with access to theme studio and

can start designing and selling on the

Galaxy star if you've been rejected

you'll be encouraged to redesign and

resubmit and when the window opens that

again will then review the design

alright one thing to keep in mind when

submitting your application is don't

tell us that this is just for personal

use or that you're just wanting to learn

how to use the software

you know Samsung is looking for

designers and developers that want to

start creating and selling on the Galaxy

stores so make sure that you tell us

that you want to design and create for

Samsung thanks for joining the webinar

hope you guys enjoyed it I'm gonna take

some time now to answer a few those

questions the number one question that

we have received is where do I download

that starter kit well we've made it real

easy I actually just wrote a blog so go

to our website go

to our blog you'll see a blog that I

wrote there called how to become a

samsung mobile UI themes designer and on

there is a link to download the starter

kit the next question I just want to do

wallpapers and I actually submit a

portfolio for just doing wallpapers well

no you actually have to apply to be a

themes designer once you've been

approved you can then choose suggested

wallpapers or even just do app icons but

we do need you to apply as a themes

designer next question can i design

themes from a well-known designer or use

copyrighted images no not for your

approval to become a theme designer we

need to see all original artwork now

once you become approved if you have

license to use that artwork then yes you

can use licensed artwork but you do have

to provide us with proof of that license

to use their artwork let's see here

another question can I submit more than

six screens with my portfolio submission

yes you can but the six required screens

need to be submitted at that time as

well so you can submit more but you do

have to include the original six I think

that's pretty much it for the for the

majority the questions that came in we

did answer a lot of private chat

questions so hopefully we answered them

all for you if you have more questions

though you can go over to our forum and

can post some questions on our forum you

can also send email to support at

Samsung Developers comm and you can also

submit the support request using our

website you can contact us that way so

we would love to hear from you so please

take our survey let us know how we did

today with our webinar and we look

forward to seeing you next time on Wow

thank you