Custom OpenGL Render Icons #38089

Closed
opened 2014-01-06 15:04:36 +01:00 by Simon Repp · 26 comments

I investigated if it would be possible to create custom, distinct icons for OpenGL rendering buttons/menu entries by overlaying the original render icons with "GL" (which i believe to be understandable and a somewhat common abbreviation for OpenGL, at least in the coding world; given the abstract nature of the notion of OpenGL rendering we probably won't come much closer to perfect understandability anyway). I experimented quite a bit, making a lot of tradeoffs regarding aesthetics/original ogl logo color/readability/readability of the original overlayed icon, and this is where I ended up basically.

My feeling about this is:
It's readable enough, but barely.
It doesn't look too hot. :)
Its certainly better than using the same icon as for regular rendering ...

So, in conclusion, I am actually slightly leaning towards giving this another shot, with completely custom icons that do not reuse the original render icons.
As this is only a very vague tendency on my side, I would like to hear your thoughts on the matter. Fire away!

Ps.: Patch for this would be ready to go, see the attached diff.

gl_icons.jpg

gl_view3d.jpg

gl_menu.jpg

I investigated if it would be possible to create custom, distinct icons for OpenGL rendering buttons/menu entries by overlaying the original render icons with "GL" (which i believe to be understandable and a somewhat common abbreviation for OpenGL, at least in the coding world; given the abstract nature of the notion of OpenGL rendering we probably won't come much closer to perfect understandability anyway). I experimented quite a bit, making a lot of tradeoffs regarding aesthetics/original ogl logo color/readability/readability of the original overlayed icon, and this is where I ended up basically. My feeling about this is: It's readable enough, but barely. It doesn't look too hot. :) Its certainly better than using the same icon as for regular rendering ... So, in conclusion, I am actually slightly leaning towards giving this another shot, with completely custom icons that do not reuse the original render icons. As this is only a very vague tendency on my side, I would like to hear your thoughts on the matter. Fire away! Ps.: Patch for this would be ready to go, see the attached diff. ![gl_icons.jpg](https://archive.blender.org/developer/F62876/gl_icons.jpg) ![gl_view3d.jpg](https://archive.blender.org/developer/F62874/gl_view3d.jpg) ![gl_menu.jpg](https://archive.blender.org/developer/F62875/gl_menu.jpg)
Author

Changed status to: 'Open'

Changed status to: 'Open'
Simon Repp self-assigned this 2014-01-06 15:04:36 +01:00
Author

Added subscribers: @simonrepp, @billrey, @brecht, @JonathanWilliamson, @PawelLyczkowski-1

Added subscribers: @simonrepp, @billrey, @brecht, @JonathanWilliamson, @PawelLyczkowski-1

Hey @simonrepp, good start on these. Having unique icons for OpenGL rendering is definitely needed. While I think you're on the right track with overlaying "GL", I agree the result is not too "hot". Mostly because it feels very busy and from a distance it becomes quite muddled.

I agree that completely custom icons are the way to go. We don't yet have an active icon designer, though, which is severely limiting what we can do. That being said, there's a lot of areas that need new or updated icons. I think it's best that we create a parent task for icon work and then start listing out child tasks to at least keep track of them.

Hey @simonrepp, good start on these. Having unique icons for OpenGL rendering is definitely needed. While I think you're on the right track with overlaying "GL", I agree the result is not too "hot". Mostly because it feels very busy and from a distance it becomes quite muddled. I agree that completely custom icons are the way to go. We don't yet have an active icon designer, though, which is severely limiting what we can do. That being said, there's a lot of areas that need new or updated icons. I think it's best that we create a parent task for icon work and then start listing out child tasks to at least keep track of them.
Author

Thanks for the feedback!

I went back to the drawing board and picked up another approach:
I extracted the iconic OpenGL logo arc (or whatever you wanna call it :)) as the visual metaphor for OpenGL and combined it with the most prominent features of the original render icons ...

And I must say I like it!

OpenGL reference works for me (Now I'm curious: Does it work for you guys as well?)
Reminiscence to the original icons is totally there for me, even though less of them is used.
The icons have aesthetic value :)
Only weak point for me is the dull blue from the OpenGL logo (something more "juicy" would be great), but I feel it's important to keep it to make the OpenGL association work.

Looking forward to your feedback ...

gl_iconic_icons.jpg

gl_iconic_view3d.jpg

gl_iconic_menu.jpg

Technical sidenote: I couldn't find any info on whether I should save out the modified icon svg file as a standard SVG or as Inkscape SVG; didn't get any answers on IRC yet either; so if someone could tell me that, that'd be great! (I've meanwhile used Inkscape SVG, so in case it should really be standard conform SVG i'll make another patch with the correct format, just to be on the safe side)

Thanks for the feedback! I went back to the drawing board and picked up another approach: I extracted the iconic OpenGL logo arc (or whatever you wanna call it :)) as the visual metaphor for OpenGL and combined it with the most prominent features of the original render icons ... And I must say I like it! OpenGL reference works for me (Now I'm curious: Does it work for you guys as well?) Reminiscence to the original icons is totally there for me, even though less of them is used. The icons have aesthetic value :) Only weak point for me is the dull blue from the OpenGL logo (something more "juicy" would be great), but I feel it's important to keep it to make the OpenGL association work. Looking forward to your feedback ... ![gl_iconic_icons.jpg](https://archive.blender.org/developer/F63096/gl_iconic_icons.jpg) ![gl_iconic_view3d.jpg](https://archive.blender.org/developer/F63097/gl_iconic_view3d.jpg) ![gl_iconic_menu.jpg](https://archive.blender.org/developer/F63098/gl_iconic_menu.jpg) Technical sidenote: I couldn't find any info on whether I should save out the modified icon svg file as a standard SVG or as Inkscape SVG; didn't get any answers on IRC yet either; so if someone could tell me that, that'd be great! (I've meanwhile used Inkscape SVG, so in case it should really be standard conform SVG i'll make another patch with the correct format, just to be on the safe side)

Added subscriber: @AditiaA.Pratama

Added subscriber: @AditiaA.Pratama

@simonrepp

I have never saw the OpenGL logo, and I wouldn't guess what buttons with these icon do. Your first approach with the "GL" letters was more clear - it just didn't look good. Try whiteish letters with darker outline, without any additional effects, and try to hit the 16x16 pixels when doing the icons, so they could be readable.

@simonrepp I have never saw the OpenGL logo, and I wouldn't guess what buttons with these icon do. Your first approach with the "GL" letters was more clear - it just didn't look good. Try whiteish letters with darker outline, without any additional effects, and try to hit the 16x16 pixels when doing the icons, so they could be readable.

Added subscriber: @ZsoltStefan

Added subscriber: @ZsoltStefan

@simonrepp
I also think the ones with the oval are not recognisable as OpenGL, the text ones were clearer. Also, the one for still rendering is just a plus inside an oval, not recognisable as a camera flash since the camera is missing, it looks more like an "add new" button. I'd go with your first proposal with different colours, try making it less cluttered, maybe removing the 3D bevel effect from the GL letters.

@simonrepp I also think the ones with the oval are not recognisable as OpenGL, the text ones were clearer. Also, the one for still rendering is just a plus inside an oval, not recognisable as a camera flash since the camera is missing, it looks more like an "add new" button. I'd go with your first proposal with different colours, try making it less cluttered, maybe removing the 3D bevel effect from the GL letters.
Author

Ok if the arc from the ogl logo is unrecognizable or even unknown that clearly excludes it from being an option ... so that's that. :)

@PawelLyczkowski-1, @ZsoltStefan
I think that in the end we might very well arrive at doing exactly what you guys just proposed, but for the time being I'd really prefer to approach this with more ambition and a wider take on the matter ...
Sure we can get it more readable, sure we can strip off everything that works against the technical plausibilty and the pixel raster, but will this make it unique, inventive and really good? I think not. :)

So in that sense I'm very open for (radically?) different suggestions! If you want to fiddle with the hues and values and details on my original approach, no problem with that either, go ahead, I'd just rather not work on it this way myself for now, and instead investigate some other options.

Ok if the arc from the ogl logo is unrecognizable or even unknown that clearly excludes it from being an option ... so that's that. :) @PawelLyczkowski-1, @ZsoltStefan I think that in the end we might very well arrive at doing exactly what you guys just proposed, but for the time being I'd really prefer to approach this with more ambition and a wider take on the matter ... Sure we can get it more readable, sure we can strip off everything that works against the technical plausibilty and the pixel raster, but will this make it unique, inventive and _really good_? I think not. :) So in that sense I'm very open for (radically?) different suggestions! If you want to fiddle with the hues and values and details on my original approach, no problem with that either, go ahead, I'd just rather not work on it this way myself for now, and instead investigate some other options.

