webOS Nation Forums >  webOS Discussion >  Open webOS General Discussion > Open webOS Graphics help
Open webOS Graphics help
  Reply
Like Tree21Likes

 
Thread Tools Display Modes
Old 07/11/2014, 11:18 PM   #1 (permalink)
Member
 
mattmers's Avatar
 
Posts: 340
I have been ogling the recent Open webOS ports updates and thinking how I could help. I found this on their wiki, and since many of us don't have coding skill we could help in this area. I plan to give it a go as soon as I'm back from my trip (in jordan, mt digging up dino bones) since I only have a chromebook. Anybody want to also join me

http://webos-ports.org/wiki/Graphics_Work
__________________
Smartphones: Nokia 5230 > Palm Pre 2 > Nokia 701 (returned) > HP Pre 3 > BB Z10 (save me from it) + HP Touchpad
Cars: 1993 Subaru Impreza AWD > 2007 Saab 9-3 2.0T


LinkedIn: Matthew Mers
Twitter: MatthewMers
mattmers is offline   Reply With Quote
Old 07/12/2014, 12:36 AM   #2 (permalink)
Member
 
railbear007's Avatar
 
Posts: 23
I'd love to join you @mattmers. I'm also out of town but would love to give it a go when i get back
railbear007 is offline   Reply With Quote
Old 07/12/2014, 06:06 AM   #3 (permalink)
Homebrew Developer

 
Posts: 2,960
We have got a very talented graphics artist in the team, but we can for sure use some help in re-creating all the graphics from legacy in vector format! So you're both welcome to help out We're usually in the #webos-ports IRC channel discussing, so if you have any questions or want to coordinate some things feel free to drop by
__________________
HP Veer (daily driver), HP Pre 3, HP Touchpad Proper 4G/LTE (Sierra MC7710), HP Touchpad 32GB WiFi, Palm Pre 2
Herrie is offline   Reply With Quote
Old 07/12/2014, 07:53 AM   #4 (permalink)
pivotCE Developer
 
Preemptive's Avatar
 
Posts: 3,397
I've been looking at this for a while, but I'm not even much of a graphics expert. However, if someone wants to give a quick tutorial here, I'm happy to have a go. The beauty of this project is that though the whole thing is a big project, it is just a lot of small projects and some of the building blocks for each graphic are already there. You only have to find the time to do one item at a time. That said, like the other posters, I'm really busy for a couple of weeks. I'll have time in August though! ;-)

So, can someone post something about the format (scalable, vector graphics) and how to build it using
Photoshop / Gimp / Whatever - presumably using layers for different elements? I think when this 'Master Graphic' is done, it is then rendered to a PNG for the current display sizes targeted by the port. I've seen the specs, I'm asking for a practical, 'how-to' guide.

This is also the easiest way to be a LuneOS developer. ;-)

P.S. Can I do the Supercow?
Attached Images
File Type: jpg The Cat & jsfiddle.jpg (118.0 KB, 31 views) Email Attachment
__________________
webOS Status Report | The Zombie & Dead app list | User Count | webOS Service Pack | Back up advice

Last edited by Preemptive; 07/12/2014 at 08:01 AM.
Preemptive is offline   Reply With Quote
Old 07/12/2014, 08:30 AM   #5 (permalink)
Homebrew Developer

 
Posts: 2,960
Quote:
Originally Posted by Preemptive View Post
I've been looking at this for a while, but I'm not even much of a graphics expert. However, if someone wants to give a quick tutorial here, I'm happy to have a go. The beauty of this project is that though the whole thing is a big project, it is just a lot of small projects and some of the building blocks for each graphic are already there. You only have to find the time to do one item at a time. That said, like the other posters, I'm really busy for a couple of weeks. I'll have time in August though! ;-)

So, can someone post something about the format (scalable, vector graphics) and how to build it using
Photoshop / Gimp / Whatever - presumably using layers for different elements? I think when this 'Master Graphic' is done, it is then rendered to a PNG for the current display sizes targeted by the port. I've seen the specs, I'm asking for a practical, 'how-to' guide.

This is also the easiest way to be a LuneOS developer. ;-)

P.S. Can I do the Supercow?
Actually this is an interesting read which claims Photoshop cannot do proper vectoring, though it seems to be fine for our need in general https://graphicdesign.stackexchange....-photoshop-cs6

Basically we have PSD's with multiple layers in there. The whole is a vector which can scale very nicely.

Some instructions are at: Creating a Vector image in Photoshop, http://www.photoshopessentials.com/b...-paths-pixels/, http://www.melissaevans.com/tutorial...with-photoshop, http://planetphotoshop.com/cs6-vector-tools.html

