[mattmers]

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

[railbear007]

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

[Herrie]

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

[Preemptive]

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?

[Herrie]

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

[Preemptive]

maybe this?
http://inkscape.org
Inkscape tutorial: Tracing

[boovish]

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?

[Herrie]

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

[mattmers]

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.

[Misj']

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).

[Preemptive]

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.

[johncc]

Work flow management is addressed in the wiki linked above.

[Grabber5.0]

..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

[dkirker]

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

[benjaminvandenberg]

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.

[Misj']

@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.

[Preemptive]

Hi,

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!

[Preemptive]

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?

[Misj']

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).

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).

[Herrie]

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