more ambition, unique, inventive, radically different suggestions

Try to convey the feeling that OpenGL brings to your mind with an icon that plays a little movie with flashes of color and music.

(Joking obviously, don't do that : )

>more ambition, unique, inventive, radically different suggestions Try to convey the feeling that OpenGL brings to your mind with an icon that plays a little movie with flashes of color and music. (Joking obviously, don't do that : )

Maybe something that suggests extra speed or rough quality? Perhaps something that conveys 'playblast' rather than OpenGL specifically?

Maybe something that suggests extra speed or rough quality? Perhaps something that conveys 'playblast' rather than OpenGL specifically?
Author

@PawelLyczkowski-1 Reading that i just thought of blender with all icons animated ... Imagine that! ... so. trippy. :)

@billrey These are some great pointers! I'm already figuring out concrete representations for these, will try to get some drafts done asap; Thanks!

@PawelLyczkowski-1 Reading that i just thought of blender with all icons animated ... Imagine that! ... so. trippy. :) @billrey These are some great pointers! I'm already figuring out concrete representations for these, will try to get some drafts done asap; Thanks!
Author

Phew! ... Communication with 16x16 pixels is brutally challenging :), but I'm happy to present you with another proposal:

render_shutter_icons_view3d.png

render_shutter_icons_menu.png