You can look at some of the PSD files that were uploaded by Benjamin to see how he does it
__________________
HP Veer (daily driver), HP Pre 3, HP Touchpad Proper 4G/LTE (Sierra MC7710), HP Touchpad 32GB WiFi, Palm Pre 2
Herrie is offline   Reply With Quote
Liked by Preemptive and boovish like this.
Thanked by boovish, Preemptive
Old 07/12/2014, 10:58 AM   #6 (permalink)
pivotCE Developer
 
Preemptive's Avatar
 
Posts: 3,397
maybe this?
http://inkscape.org
Inkscape tutorial: Tracing
__________________
webOS Status Report | The Zombie & Dead app list | User Count | webOS Service Pack | Back up advice
Preemptive is offline   Reply With Quote
Old 07/12/2014, 11:15 AM   #7 (permalink)
pivotCE Developer
 
boovish's Avatar
 
Posts: 746
I would like to help, but I think I'm going to need to practice. I haven't used CS5 in years. Also wouldn't illustrator be better for doing something like this?
__________________
HP Think Beyond event link
http://www.youtube.com/watch?v=VnjwG...dwMIQ&index=31
If You Have A WindsorNot Hit Me Up
boovish is offline   Reply With Quote
Old 07/12/2014, 11:26 AM   #8 (permalink)
Homebrew Developer

 
Posts: 2,960
Quote:
Originally Posted by boovish View Post
I would like to help, but I think I'm going to need to practice. I haven't used CS5 in years. Also wouldn't illustrator be better for doing something like this?
Illustrator would be better indeed from what the "pro's" say
__________________
HP Veer (daily driver), HP Pre 3, HP Touchpad Proper 4G/LTE (Sierra MC7710), HP Touchpad 32GB WiFi, Palm Pre 2
Herrie is offline   Reply With Quote
Liked by dkirker likes this.
Old 07/12/2014, 05:16 PM   #9 (permalink)
Member
 
mattmers's Avatar
 
Posts: 340
Wow things escalated quickly while I was in the field, Awesome (damn, now i'm singing the lego movie song.) I think the email app general assets would be a great place to start for us non pros. They are simpler graphics.
__________________
Smartphones: Nokia 5230 > Palm Pre 2 > Nokia 701 (returned) > HP Pre 3 > BB Z10 (save me from it) + HP Touchpad
Cars: 1993 Subaru Impreza AWD > 2007 Saab 9-3 2.0T


LinkedIn: Matthew Mers
Twitter: MatthewMers
mattmers is offline   Reply With Quote
Old 07/12/2014, 05:17 PM   #10 (permalink)
Member
 
Posts: 269
Quote:
Originally Posted by Herrie View Post
Illustrator would be better indeed from what the "pro's" say
For this kind of work I would generally advise sharing the files both in AI (Adobe Illustrator) and PDF format...and possibly EPS. That would allow people to use whichever vector application they prefer.

I know Illustrator and personally think it's a bit cumbersome for these kinds of images...but that's my personal taste.
I've personally used CorelDraw for years now (just about all versions between 8 and the current 17). For vector graphics it's the environment I feel most comfortable in (although color-management is clearly worse than e.g. Illustrator). But I also know others who really, really hate it.
I've never used Inkscape, but I've heard great things about it, and it seems quite simple to use from what I've seen. Moreover, it's free and open-source, so everyone can use it. And that's a great plus to me.

That being said, I did take a look at one of Benjamin's images, and the way he uses Photoshop to create these icons is perfectly valid to keep the picture-integrity when resizing the image. There are some disadvantages to the images (e.g. in my PhotoShop CS3 exporting the image either to AI or PDF resulted in an empty page, and bringing it directly into my vector application resulted in a distorted bitmap), and I think that maintaining the images in a vector application is easier in the long term. But part of that is my personal taste/opinion, and I know others who disagree (and rightly so).

On a sidenote. A while back I looked at the webOS icons in the github repository, and decided to reproduce the memo-app icon. I've included the original memo-icon in the example, as well as the email-icon, since they have different background-circles (actually...the background circle of the email is used for the 64x64 version of the memo-icon). The top-gradient in my mail-icon is a bit too fuzzy on top (this is relatively easy to fix), but that was caused by me reproducing the 64x64 circle before I noticed that the mail-icon would be a better reference.


-- click image for a larger version --

It's not a 100% faithful reproduction, because that wasn't my goal at the time...but then again, I don't know if open webOS wants to be 100% faithful to the designs from 2009/2011 (and I'm not saying that the gray/flat eel/mochi look is what they should go for).
Misj' is offline   Reply With Quote
Liked by Preemptive likes this.
Thanked By: Preemptive
Old 07/12/2014, 06:43 PM   #11 (permalink)
pivotCE Developer
 
Preemptive's Avatar
 
Posts: 3,397
I'd say the process of recreating the original graphics will be a good experience for anyone who might want to go on to create their own sets in future.

