Loading ...

Loading ...

From The Blog

Stay updated with our latest news

The World Need Emoji Equality

101

Do you remember the time before the emoji are exist?. We’re sure not many people remember that era.

That era was actually not even a decade ago. Emoji was introduce at 2011, it make it only 5 years old by the time this article was written.

What make emoji is become inseparable part of our digital life is its ability to convey emotions way beyond what words might able to express, unless you willing to write a lot lot lot of words to express it.

Visually, emoji is generic simplified visualisation of human and things. It’s genderless, ageless, raceless, and mostly just show eyes and mouth as two human features that naturally we use to express emotion.

But the recent emoji that we usually used during conversation on our cellphone has some emojis that clearly show age (baby and senior citizen) and gender (male and female). Fast forward, now we can use emojis with different skin color to match ours, and even same sex couple to match our preferences.

So, it’s about time to add something to make emojis more personal for many of its users: jobs. And not just any jobs, because Google developers and designers proposed to create women with jobs emojis to empower working women all around the world.

Working Woman Emoji

When we are surrounded by news about inequality in workplace, their move to make jobs emoji in female gender is really a good move in term of marketing and social.

In marketing term, it sure give them a lot of publicity, many medias will write it in positive attitude and there will be a lot more blogger which not usually into techy things like emoji will write about it too. At the same time it clearly shows their culture of equality to the world.

In social term, it become one kind of support for working women in all over the world. It even includes some professions that traditionally infamous as men’s job, such as scientist, rocker, surgeon and even chef. Hard to believe that chef is identical with men’s job when many cultures expect women to cook at home. Ironic.

The design is simple enough, that we can use it to represent many other jobs. For example the teacher emojis could be used by teachers, professors, guest speakers or course educators. It can even used by working women’s children during chatting to express their mother’s jobs.

And let’s not be sexist here, because the emojis also available in men character. Basically it just changing its face, while on the same uniform.

But maybe Google still forgetting some of their user. Look at your emoji keyboard and noticed that there are no prince/king emoji, there is only female emoji with tiara represents princess/queen. Haircut and massage emojis also only available in female version, don’t you guys also need haircut and can enjoy head massage? So, don’t you think that it’s time for men to ask for emoji equality? Perhaps it will be available in the next Emoji Update on your favourite OS.

Petshopbox Studio, reboot, reborn, restart!

99

“This is our 10th anniversary!”

That was my opening speech at our birthday back in December last year. The actual date of Petshopbox Studio’s birthday is still a hot debate between co-founders. The original Petshop Studio was formed in December 2002, but after a couple of years without activity it was restarted as Petshopbox Studio in September 2005. We just happy that we can reach 10 years old when other businesses struggling on their 3rd birthday.

To be honest, 2015 was quite rocky journey for us. Should say that it was a depression inducing moments for co-founders who literally worked our ass off to keep Petshopbox Studio from bankruptcy.

Entering 2016, we have new legal name PT. Areumdaun Citra Kreasi which means creation of beautiful images. Since we change almost everything in Petshopbox Studio, I think it’s wise to say that we are now reboot reborn restart. This is new Petshopbox Studio. And since now we will celebrate our birthday at every 26th Jan. I just can’t believe how relieving it is to know exactly when your birthday is, since I never really took it really seriously and just looked at it as another date to have an office celebration. I guess I was terribly wrong about it.

So, besides new name, what’s new?

First of all, now we have sales team. We implemented working satisfactory analytics system. After years focusing on hiring fresh university graduates, now we decided to build team with experienced designers came from all across Java island.

We also got asked many times if we have a plan to create a product. And hopefully this year we will be able to start Petshopbox Studio’s first product, which we hope could help startups from all over the world to leverage their digital marketing method. Please looking forward for it.

And we come back to our roots and decided to once again focusing on creating illustration which is always been our strong point. We started back in 2005 as illustration studio. Trend brought us here and there, introduced us to many design style, but we’d love to implemented all our knowledge that we gathered on these 10 years into the creation of illustration on digital stickers, websites, mobile apps, mobile games, graphic design, e-learning modules and any other design area. We believe that today, when design become more flat, simple and generic, illustration can scale up your brand value especially in marketing area.

