[breeze-icons] Add video camera icons
ClosedPublic

Authored by trickyricky26 on Feb 13 2019, 6:58 PM.

Details

Summary

This patch adds 16px, 22px and 64px video camera icons. Requested by @hein.

Test Plan

The new camera-video icons:

The camera-photo icons for reference:

Diff Detail

Repository
R266 Breeze Icons
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
rooty created this revision.Feb 13 2019, 6:58 PM
Restricted Application added a project: Frameworks. · View Herald TranscriptFeb 13 2019, 6:58 PM
Restricted Application added a subscriber: kde-frameworks-devel. · View Herald Transcript
rooty requested review of this revision.Feb 13 2019, 6:58 PM
rooty edited the summary of this revision. (Show Details)Feb 13 2019, 7:00 PM
rooty edited the test plan for this revision. (Show Details)
rooty added reviewers: VDG, hein.

Hmm, TBH I think this needs work. The monochrome version feels too long to me; I think shorter and more square would be better. And the color version feels too plain and boxy.

Maybe take inspiration from some of the ones that show up here? https://www.flaticon.com/search?word=video%20camera

rooty added a comment.Feb 13 2019, 7:08 PM

Hmm, TBH I think this needs work. The monochrome version feels too long to me; I think shorter and more square would be better. And the color version feels too plain and boxy.

Maybe take inspiration from some of the ones that show up here? https://www.flaticon.com/search?word=video%20camera

The bnw version may stand to benefit from reels or an increase in height. I like this one

I don't think the color version being boxy can be helped, see camera-photo.svg and camera-web.svg

rooty added a comment.Feb 13 2019, 7:39 PM

How about now?

I made the monochrome version a little taller

That's much better!

rooty updated this revision to Diff 51621.Feb 13 2019, 8:02 PM

Make monochrome versions taller

rooty edited the test plan for this revision. (Show Details)Feb 13 2019, 8:03 PM
rooty retitled this revision from [breeze-icons] WIP, Add video camera icons to [breeze-icons] Add video camera icons.Feb 13 2019, 8:10 PM

I think the monochrome version is fine.
For the colorful version, I suggest making the screen much bigger if that side isn't going to be filled with more buttons or the like.

Also the partial outlines only on the top and bottom feel weird to me. I know these are present in camera-photo as well, so perhaps that should also be changed. I just think it would look nicer if the border went all the way around the camera body and across the front of the lens as well.

rooty added a comment.Feb 13 2019, 8:19 PM

I think the monochrome version is fine.
For the colorful version, I suggest making the screen much bigger if that side isn't going to be filled with more buttons or the like.

Also the partial outlines only on the top and bottom feel weird to me. I know these are present in camera-photo as well, so perhaps that should also be changed. I just think it would look nicer if the border went all the way around the camera body and across the front of the lens as well.

Okay, how thick should I make the border?

How about now?

I made the monochrome version a little taller

Breeze monochrome icons are primarily made of ellipses and rectangles with sharp corners. We generally don't use rounded rectangles unless we have a good reason to.

rooty added a comment.Feb 13 2019, 8:57 PM

How about now?

I made the monochrome version a little taller

Breeze monochrome icons are primarily made of ellipses and rectangles with sharp corners. We generally don't use rounded rectangles unless we have a good reason to.

I just thought it looked nicer with rounded corners. Do you want me to change them back to regular rectangles?

rooty updated this revision to Diff 51626.Feb 13 2019, 9:12 PM

Replace rounded corners with right angles

ndavis added a comment.EditedFeb 13 2019, 9:51 PM

For the color icon:
Avoid using the plasma logo unnecessarily. In existing device icons that use it (I want to move away from using it), it's usually placed where a brand logo would go on a real product.

Just so I can have an idea about how your design works, could you explain why you chose to use certain parts?

  • The top and bottom outlines
  • The blue patch on the side

I just thought it looked nicer with rounded corners. Do you want me to change them back to regular rectangles?

Yes. The roundness won't be very visible anyway. If you think it doesn't look nice with sharp edges, usually adding some extra details or circular/partially circular bit helps. For instance, you could add a curved handle to the top. Your icon looks like a camcorder and lots of those have handles. I'd suggest seeing how the lens of your monochrome camcorder icon looks filled in. The small diagonal lines are rather faint.

rooty added a comment.Feb 13 2019, 9:59 PM
  • The top and bottom outlines
  • The blue patch on the side

Because of camera-photo.svg, and I also really like Plasma Blue. I'm open to suggestions, mockups, anything that would look better than the current 64 px icon.

I'd suggest seeing how the lens of your monochrome camcorder icon looks filled in. The small diagonal lines are rather faint.

I'd rather make the lines/outlines thicker than fill in the lens hood. This was actually discussed on Telegram - video cameras' bodies and hoods are almost always the same color.

Because of camera-photo.svg, and I also really like Plasma Blue. I'm open to suggestions, mockups, anything that would look better than the current 64 px icon.