Some food for thought:
The software design trends that we love to hate | Ars Technica

I think I will try inkscape - having little experience with vector graphics on any other package. I feel I've already learned quite a bit from Herrie's links, but only real work will prove it!

Is there someone (Benjamin?) who will distribute the work or a process where we announce what we are doing? Shame to work on an image only to find someone else was also doing it.
__________________
webOS Status Report | The Zombie & Dead app list | User Count | webOS Service Pack | Back up advice
Preemptive is offline   Reply With Quote
Liked by dkirker likes this.
Old 07/12/2014, 07:34 PM   #12 (permalink)
Member
 
johncc's Avatar
 
Posts: 4,192
Work flow management is addressed in the wiki linked above.
johncc is offline   Reply With Quote
Liked by Preemptive likes this.
Thanked By: Preemptive
Old 07/12/2014, 08:37 PM   #13 (permalink)
Member
 
Grabber5.0's Avatar
 
Posts: 5,201
Quote:
Originally Posted by Misj' View Post
..but then again, I don't know if open webOS wants to be 100% faithful to the designs from 2009/2011 (and I'm not saying that the gray/flat eel/mochi look is what they should go for).
Honestly that would be my preference - I hate all of the boring flatness that is so popular today. If flat is implemented, it should not be the default. Apple and Google have set UI design back 20 years.

-- Sent from my Palm Pre using Forums
__________________
Matt Williams
Grabber Software
*How to install .patch files on your device*

Grabber5.0 is online now   Reply With Quote
Old 07/13/2014, 02:26 AM   #14 (permalink)
Member
 
dkirker's Avatar
 
Posts: 1,176
Quote:
Originally Posted by Preemptive View Post
I'd say the process of recreating the original graphics will be a good experience for anyone who might want to go on to create their own sets in future.

Some food for thought:
The software design trends that we love to hate | Ars Technica

I think I will try inkscape - having little experience with vector graphics on any other package. I feel I've already learned quite a bit from Herrie's links, but only real work will prove it!

Is there someone (Benjamin?) who will distribute the work or a process where we announce what we are doing? Shame to work on an image only to find someone else was also doing it.
Flat is actually pretty nice, when it is executed properly. Apple does it horribly, IMO. Google is a bit better.

Regarding progress: I would use the wiki page, and note what you are working on using the "Assigned to" column here: http://webos-ports.org/wiki/Graphics_Work
__________________
Did you know:

webOS ran on a Treo 800 during initial development.
dkirker is offline   Reply With Quote
Old 07/13/2014, 08:07 AM   #15 (permalink)
Member
 
Posts: 2
Hi all,

Nice to see some movement on the graphics side ;-).

I agree with dkirker on the flat-design movement. Apple's implementation on flat design is "cold". Google's graphics tend to be more "alive". Mochi also followed Google approach.

On-topic: I use Photoshop (CS3), because that's my main tool for my dayjob (webdesign). Maybe some of you get along with other tools like Illustrator or open-source alternatives. I think compatibility in source files is key here.

@Misj: some icons do look different in 64, 256 and 1024. I learned that when I began with my first reproductions. And it's a good thing. Some icons do not scale nicely from 1024 to 64. They need some tweaking before they "work" on a smaller scale ;-) That's why some edges are more bold than their high res counterparts.

@Preemptive: Herrie manages the source-files on the Wiki. So no need for me to manage that.
On the other hand, I could keep an eye on quality and such. So everything has the same structure, descriptions ect.
benjaminvandenberg is offline   Reply With Quote
Liked by dkirker and Preemptive like this.
Thanked By: Preemptive
Old 07/13/2014, 03:35 PM   #16 (permalink)
Member
 