Last but not least, we hope that we can walking together as more solid team than before, grow up together and build better and bigger Petshopbox Studio to become eminent creative agency in Indonesia. We also like to thanking all of you petzcrews, x-petzcrews, clients, freelancers, outsources, friends, family, acquaintances, that have been with us all this time, forgive our mistakes and miscommunications (it happens too many times I can’t remember the last time we didn’t have some miscommunications, hahaha) and trust us to share our knowledge and experience to help you solve your problems with creative approach.

Thank you,
Sissy

Tini & Tono LINE Available Now on LINE Sticker Store

81

Goes vintage. That was our concept when we were planning for our next Line Creators Market sticker. Tini and Tono are brother and sister characters from Indonesia’s elementary school book. Indonesian are quite nostalgic about these characters, so we think it would be cool to fuse classic characters with modern expression.

The original Tini & Tono design from ’90s is monochrome, mostly printed in black, dark blue or dark green ink. But since the newest school books are full color, we add vibrant color to enhance its modern feels but maintain its bold black outline style.

83

82

The words on Tini & Tono stickers slang words used mostly by big cities teenagers from Java island. It’s rooted in Indonesia language, and even though most areas in Indonesia are using their own ethnic language but this kind of slang are well known among teenagers since its constant used on television drama and advertising.

Tini & Tono sticker pack are consist of 40 stickers with general expressions for daily use. It’s already available on Line Creators Market Indonesia region only and can be purchased for $1.

Currently only available in Indonesia region

Sticker Talk Talkshow, Learn About LINE Creators Market from The Expert

73

Indonesia was famous as one of the most creative country in Southeast Asia. So it’s not a big surprise that there are many digital sticker designer in Indonesia. Around last month we were asked to become a co-founder of Stickeren (in English means: CoolSticker), community for Indonesia digital sticker designer together with our fellow from Jotter Pro and Segocha.

After a couple of small meetups, now we’re ready for something quite big. By Friday, 4th September 2015, we will held the first Sticker Talk. It would be a gathering for digital sticker designer or those who interested to enter the digital sticker industry. There will be presentation about digital sticker too:

Sticker Talk

  • Line Creators Market Industry: Insight, Metric and Passive Income; will be presented by Xin Jun Long from Jotter Pro and Chandra WS from Segocha. As top ranking stickers designer, they will share about the lucrative world of digital sticker and how it would become a good passive income for designers.
  • How To Submit Your Line Creators Market Sticker; will be presented by Kuswanto from Petshopbox Studio. He will share about how to prepare and submit your sticker design to Line Creators Market reviewer so it wouldn’t suffer delay due to too many revisions.
  • Line Creators Market Success Story: Bangkarawah; he was one of the most selling digital sticker on Line Creators Market Indonesia. The presentation will be held in panel discussion style emphasizing on his success story and tips for another designer who intended to follow his steps.

The first Sticker Talk would be more about Line Creators Market. As the second mostly used chat app in Indonesia, Line Creators Market was consider as the most attractive platform for Indonesia designer. It was proven as a lucrative platform, most sticker designer start their career on Line Creators Market and some of them succeed to rack impressive amount of money from their stickers.

Sticker Talk would not become a reality if not because of our beloved sponsor, Bober Tropica which provide the place and dinner meal for all participants. Our media partner idGeekGirls, @InfoBdg and Rase FM which help us spread the words. And if you like to join us in the amazing world called digital sticker industry, register yourself and please come early at the d-day because we have secret gifts for the earliest attendees.

See you at the Sticker Talk.

How To Create Telegram Sticker

67

The latest version of Telegram give user freedom to create their own sticker sets very easy. Telegram users can create their own favorite character, for sticker creators it’s another platform to market stickers. At this moment, Telegram do not have sticker store, every stickers distributed freely. Read on how you can create Telegram stickers and publish it.

The sticker system on Telegram is half baked, why? Right now stickers are distributed via an URL, each sticker set has its own unique URL address. But, if you visit the URL there is no sticker preview, to view the sticker you have to open it in Telegram iOS or Android version — current version of Telegram for Mac, web or Windows can not preview sticker set, CMIIW.

To create sticker set you do not need special account or tools, all you need is Telegram app on any platform, but for convinience it’s better to use Telegram desktop or web version for easy image upload.