render_shutter_icons_buttons.jpg

render_shutter_icons_outliner.jpg

My thoughts/findings on this:

  • Original render icons are alrady visually complex, adding more facets of meaning (OpenGL/Draft/Playblast) in a readable way (remember: 16x16 pixels!) is barely possible, therefore ...
  • Abstract away the camera, simpfly it down to just the iris / shutter.
  • Rendering an animation is just rendering multiple stills, so communicate it like that! (welcome (?) side effect: reads as motion blur too (maybe even more prominently so))
  • Communicate playblast / OpenGL draft with "Silver"/Colorless/Cold/Neutral/Grey
  • Communicate real, "final" rendering with "Gold"/Color/Warm
  • Sidenote: Up to now the clapboard / slate icon was also used twice (!) - namely also for the Movie Clip Editor; getting rid of this amiguity is welcome as well - in fact reducing ambiguity is the intial reason for this patch!

If we agree on this solution, I'd polish this (color tweaks for the "gold" feel, minor change to the outliner icon i still have in mind, etc.) and get the patch ready.

Looking forward to your opinions!

Phew! ... Communication with 16x16 pixels is brutally challenging :), but I'm happy to present you with another proposal: ![render_shutter_icons_view3d.png](https://archive.blender.org/developer/F65795/render_shutter_icons_view3d.png) ![render_shutter_icons_menu.png](https://archive.blender.org/developer/F65796/render_shutter_icons_menu.png) ![render_shutter_icons_buttons.jpg](https://archive.blender.org/developer/F65794/render_shutter_icons_buttons.jpg) ![render_shutter_icons_outliner.jpg](https://archive.blender.org/developer/F65797/render_shutter_icons_outliner.jpg) My thoughts/findings on this: - Original render icons are alrady visually complex, adding more facets of meaning (OpenGL/Draft/Playblast) in a readable way (remember: 16x16 pixels!) is barely possible, therefore ... - Abstract away the camera, simpfly it down to just the iris / shutter. - Rendering an animation is just rendering multiple stills, so communicate it like that! (welcome (?) side effect: reads as motion blur too (maybe even more prominently so)) - Communicate playblast / OpenGL draft with "Silver"/Colorless/Cold/Neutral/Grey - Communicate real, "final" rendering with "Gold"/Color/Warm - Sidenote: Up to now the clapboard / slate icon was also used twice (!) - namely also for the Movie Clip Editor; getting rid of this amiguity is welcome as well - in fact reducing ambiguity is the intial reason for this patch! If we agree on this solution, I'd polish this (color tweaks for the "gold" feel, minor change to the outliner icon i still have in mind, etc.) and get the patch ready. Looking forward to your opinions!