Posts: 269
Quote:
Originally Posted by benjaminvandenberg View Post
@Misj: some icons do look different in 64, 256 and 1024. I learned that when I began with my first reproductions. And it's a good thing. Some icons do not scale nicely from 1024 to 64. They need some tweaking before they "work" on a smaller scale ;-) That's why some edges are more bold than their high res counterparts.
Yeah, I know...some are very obvious (contacts) some are quite subtle (email). Personally I think the difference in the two contacts-icons is too big (they're really two different designs), while the changes to the email-icon are really just tweaks to enhance readability of the smaller version.


<<EDIT>>
Added the discussed icons from the open webos github repository .
The 256 splash-screen icons were reduced to 64x64 to match their launcher counterpart.

Last edited by Misj'; 07/14/2014 at 03:59 AM.
Misj' is offline   Reply With Quote
Old 07/14/2014, 06:14 AM   #17 (permalink)
pivotCE Developer
 
Preemptive's Avatar
 
Posts: 3,397
Hi,

Quote:
Assignees

When you start work on an asset, add it's filename and your username below.
I have a login, but don't have the permissions to edit the page, so if someone could add my name to 'toolbar-icon-bovine.png' or clarify how I do this myself, that would be great.

I thought I'd start with this because:
1. Fun
2. A simple image to learn with.
3. I actually did some work on this for a pivotCE story, but we changed to a different image. I'll probably have to start again, but there is some work already there.

But don't expect any results until next month!
__________________
webOS Status Report | The Zombie & Dead app list | User Count | webOS Service Pack | Back up advice

Last edited by Preemptive; 07/14/2014 at 06:34 AM.
Preemptive is offline   Reply With Quote
Old 07/14/2014, 06:28 AM   #18 (permalink)
pivotCE Developer
 
Preemptive's Avatar
 
Posts: 3,397
Quote:
Originally Posted by Misj' View Post
Yeah, I know...some are very obvious (contacts) some are quite subtle (email). Personally I think the difference in the two contacts-icons is too big (they're really two different designs), while the changes to the email-icon are really just tweaks to enhance readability of the smaller version.


<<EDIT>>
Added the discussed icons from the open webos github repository .
The 256 splash-screen icons were reduced to 64x64 to match their launcher counterpart.
Click to view quoted image
Are these actually old version / new version?

I like the new version. Including the text on it might be nice, but I don't think it's important.

Though we are attempting to recreate the originals, without the source elements, we are making new graphics and there will likely be some slight differences. As discussed, the fact that we are future-proofing by making large sizes may have an effect when scaled down to phone size. So my question is: Presumably, tweaks are done at final scale. Are they performed on the SVG or PNG? How do we document any tweaks we may need to make for small sizes?
__________________
webOS Status Report | The Zombie & Dead app list | User Count | webOS Service Pack | Back up advice

Last edited by Preemptive; 07/14/2014 at 06:41 AM.
Preemptive is offline   Reply With Quote
Old 07/14/2014, 09:04 AM   #19 (permalink)
Member
 
Posts: 269
Quote:
Originally Posted by Preemptive View Post
Are these actually old version / new version?
They're both old versions, as taken from the openwebos github (https://github.com/openwebos/core-apps); so you can see them both on your Touchpad as well (it also shows some insight into the design philosophy at webOS when they created these icons).

Quote:
As discussed, the fact that we are future-proofing by making large sizes may have an effect when scaled down to phone size. So my question is: Presumably, tweaks are done at final scale. Are they performed on the SVG or PNG? How do we document any tweaks we may need to make for small sizes?
This usually depends on the designer and their own workflow. My preference with vector images is to create them at final size (CorelDraw has a nice pixel preview mode, so I can easily see how they will turn out in the end). Since I make them resolution-independent, I can then safely bring them up to 3 or 4 times the final scale (and if needed, I make some final tweaks).

Tweaks for different scales should be done on the vector images and not on the PNGs themselves; because you want these changes to be on objects and not pixels. Basically, any bitmap format should be exclusively used as a final product and not as an intermediary step (for a manual or bus-stop marketing you will want to use vector images as an output).
Misj' is offline   Reply With Quote
Thanked By: Preemptive
Old 07/14/2014, 06:23 PM   #20 (permalink)
Homebrew Developer

 
Posts: 2,960
Quote:
Hi,



I have a login, but don't have the permissions to edit the page, so if someone could add my name to 'toolbar-icon-bovine.png' or clarify how I do this myself, that would be great.

I thought I'd start with this because:
1. Fun
2. A simple image to learn with.
3. I actually did some work on this for a pivotCE story, but we changed to a different image. I'll probably have to start again, but there is some work already there.

But don't expect any results until next month!
All accounts need approval due to spam registrations. I approved your account. Let me know if it still doesn't work and I'll play with some of the wiki buttons ;-)


-- Sent from my TouchPad using Communities
__________________
HP Veer (daily driver), HP Pre 3, HP Touchpad Proper 4G/LTE (Sierra MC7710), HP Touchpad 32GB WiFi, Palm Pre 2
Herrie is offline   Reply With Quote
Reply

 

Thread Tools
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
What can we make of this open-embedded core business for Open webOS? dr3wster Open webOS General Discussion 1 09/02/2012 11:11 AM
Engadget: Open Source, Open Issues for webOS rmeigs HP TouchPad 0 12/22/2011 04:51 PM
Bring webOS Graphics! XGC75 webOS Discussion Lounge 1 09/21/2010 10:58 PM
Open request to Palm: WebOS Emulator availability now! (WebOS dev momentum assured!) Goyena webOS Development 9 06/15/2009 07:45 PM
Designing Graphics and UI for WebOS Frenzytom Palm Pre and Pre Plus 4 01/16/2009 12:34 PM


 


Content Relevant URLs by vBSEO 3.6.0