Telegram sticker size is 512×512 pixels, it’s larger than other sticker platforms. LINES or Kakao use 300-ish pixel size. Telegram provide a sticker template in PSD format contain one sticker sample and layer styles. Make your sticker ready using the template, then export it to PNG format.

You might want to read about PNG Optimisation for sticker to make your sticker set file size smaller. Smaller file size means faster download and sticker loading for users.
Sticker Bot Account

All you need to start submiting sticker is to chat with @stickers bot. To chat with @stickers bot, just mention it in with one of your existing chat room, click the @stickers. Stickers Bot will give you commands to sets of commands to manage your stickers, here are the commands.

/newstickerpack – create a new sticker pack
/addsticker – add a new sticker to an existing pack
/delsticker – remove a sticker from an existing pack
/ordersticker – reorder stickers in a pack
/cancel – cancel the current operation

Sticker Bot Commands

Insert Emoji

To start news sticker type /newstickerpack in @stickers bot chat room. Sticker bot will ask you to create a sticker set name. After that @sticker bot will ask you to emoji that will be tied with your sticker. Each sticker can be tied to several emoji, but Telegram recomend no more than two emojis per sticker.

Upload your sticker

After you send the emojis, you can upload the sticker to @sticker bot by dropping the PNG file to Telegram window, select to drop “without compression” do not drop it to “in quick way”.

Repeat above two steps for the next stickers. Telegram only permit 30 stickers for each set.

Publish your sticker

After you uploaded all stickers, type /publish to publish the sticker. @sticker bot will ask you to create short name for the suffix of sticker URL address that you can share to the world or download your sticker set on Telegram.

Sticker preview

To get more Telegram stickers please follow Telegramstickers.tumblr.com

Adobe Illustrator Tips To Save Your Time: Part 2

14

Almost all our project use Adobe Illustration. Every year Adobe added new features, some are very useful but old features remains a mistery land need to be discovered by novice or expert users.

Previously we wrote Adobe Illustrator tips round-up. This is the second edition of 10 tips we used it a lot on daily basis.

Previously we shared some productivity tips for Adobe Illustrator. Adobe Illustrator is still our primary application for almost every project we have worked on.

Here are new Adobe Illustrator tips that you might not know yet.

Math Operation on Option Bar or Transform window

Want to make the object 50% smaller? Just enter mathematical operator on option bar or in Transform window. In the image below I want to reduce the width 50% less by deviding it by 2.

Adobe Illustrator Transform Window

This feature really helpful for changing size without firing Calculator.

Keep Your Project Clean from Unwanted Brushes, Swatches or Symbol

Illustrator will keep unused brushes, swatches or symbol on the its palletes. Befor sending the final design to client, it’s best practice to clean those up, and also it will make your file size smaller.

Clean Up Symbol

To clean up, on brushes, swatches or symbol click the option icon on its paletter. Pick “Select All Unused”, then hit teh Trash icon.

Move Backward or Upward an Object Quickly

Do you use Layer window to move objects to Back or Front? If you have only a few layers it’s not that challenging, but if you have hundreds of layers browsing through layers won’t be easy.

To move object on top or behind another object quickly. Just use Paste in Front or Back. First Cut the object you want to move, then select another object, then Paste in Front if you want the object on your clipboard located in front of the selected object, or Paste in Back if you want to place it at the back of the selected object.

This little Adobe Illustrator tips will drasticaly change how you move objects, and save you big time.

Turn Any Object To Guides

Want to have a rectangular, curve or any shape as guide? This feature somehow is overlooked by Adobe Illustrator user. If you haven’t noticed it, the option is only one click away.

Turn Any Object To Guide

While selecting any vector object, right click then choose Turn to Guide. Easy right?

Turn On/Off Scale Stroke or Effect Quickly

In older version of Adobe Illustrator this option located in Preferences. In latest version, this option now available in Transform window for you to turn it On or Off.

Scale Stroke & Effects

On means any effect and stroke will be scaled. Very useful if you work mainly illustrations. I recomend to turn the Scale Off if you use Drop Shadow effect, the shadow will looks horible.

Changing Colors Quickly

By using Recolor Artwork window, you can quickly a lot of colors in one go. Perfect tool to make color variation. This feature has save us a lot of times. Here’s a Vine video on how to use it.

Naming Slice