Interestingly, most cameras with alternating colors go for black in the middle and grey on the top and bottom. https://upload.wikimedia.org/wikipedia/commons/5/5a/Canon_FT_alvesgaspar_new.jpg

I'd suggest seeing how the lens of your monochrome camcorder icon looks filled in. The small diagonal lines are rather faint.

I'd rather make the lines/outlines thicker than fill in the lens hood. This was actually discussed on Telegram - video cameras' bodies and hoods are almost always the same color.

Yeah, that's generally true, although here's a classic exception: https://upload.wikimedia.org/wikipedia/commons/3/30/RCA_VHS_shoulder-mount_Camcorder.jpg

Well, we can't use that exact icon, but you can make something similar

Well, we can't use that exact icon, but you can make something similar

Still a work in progress, but... what do you think

rooty updated this revision to Diff 51636.Feb 14 2019, 12:13 AM

Replace boxy 64 px version with newer head-on variant, still a WIP though

Well, we can't use that exact icon, but you can make something similar

Still a work in progress, but... what do you think

I think I like it more than the first style. It's certainly more similar to the existing camera icon style.

rooty added a comment.Feb 14 2019, 1:06 AM

Well, we can't use that exact icon, but you can make something similar

Still a work in progress, but... what do you think

I think I like it more than the first style. It's certainly more similar to the existing camera icon style.

Should it be a head on view? Or should it be a side view? People also complain about it not having film reels - I don't think it needs reels but... we do still use the floppy disk icon for save (even today) so...

Should it be a head on view? Or should it be a side view?

Head on if you're going to use this style. Side if you're going to use the first style.

People also complain about it not having film reels - I don't think it needs reels but... we do still use the floppy disk icon for save (even today) so...

Why would film reels go on a modern style camera?... If you do an old style camera, do a side view.

rooty added a comment.Feb 14 2019, 1:14 AM

Why would film reels go on a modern style camera?... If you do an old style camera, do a side view.

That was my point exactly ...

I like the head-on camcorder style, but there's the risk that it's less recognizable than the "classic" style of video recorder icon that's used pretty much everywhere. If we go with the head-on style, it needs to be perfect.

Oh and I agree with @ndavis: let's not put the Plasma logo all over the place in new icons. This thing has nothing to do with Plasma; it's inappropriate branding.

I like the head-on camcorder style, but there's the risk that it's less recognizable than the "classic" style of video recorder icon that's used pretty much everywhere. If we go with the head-on style, it needs to be perfect.

To add to this, this type of camcorder was a design trend that pretty much stopped a few years ago as smartphone cameras got better. This means this style will probably become less recognizable in the future. Also it looks completely different than your 16px and 22px icons.

I would suggest adding a handle with the integrated microphone to the "classic" video camera design.

rooty added a comment.Feb 14 2019, 9:34 AM

I like the head-on camcorder style, but there's the risk that it's less recognizable than the "classic" style of video recorder icon that's used pretty much everywhere. If we go with the head-on style, it needs to be perfect.

Oh and I agree with @ndavis: let's not put the Plasma logo all over the place in new icons. This thing has nothing to do with Plasma; it's inappropriate branding.

What do you mean by perfect though?
Inappropriate? I don't know about that. Also, I really like the logo.
Be it head on or side view, there's probably going to be some sort of display, and the logo seems preferable to inserting a generic landscape (boring).
I'd consider putting an image of a film reel on the display though (instead of on top of the camera haha).

I like the head-on camcorder style, but there's the risk that it's less recognizable than the "classic" style of video recorder icon that's used pretty much everywhere. If we go with the head-on style, it needs to be perfect.

To add to this, this type of camcorder was a design trend that pretty much stopped a few years ago as smartphone cameras got better. This means this style will probably become less recognizable in the future. Also it looks completely different than your 16px and 22px icons.

I would suggest adding a handle with the integrated microphone to the "classic" video camera design.

While it is true that it'll become less recognizable, it's really hard to look at a camcorder head on and not see a camera lens.
It's different from my 16 px and 22 px icons, but that's hardly a problem, I can always change those to accommodate the 64 px version.
But I have the feeling you want me to do the opposite -

But I have the feeling you want me to do the opposite -

Yeah in general I think using some permutation of the "classic" design presents less risk since it's much more recognizable.

It's not that the Plasma logo is bad, it's that it doesn't make sense to put it everywhere; doing so dilutes its branding power in fact. Also, it doesn't make sense to put it on icons that have nothing to do with Plasma.

rooty added a comment.Feb 14 2019, 3:58 PM

It's not that the Plasma logo is bad, it's that it doesn't make sense to put it everywhere; doing so dilutes its branding power in fact. Also, it doesn't make sense to put it on icons that have nothing to do with Plasma.

Sure. But I see a big blue display and ... I just can't help myself hahahaha

rooty added a comment.Mon, Feb 18, 3:53 PM

I don't know... I've been mulling this over for the last couple of days and... I'm not sold on the side view, because any variant of a side view will look broadly different from the other camera icons we already have (probably because it's harder to flatten a side view and get away with it the way you can with a head-on view ?).

For example,


We'd basically have to redo all of them.