My two cents: not to critique your work, 16*16 seems awfully small to convey complex meanings, but these icons don't seem to convey the meaning of rendering, if you don't say it's an iris/shutter I'm not sure most people would recognise it as such. Seems more like an animated loading icon, or a rotating wheel, especially with the one in motion, there it really seems to roll forward, I'd think here more of rigid body physics.

This might also be because most casual photographers don't have cameras with a shutter any more.

I think a lens would be a more recogniseable analogy.

I tried searching Google Images for "camera" with exact size = 32*32 pixels, that gives some good results, as insipration. There is one shutter image similar to yours, where the middle is coloured blue with a little white specular highlight on it. That is pretty nice and more recognizeable as a glass lens with shutter.

I find the your idea of shiny/coloured vs. flat grey a good analogy for final render vs. OpenGL.

My two cents: not to critique your work, 16*16 seems awfully small to convey complex meanings, but these icons don't seem to convey the meaning of rendering, if you don't say it's an iris/shutter I'm not sure most people would recognise it as such. Seems more like an animated loading icon, or a rotating wheel, especially with the one in motion, there it really seems to roll forward, I'd think here more of rigid body physics. This might also be because most casual photographers don't have cameras with a shutter any more. I think a lens would be a more recogniseable analogy. I tried searching Google Images for "camera" with exact size = 32*32 pixels, that gives some good results, as insipration. There is one shutter image similar to yours, where the middle is coloured blue with a little white specular highlight on it. That is pretty nice and more recognizeable as a glass lens with shutter. I find the your idea of shiny/coloured vs. flat grey a good analogy for final render vs. OpenGL.
Author

I absolutely agree on the "wheel rolling forward" problem now that you mention it; for this I would propose either of these two tweaks as a fix:

render_shutter_icons_revisited_menu.jpg

render_shutter_icons_revisited_linear_menu.jpg

Regarding the iris on its own being too weak a metaphor, I tend to disagree, because e.g.: http://picasa.google.com/ or google "iphone shutter"; generally the iris shape seems to be hugely popular in graphic design atm, and understandably i'd say, because these things do look sweet :) ... What plays against it being recognizeable is the fact that the blades are not black in my designs, and of course the tiny size ... There is actually some tiny room to make the Render Image icon a tad bigger (I did in fact size it down in the process so it has more padding), and I could try to get the shutter blades black, but then I'd need to figure out where to put the color metaphor again ... :)

Thanks for the first feedback, let's see how other people feel about it!

ps.: i need to take 32x32 reference images with a heavy grain of salt ... i only have 16x16, another 16 on each side would mean the world to me ;)