Illustrator has a stupid way renaming slice. Naming slice in Adobe Illustrator is only available in Save as for Web window. Double click the slice in

Naming Slice

Activate Generate CSS Object for Unnamed Object

Adobe Illustrator has an option to copy CSS properties from an object. But, by default the feature wont alow generate CSS properties from unnamed objects. Naming an object quite a cumbersome in Adobe Illustator.

To enable CSS properties generator for unknown object. Open CSS Properties window, click option icon and choose CSS Export Option. In CSS Export Option window activate Generate CSS for Unnamed Objects.

Change Stroke Unit to Pixels

If you do a lot of working on screen design, using points can prevent for achieving pixel perfect lines. Because points is different than pixels.

Open Adobe Illustrator preference, open Units tab, then change Stroke unit to Pixels instead Points.

Put Stroke Behind Fill on Text Without Breaking The Font

By default if you put stroke on text, the stroke will be aligned to center. There’s a trick to Make it aligned outside the fill. In Appereance window add New Stroke, drag the new stroke into bottom of the Fill color.

Change Stroke Align to Outside

Viola! The stroke now aligned outside the fill.

If you find the tips useful, please share it with your friends. And, thank you for reading. Leave question on comments bellow.

How-To and Tools To Optimize Your Design Assets File Size

22

Keeping image file as small as possible is very important, whether you are working on user interface or game assets. Saving the file with Save For Web does not guarantee smallest file size.

PNG format is the most used image format for games, user interface and now stickers for chat messenger. Each chat app have strict guideline on file size, if the file size 1 KB bigger, they will request to make it 1 KB smaller, no compromise.

The Basic on How to Keep File Size Small

The smaller the image size, the smaller the file size. However, in design we bound to follow image size based on specification and guidelines. So, reducing image size in most cases is not an option at all.

Photoshop Bits Option

In Photoshop you have the power to create richer color depth, by default Photoshop use 8-bit depth. If you use 24 or 32-bit depth change it back to 8 bit. More bit depth means bigger file size, 24-bit image means the file size 3 times larger than 8-bit image.

Tools To Make File Size Smaller

Image file Saved with “Save for web” in Photoshop, or Adobe Illustrator is not properly optimized. Inside the image file there are still some information that can be safely removed to save more extra bytes. Below is our selection of tools to optimize file size.

ImageOptim Window

ImageOptim is our first tool for reducing PNG, GIF and JPEG files. The optimization result is depend on your image type or numbers of colors. On our sticker project, ImageOptim can save to averagely 50% of original file size. Example above, ImageOptim save 33.7% file size.

ImageAlpha window

If your file size still not meet the requirement, we reoptimize the image using ImageAlpha. With ImageAlpha we can save additional 39%. In ImageAlpha, the color reduced to 256, resulting smaller file size. You can save more file size by reducing the total colors. Fewer colors means smaller file size, in ImageAlpha you can check the image in different background to make sure the image quality doesn’t suffer.

Reduced color by ImageAlpha

You can see comparison between 256 colors and 64 colors. By reducing the color to 64, we able to save 3KB more. There are some jagged lines on Swaggy boots, but it isn’t so bad. Most importantly the transparency still looks great.

The final file size after optimized by ImageOptim and ImageAlpha with color reduced to 64 is 10 KB, original file size was 32 KB. We have saved 22 KB file size.

If you are a web developer, 22 KB is a huge bandwidth saving. For games and apps means the app size will be smaller. Using image optimization is a mandatory practice if you have file size constraint.

Other Tools

There are other tools for optimized your image file, we recommend these app.

  • TinyPNG. Website for reducing PNG file size in less than 5MB. You have to upload the file one by one via web interface, or buy Photoshop plugin ($40).
  • Smush.it. Image optimization by Yahoo!. The result is the same as Image Alpha.
  • PNGquant Photoshop Plugin. PNGquant is the command line tool that also used by ImageOptim and ImageAlpha, this plugin for is Adobe Photoshop plugin.

Further Reading on Image Optimization

We recommend you read these articles for more detailed reading on how to optimize file in different extension.

Have you used any optimization tools? Please share your process and tools in the comments. Thank you for reading.

What You Need To Know About Selling Sticker in LINE Creator Market

31

LINE is the first chat app that open its sticker store to public. Designers from all around the globe are submitting their characters into the LINE Creators sticker market.