So I've decided to change just the 16/22 px icons to make them head-on - it looks a lot better when you take the camera-photo icon into consideration:

rooty edited the test plan for this revision. (Show Details)Mon, Feb 18, 3:53 PM
rooty updated this revision to Diff 51970.Mon, Feb 18, 3:54 PM

Use head-on versions of the 16 px and 22 px icons

I don't know... I've been mulling this over for the last couple of days and... I'm not sold on the side view, because any variant of a side view will look broadly different from the other camera icons we already have

Doesn't that logic also apply to a head-on-view icon for a video camera? It's not re-using the familiarity people generally have with the very common side-view video camera icons. A search on flaticon turns up the following, for example:

rooty added a comment.Mon, Feb 18, 4:48 PM

Doesn't that logic also apply to a head-on-view icon for a video camera? It's not re-using the familiarity people generally have with the very common side-view video camera icons. A search on flaticon turns up the following, for example:

I don't know. Using a head-on view might make the icon more consistent with the rest of Plasma (not what people generally use and are familiar with).

Using an icon with the video camera in profile will require us to either break consistency with the other camera icons or change the other icons to accommodate the new video camera icon.

Most searches turn up this


but at the same time turn up something along the lines of

If you're okay with the inconsistency, I can do a side view. But there definitely is an inconsistency.

filipf added a subscriber: filipf.Mon, Feb 18, 4:50 PM

It's perhaps not the most used video camera design, but I'm cool with this. I too wouldn't use the Plasma icon; it makes more sense to put some multimedia icon there.

I will admit that the current head-on view is more attractive than the previous side view version. :) But I still worry about recognizability. Here's what the icon will look like in Kamoso, for example:

Regardless, let's remove the plasma logo and replace it with the common mountain-and-sun scene from viewimage

rooty added a comment.Mon, Feb 18, 5:12 PM

I will admit that the current head-on view is more attractive than the previous side view version. :)

Tongue in cheek :D
Which size are you talking about though? The monochrome ones or the color one?

P.S.

This is a rough draft of what a side view 64 px version would look like with a microphone on top (I can't stand film reels in icons, sorry...)

This is a rough draft of what a side view 64 px version would look like with a microphone on top (I can't stand film reels in icons, sorry...)

Nice, that's much better than the previous side version!

rooty added a comment.Mon, Feb 18, 5:52 PM

More progress. How's this

Getting there! I'm not sure the shadow on the top handle works though.

rooty added a comment.Mon, Feb 18, 6:28 PM

Getting there! I'm not sure the shadow on the top handle works though.

Oh that's just inkscape being difficult - that's not supposed to be there hahaha

rooty added a comment.Mon, Feb 18, 6:33 PM

Getting there! I'm not sure the shadow on the top handle works though.

Fixed it

rooty updated this revision to Diff 52021.Mon, Feb 18, 10:36 PM

Use side view for all three icon versions

trickyricky26 commandeered this revision.Tue, Feb 19, 8:22 PM
trickyricky26 added a reviewer: rooty.

I will make some minor changes to the 64px design.

rooty added a comment.Wed, Feb 20, 1:45 AM

I will make some minor changes to the 64px design.

Sure thing, sorry about being lazy and not updating the screenshots 😅

  • Use a 64px design with a shotgun-type mic; use steeper angle for the lens on small versions
trickyricky26 edited the summary of this revision. (Show Details)Wed, Feb 20, 3:26 PM
trickyricky26 edited the test plan for this revision. (Show Details)
  • Improve contrast by making the camera silver, add Breeze-style shadows to screen and buttons
trickyricky26 edited the test plan for this revision. (Show Details)Wed, Feb 20, 3:58 PM
ngraham accepted this revision.Wed, Feb 20, 4:03 PM

Now that's what I'm talkin' about!!! I love these!

All in favor?

This revision is now accepted and ready to land.Wed, Feb 20, 4:03 PM
  • Add the bottom 1px shadow
trickyricky26 edited the test plan for this revision. (Show Details)Wed, Feb 20, 4:54 PM
ndavis accepted this revision.Wed, Feb 20, 4:56 PM

LGTM! I really like how the 64px version turned out, especially that shotgun mic.

@ngraham If you include this in TWIP&U, use this image since it's slightly sharper on the 64px icon. @trickyricky26's montage is screwing up even though he's using the same command as me.

rooty accepted this revision.Wed, Feb 20, 5:08 PM
hein added a comment.Wed, Feb 20, 5:17 PM

Would it be possible to also add the lineart versions as -symbolic? In my new app I rely on Kirigami's icon recoloring feature and it only works with monochrome icons, so I rely on -symbolic to request them.

  • Add -symbolic symlinks to the 16px version
hein accepted this revision.Wed, Feb 20, 5:46 PM
Closed by commit R266:85f4fe3a76e5: [breeze-icons] Add video camera icons (authored by Rafael Brandmaier <rafael.brandmaier@kdemail.net>). · Explain WhyWed, Feb 20, 5:54 PM
This revision was automatically updated to reflect the committed changes.