I absolutely agree on the "wheel rolling forward" problem now that you mention it; for this I would propose either of these two tweaks as a fix: ![render_shutter_icons_revisited_menu.jpg](https://archive.blender.org/developer/F65883/render_shutter_icons_revisited_menu.jpg) ![render_shutter_icons_revisited_linear_menu.jpg](https://archive.blender.org/developer/F65895/render_shutter_icons_revisited_linear_menu.jpg) Regarding the iris on its own being too weak a metaphor, I tend to disagree, because e.g.: http://picasa.google.com/ or google "iphone shutter"; generally the iris shape seems to be hugely popular in graphic design atm, and understandably i'd say, because these things do look sweet :) ... What plays against it being recognizeable is the fact that the blades are not black in my designs, and of course the tiny size ... There is actually some tiny room to make the Render Image icon a tad bigger (I did in fact size it down in the process so it has more padding), and I could try to get the shutter blades black, but then I'd need to figure out where to put the color metaphor again ... :) Thanks for the first feedback, let's see how other people feel about it! ps.: i need to take 32x32 reference images with a heavy grain of salt ... i only have 16x16, another 16 on each side would mean the world to me ;)
Author

Added subscriber: @AndrewPrice

Added subscriber: @AndrewPrice
Author

Went over them again to see how much further I could push this approach, here's the updated proposal :)

render_shutter_strip_menu.png

render_shutter_strip_view3d.png

render_shutter_strip_outliner.png

render_shutter_strip_render.png

Went over them again to see how much further I could push this approach, here's the updated proposal :) ![render_shutter_strip_menu.png](https://archive.blender.org/developer/F66651/render_shutter_strip_menu.png) ![render_shutter_strip_view3d.png](https://archive.blender.org/developer/F66654/render_shutter_strip_view3d.png) ![render_shutter_strip_outliner.png](https://archive.blender.org/developer/F66652/render_shutter_strip_outliner.png) ![render_shutter_strip_render.png](https://archive.blender.org/developer/F66653/render_shutter_strip_render.png)

That looks nicer (except the yellow color maybe, I would go with the light orange color that is already used in a lot of icons). Not as nice as the original icon by Andrzej though. But you can do the same trick on his icons - turn them to black outlines only for instance.

That looks nicer (except the yellow color maybe, I would go with the light orange color that is already used in a lot of icons). Not as nice as the original icon by Andrzej though. But you can do the same trick on his icons - turn them to black outlines only for instance.
Author

@PawelLyczkowski-1
Here is a draft for your suggestions:

pl_render_icons_render.png

pl_render_icons_menu.png

pl_render_icons_view3d.png

ps.: I assume that with "turn them to black outlines" you were refering to rendering the camera's features with outlines instead of with shading, but unfortunately I don't think this will work at all. (I did experiment in this direction earlier in the process but stopped when it got apparent that 16x16 pixels probably just wouldn't be enough to represent the fine details, let alone perceive them afterwards in the interface ...)

@PawelLyczkowski-1 Here is a draft for your suggestions: ![pl_render_icons_render.png](https://archive.blender.org/developer/F66804/pl_render_icons_render.png) ![pl_render_icons_menu.png](https://archive.blender.org/developer/F66805/pl_render_icons_menu.png) ![pl_render_icons_view3d.png](https://archive.blender.org/developer/F66806/pl_render_icons_view3d.png) ps.: I assume that with "turn them to black outlines" you were refering to rendering the camera's features with outlines instead of with shading, but unfortunately I don't think this will work at all. (I did experiment in this direction earlier in the process but stopped when it got apparent that 16x16 pixels probably just wouldn't be enough to represent the fine details, let alone perceive them afterwards in the interface ...)

That's not really what I meant. Leave the original icons by Andrzej as they were, since they are really nice, like all that he did. Create a duplicates in a simplified style that indicates that this type of render will be less realistic/will have less features (but not grayscale, that would be confusing). You can for instance remove most of the polish from the original icons (removing the shading and highlight from them would do the job), or even just remove everything except the outlines.

That's not really what I meant. Leave the original icons by Andrzej as they were, since they are really nice, like all that he did. Create a duplicates in a simplified style that indicates that this type of render will be less realistic/will have less features (but not grayscale, that would be confusing). You can for instance remove most of the polish from the original icons (removing the shading and highlight from them would do the job), or even just remove everything except the outlines.
Author

@PawelLyczkowski-1 Pawel, if you somehow got the impression that my approach to this was to bluntly discard all existing material in order to redo everything from scratch, that's not the case. I did experiment exactly with those things you mention here! And it just so happened that in my process I eventually found this approach to be unrewarding and non-conclusive for me. Which is not to say that it can't work at all! But it's simply not where I arrived at. If you collectively decide that you want a different solution than any of those I propose, then that's totally fine, but please don't ask me to work in some way you would want me work, because that's not going to lead anywhere. I like Andrzej's work, I think his icons are great, but I am me, and that's how my work will look like, so please treat it as such, ok? :)

@PawelLyczkowski-1 Pawel, if you somehow got the impression that my approach to this was to bluntly discard all existing material in order to redo everything from scratch, that's not the case. I did experiment exactly with those things you mention here! And it just so happened that in my process I eventually found this approach to be unrewarding and non-conclusive for me. Which is not to say that it can't work at all! But it's simply not where I arrived at. If you collectively decide that you want a different solution than any of those I propose, then that's totally fine, but please don't ask me to work in some way you would want me work, because that's not going to lead anywhere. I like Andrzej's work, I think his icons are great, but I am me, and that's how my work will look like, so please treat it as such, ok? :)

Added subscriber: @Januz

Added subscriber: @Januz

Added subscriber: @mont29

Added subscriber: @mont29
Member

Added subscriber: @JulianEisel

Added subscriber: @JulianEisel
Member

Changed status from 'Open' to: 'Archived'

Changed status from 'Open' to: 'Archived'
Member

So, with 2.8, OpenGL rendering will work like regular rendering, just using an OpenGL engine as... render engine ;) That means the GL rendering buttons will go away. Yay!