Based on LINE official blog report. Stickers come from 124 countries, with total sticker sales 1.23 billion Yen. That’s solely from LINE Creator’s Market.

For designer, LINE Creators Market is a good source of passive income. But, the competition is quite fierce. Right now there 9000+ stickers set in LINE Creators Market.

Are you planning to sell sticker in LINE Creators Market? Here are some tips you should know.

  1. One sticker set contain 40 emoticons. 1 main image for sticker store thumbnail, 1 chat tab image for sticker selection image.
  2. Sticker set must your genuine design.
  3. Approval process can take up to 4 months. Our sticker approved in 2 months.
  4. Your sticker visibility in the store is very poor. Your sticker sales will decline after few days from launching. So, plan carefully you marketing strategy to keep sales number.

Sticker Production Tips

LINE is a chat app, your sticker will be used as message substitution. 40 sounds a lot, but based on our experience 40 is not sufficient to cover basic emotions or expression. List popular expressions first then goes to less popular. Lastly, avoid any situation story in your sticker.

Helpful articles to decide which expression need more attention.

Avoid drawing too much details on characters and background. Focus on character expression instead of background or situations. If you are planning to use text message, make sure the letter is visible in small size — small size sticker is used in low end Android devices.

LINE did not mention any file size limit, however before submitting your sticker file size are optimized. To make the file size small, use limited color palette. Smaller file size means your sticker downloaded and load faster in LINE app.

If you are new to sticker creation, we have created template for LINE sticker in Adobe Illustrator format. With the template you can export your sticker set easily in go.

How to submit your sticker

  1. You need LINE account to be able to register/login to LINE Creator market.
  2. Click New Submission Button to start submitting your sticker.
  3. Fill out the information needed. You can use your pen/artist name for the seller name. Make sure “Distribute in all available regions” is selected, this allow your sticker to be sold in various countries.
  4. LINE gives you language localization option for each country. If you do not set localization, LINE will use English title and description.
  5. After clicking the save button, Sticker Image tab will appear. Click the edit button at the bottom of the page to start uploading you sticker.
  6. Either upload all sticker in zip or upload it one by one.
  7. After all sticker uploaded including main and tab image. Click the Request button at top right of the page to submit your sticker for review.
  8. Wait patiently, our sticker took 2 months for review approval. Review time will be vary, some says took 4 months. Keep you hopes high, check your LINE Creator account regularly.
  9. If your sticker approved, LINE will send you email with store URL for your sticker and tell you to start release the sticker to LINE Creator Market.
  10. Congratulation on your sales!

Feel free to share more tips regarding LINE Creators Sticker Market in comment below. If you find these tips useful, please share it.

How To Design Believable Superhero Character

19

Superhero is in! Yes, since 2012 theater was full with superheroes movies. And, the trend continuous in year 2013. Out there, there are hundreds maybe thousands new comics, games or movies that need new superheroes for their titles. We’d love to share tips and trick to design believable superhero character. Let’s get it on!

Before we begin, this article was meant to give you tips and tricks to design superhero characters from character design point of view. So, we’re not going to teach you about how to create superhero character’s personality. Of course we’re not meant that you cannot warn your story writer if they missed a thing or two personality on the characters. So, here we go.

Superheroes not have to have bodybuilder looks

Yes, almost all superheroes have bodybuilder looks. The character with big body will make you feel safe and trust that the superheroes indeed very powerful and will be able to save you. But, if you take a look at Japanese superhero characters, it’s not always the case. Superhero can be a cute animal, beautiful boy, lazy girl or small child. Look at Astro Boy, he’s a superhero with small child appearance. That doesn’t mean Astro Boy less powerful than bodybuilder type superheroes, right?.

Astro Boy Reluctant Hero by KicsterAsh

Always start with superhero’s superpower

Why we call them superhero?. because they have special power of course. Superhero stories was always emphasized their superpower rather than daily life. Superhero’s power determined their body shape. For example, if your superhero’s power is more magical type, then it’s totally OK if they have small and skinny body type. But, if the superpower required your superhero to have an axe weapon that bigger than its own body, then its have to have a big body.

Facial appearance is very important

No matter what the media was, facial appearance always have more scenes than full body appearance. That’s why you have to make sure that your superhero have a very good look looking from all side. Give more attention to its facial assets like eyes shape, teeth and cheek. Childish characters would look cuter with round cheek. Rabbit teeth might make you become a bully victim in real life, but it can give your characters a unique features.

before watchmen dr manhattan #1 cover by Adam Hughes

Pay more attentions into character’s lifestyle, origin and past life

Lifestyle, origin and past life really affect your character’s physical appearances. If your character is a girl comes from conservative Asian family, it’s more likely she has long black hair, not funky pixie cut pink hair. If your character’s past was a drug addict, its might have many small scars in their face or hands. If your character love junk food, then most likely its do not have flat belly. Yeah, you know what I mean.

Do background check like a police officer

I read many comic books with superhero characters who were very believable in their superhero mode, but totally nonsense when they were on civilians mode. Look at Bruce Wayne, he’s super rich. It’s very believable if he wears designer suit every single day. But, if he wears casual style clothing like Peter Parker, how can we believe that he’s rich?. Usually, superhero in civilians mode have a regular daily jobs, and daily jobs really affect clothing choices. Wise clothing style choices is all you need to make your character become believable.

Ironman Armored Adventures by skottieyoung

Gestures create personality

Gestures will make your audience understand what type of person actually behind the mask. Sexy female superhero character, will likely to walk like she was in catwalk and stand in supermodel pose. Childish characters might like to squat or sitting on fences or tree branches. If you make your high school student superhero character posing like your dad, nobody will believe that he’s just under 20 years old.

Superhero signature pose

Every superhero should have their own unique (and most of the time, silly) signature pose that they usually use before and after their actions. Personally, I don’t think superhero signature pose is necessary. But, it’s very important for marketing. Unique signature pose can make your audiences remember your superheroes. It will look good on cosplay events. Your fans will likely to re-draw it on their fan arts. Just to name a few advantages that you might get.

Spidey vs Hulk by ChristianNauck

Cool costumes is an appropriate costumes

The reason I put costumes as the last things on this list is because I believe costumes isn’t as important as what we usually think. Yes, costumes make your superheroes look super cool. But I met many cases when designers spend too much time designing costumes rather than give more attention to more important features. Usually, costumes design was based on your superhero’s power. Don’t give them costumes that will make them die for ridiculous cause. Like, having your character dress-up in bikini like costumes in the middle of winter and her superpower is firearms mastery. The most logical thing to happen is that she’s going to die of hypothermia.

How To Extract CSS3 Properties from Photoshop

25

Majority of web or user interface designers are using Photoshop for creating mockups design. Thanks to Photoshop popularity there a lot of plugins to make designer work easier.

Photoshop is good at creating fancy buttons or other web elements. But when comes to CSS3, it’s a different story. A lot of web worker relying on CSS3 effects to make fancy buttons or other design elements that just look exactly like in the mockup. Creating CSS3 effects in Photoshop without plugin is quite tedious. There’s a Photoshop plugin that can help you making fancy CSS3 effects with a single click, called CSS3Ps.

CSS3Ps support Photoshop CS3 to the latest CS6. It works on OS X and Windows. However, for Lion OS X 10.7 users must install a patch from Adobe.

CSS3Ps Palette

After installation, to activate CSS3PS go to menu Window > Extension > CSS3Ps. The window palette is very simple. Actually, it’s a button. All you have to do is click the palette window and then CSS3 codes for your web design project will be ready in less than a minutes. CSS3Ps will render the code in their website, and you have to wait for around 20 seconds to see the result.

CSS3Ps can interpret Photoshop layer styles really well. But be careful, it doesn’t understand all layer styles available in Photoshop. CSS3Ps only understand layer styles which widely used in web design. Supported layers styles are: Stroke, Inner Shadow, Drop Shadow, Color Overlay, Gradient Overlay and Inner Glow. However, after testing we found out that CSS3Ps do not understand stroke type outer, inner or center. It always set the stroke setting to outer. Which means if you use inner shadow 2px to make 1 pixel inset style on a button, in CSS3 codes you will ended up in 2 pixels inset shadow.

CSS3Ps result

This is a simple tools that can save a lot of times writing CSS3. At first, I thought CSS3Ps is an offline plugin. When I found out it needs to open a browser to get CSS3 I kinda irked a bit. But, who’s doesn’t work online these days?.