So, with 2.8, OpenGL rendering will work like regular rendering, just using an OpenGL engine as... render engine ;) That means the GL rendering buttons will go away. Yay!
Sign in to join this conversation.
No Label
Interest
Alembic
Interest
Animation & Rigging
Interest
Asset Browser
Interest
Asset Browser Project Overview
Interest
Audio
Interest
Automated Testing
Interest
Blender Asset Bundle
Interest
BlendFile
Interest
Collada
Interest
Compatibility
Interest
Compositing
Interest
Core
Interest
Cycles
Interest
Dependency Graph
Interest
Development Management
Interest
EEVEE
Interest
EEVEE & Viewport
Interest
Freestyle
Interest
Geometry Nodes
Interest
Grease Pencil
Interest
ID Management
Interest
Images & Movies
Interest
Import Export
Interest
Line Art
Interest
Masking
Interest
Metal
Interest
Modeling
Interest
Modifiers
Interest
Motion Tracking
Interest
Nodes & Physics
Interest
OpenGL
Interest
Overlay
Interest
Overrides
Interest
Performance
Interest
Physics
Interest
Pipeline, Assets & IO
Interest
Platforms, Builds & Tests
Interest
Python API
Interest
Render & Cycles
Interest
Render Pipeline
Interest
Sculpt, Paint & Texture
Interest
Text Editor
Interest
Translations
Interest
Triaging
Interest
Undo
Interest
USD
Interest
User Interface
Interest
UV Editing
Interest
VFX & Video
Interest
Video Sequencer
Interest
Virtual Reality
Interest
Vulkan
Interest
Wayland
Interest
Workbench
Legacy
Blender 2.8 Project
Legacy
Milestone 1: Basic, Local Asset Browser
Legacy
OpenGL Error
Meta
Good First Issue
Meta
Papercut
Meta
Retrospective
Meta
Security
Module
Animation & Rigging
Module
Core
Module
Development Management
Module
EEVEE & Viewport
Module
Grease Pencil
Module
Modeling
Module
Nodes & Physics
Module
Pipeline, Assets & IO
Module
Platforms, Builds & Tests
Module
Python API
Module
Render & Cycles
Module
Sculpt, Paint & Texture
Module
Triaging
Module
User Interface
Module
VFX & Video
Platform
FreeBSD
Platform
Linux
Platform
macOS
Platform
Windows
Priority
High
Priority
Low
Priority
Normal
Priority
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Info from Developers
Status
Needs Information from User
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Design
Type
Known Issue
Type
Patch
Type
Report
Type
To Do
No Milestone
No project
No Assignees
9 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: blender/blender#38089
No description provided.