#807 Revamp "Rockin' the Web" Badge
Opened 3 years ago by riecatnor. Modified a year ago

Badge description (like "You added a co-maintainer to a package. BFF!"):
Original badge: https://pagure.io/Fedora-Badges/issue/183

  • Please update title of badge to: Rockin' & Rollin'

Please update description of badge to: You work on Fedora Websites & Apps, you rock!

Help the badges team understand what this idea is all about. If this badge is
awarded for certain kinds of activities:

1) What are those activities?
- There is a revamp going on to merge the Websites team with a group of folks working on web apps (formerly under fedora infra). We want to update this badge for the revamp to include the "apps" part :)

2) Who is doing them (are they packagers? translators? newcomers? veterans?
users? sponsors?)
- Members of the Websites & Apps team, they maintain & improve Fedora websites & apps.

3) Why are they doing them (is this a means to a different end?)
- To make Fedora more accessible, more engaging, etc

4) When do they do them (every day? once a year?)
- As folks can contribute to they team, they do

5) How do they do them (by talking in IRC? by running commands in the console?
by using a web interface?)
- Front end/back end development for websites & application development

Lastly, do you have any ideas for artwork concepts?
- Let's update the current artwork. Maybe put the badger on a stage, give it some cool lighting, like it is putting on a rock show :D


Metadata Update from @riecatnor:
- Custom field artwork adjusted to None
- Custom field concept_review_passed adjusted to None

3 years ago

Do we need new artwork or just the new name?

I want to work on this ticket. I have few ideas which include the ideas mentioned above like putting the badger onto the stage and the public taking pictures through their smartphones. What do you think about this idea?

HI @computerkid we want both!

Hi @suchitapallavi that might be a lot to try to fit into a badge design, but feel free to attempt it if you'd like. Remember the badges are quite small so try to keep it very simple. Best of luck!

Metadata Update from @riecatnor:
- Issue tagged with: artwork - needed, category - community, difficulty - easy

3 years ago

Hey @riecatnor , I was thinking of working on some badges too as I work on the design issues, so can I start with this? I see you have added a work from before, I also have some idea to get started!

61bc195b01b52742ace2b434db002f606cbb404940ab2599b55a926d51187d7d-4.svg

Hey @riecatnor , sorry I couldn't wait for your reply and tried my hands on this :DD

I went through the guide decided:
1. It's a community badge it has to have thread around background
2. Got the badge template of the community badge
3. green background for the membership badge
4. I used the previous badger as i felt it was good, I dont know, should i make a new one?

A few new things I added:
1. changed the disco ball to a new one
2. added a stage/floor
3. added star goggles
4. added more stars

I tried following the guidelines as much as I could. Please let me know if I went wrong anywhere
also this was my first time on inkscape, mine is quite slow do you any way i could fix this? It's a really cool software! It is very different in many ways from the softwares I usually use so it took me a bit more time

Waiting for your feedbacks and suggestions!!

Badge description (like "You added a co-maintainer to a package. BFF!"):
Original badge: https://pagure.io/Fedora-Badges/issue/183

  • Please update title of badge to: Rockin' & Rollin'

Please update description of badge to: You work on Fedora Websites & Apps, you rock!

Doing this now

Hi @swast1 thanks for beginning work on this! As far as inkscape performance, just make sure you have latest software updates for your operating system & inkscape. That is probably the best that can be done, and you can probably get some more memory/improved performance by shutting down other applications. It works quite quickly on fedora 33 :D

Here are a couple recommendations for the artwork:
- What if you kept the original badge composition and added in elements around it? The object you put in at the bottom is looking a bit awkward. What if instead you made the entire background the dark grey? Because you are working on a full illustration, it is ok if the background isn't green.
- Maybe instead of trying to convert the web symbol to look like a disco ball (because we still want to portray the web aspect here) add in some colored spotlights to give it some interest :)
- I love the star glasses! so cute
- I like the stars in the background as well, but they are kinda blending in right now, especially the white ones. I think this will resolve with a darker background
- Please upload a PNG version to the ticket as well for easy review
Looking forward to your next draft !

Hello! This seemed like an interesting design concept for me, having never worked on badges before, so I gave it a shot. I tried to include the "Apps" part of the team using a mobile phone. Here are my first drafts @riecatnor:

Also @swast1, for inkscape performance, I would recommend going to Edit>Preferences>Input/Output>Rendering, and trying to adjust the settings there. Increase the thread count and cache size, and reduce the filter and blur quality to your liking.

Rock_The_Web_First_Draft_without_Lighting.pngRock_The_Web_First_Draft.png
original.svg

Hey peeps- thanks for the work here, comments below!

@swast1 wow, you made a lot of options :D I have some notes for you:
- I like pieces from several of them, so I am going to list those off and hopefully you like them too and can combine them to make a rad updated design!
- Make sure you are using the template correctly, and exporting at 256x256 pixels
- I like how the background is lighter in this one, as well as the pose. I think you could make the background even lighter to help the badger stand out (or even change the color? this is a team member badge, so green would make sense. I think the black on grey is making it hard to read): https://pagure.io/fedora-badges/issue/raw/files/06cff7bdf91c91902fc02f29913d8431088fa16655d5fe2f86f0373c50c78c85-webbapp2.png
- I am cool with a diff color guitar, but I think the green is getting a bit washed out.. maybe try the purple or orange?
- I like how you did the stars in this one.. in the second round the stars kind of take over the design: https://pagure.io/fedora-badges/issue/raw/files/03e4a9d418c1cc20aa423f1335b53cd195c3abd133a605825cdf588ea9727771-roki.png

@leena_harani nice start! I have a couple notes for you:
- I like all the elements you have in the design, but they seem a bit disjointed currently.
- I would make the badger a bit bigger as that is the main focus of the badge
- I like the spotlights, you should add in a couple more :)
- Right now the web and app objects are just kind of floating.. The best idea I have is to put them onto a "poster" or "banner" behind the rocking badger :) good luck!

Hi @riecatnor,
I made a badge rock-in-web with a few variations. The badger is a rock singer. I tried to follow the guidelines, but I would like your input on how I am doing. I need to take a designing badge workshop. Would you mind letting me know when you will conduct another class?

[![g16503-2-4.png](/fedora-badges/issue/raw/files/e040cdec25afa6c5f477db65b0c91e844a402435f05b773b60c77a835440b

Metadata Update from @smeragoel:
- Issue untagged with: artwork - needed
- Issue tagged with: artwork-needs-improvement

2 years ago

Hey @riecatnor ! This badge design seems like the perfect place to get started, could you please assign this issue to me? Excited to begin!

Hi @sfrooti! You can start working on this. The issue is tagged as "artwork-needs-improvement", so you can look at the previous comments for the SVGs of different artworks. If you think an idea might work better, feel free to implement that.
Looking forward to your designs!

Hi @smeragoel this looks absolutely fun! can I join in?

HI @cheeps you are welcome to work on this task :)

Hello @smeragoel @riecatnor After looking through the previous badges, I came up with these using the already existing badges. I await your review ☺️

Hi @cheeps thanks for starting work here! A couple notes:
- Make sure to use the current badge template for the time being. Although we are working on updating that, let's avoid confusion by using the current badge template until the new one is ready.
- Keep in mind the old badge wasn't bad, it just needs to be updated. So let's think of ways to simply add in the "apps" part that is getting added to this badge artwork. A cell phone could work
- We don't use the fedora logo inside badges unless its very necessary to get the concept across, so I would remove the "f" and use the old globe designs
- Make sure to use the fedora green for the background, and try to make the stars blend in more if you would like to keep them in by making them different green colors- the dark blue is very contrasty and takes away from the main design.

Looking forward to your next draft!

Hi @riecatnor , I tried my hand at a little editing for existing design. Adding a stage, making some stars transparent and appropriate lighting helps add elements without the central character losing its prominence I feel, let me know of your suggestions.
rocknroll.svgrocknroll.png

Hi @anoushkad thanks for jumping in here- your design is quite cute! A couple notes:
- Right now the thing my eye goes to first is the cell phone- the badger is holding it up as well, so my focus goes there. While that is an important part of the design, I don't think we want it to overpower the other parts of the design. I would say reduce the size of the phone a bit, and either center or increase the sizing of your badger/globe/guitar.
- I am curious about the change to purple guitar- the blue was nice and matched all the other elements. Did you have some reasoning behind this change?
- The stars are cute, but I think they are still making things look a bit too busy-- try reducing the number and playing with sizing/shape/color to help

I made some changes - I had earlier not been using the bigger blue guitar as it was too similar to the phone and web part of the badge and was overpowering the other elements, while I wanted the latter to stand out a bit, but I see how similar colors bring elements together so I've changed it back. I've concentrated the stars around say the guitar and the web and phone
Rocknroll.pngRocknroll.svg

Hi @cheeps you're welcome and no worries! I am glad you are experimenting, there is a lot of info to absorb to work on badge designs and it takes a few attempts to get the hang of it :) a couple notes for you:
- Make sure to upload svgs and pngs- this makes the review process easier/faster
- I think version 3 is working the best out of the three, so I will comment on that one specifically
- Adjust the horizon line on the object you have to be straight, right now it seems to have random dips and curves. There are some simple ways to achieve this, but I think clipping would probably work here. https://www.youtube.com/watch?v=WNbor8It_H0&ab_channel=OpenSourceTutor
- The globe is hard to make out with just the stroke, try adding a fill back in
- Add a stroke onto the phone since the other elements in the design are using a stroke

Hi @anoushkad lookin' good! A couple notes for you:
- The exported PNG is the right size, but the drop shadow gradient looks different from the badge template. I opened the SVG, it also looks incorrect. I wonder why, maybe it is the software you are using or did you make a change to the template? I think it would be a good idea to start with a new template file and import the artwork you are working with.
- The different layers you are using in the background don't match up- make sure to use "Align and Distribute", "Clip", or other tools to make sure things are lining up
- The changes to the cell phone and stars look good!

Looking forward to the next drafts :D

@anoushkad:
We are getting there!
- The badger seems awkwardly perched on the ground. We can push it down a bit or move the ground up to give it a firm ground to stand on.
- The left side of the badge seems a little empty. Can we move around a couple of starts from the right side to the left side to balance it out?

@cheeps:
- Please make sure that you are exporting at the right size (256x256 px at 96 dpi).
- The glasses seem too big for the face; try reducing the size.
- The ground seems broken up; however, I love the gradient you have added there.
- The starburst in the background should reach the edge of the background.
- The show lights seem a bit haphazard. Maybe try adding some symmetry?
- Push the green stars away from the badger and spread them around more.

@booky
- I'm not sure about the illustrations on the right. What exactly is the idea behind them?
- There is a gap between the badger foot and the globe, so there's some awkward hovering there.
- You can add more elements to the background to jazz it up!

Issue tagged with: AW: needed

2 years ago

Hi @jhennifer! Great start, here's my review:

  • I think the badge is a bit too busy at the moment. Let's try reducing the number of elements
  • I like the lights used in the previous designs so let's add that.
  • I'd change the colour of the starburst bg to a really low-opacity white (5%-10%) to reduce business. We can also remove the stars to reduce the busy-ness.
  • What if we change the ball to a proper disco ball - make it silver? That could be cool

Looking forward to your next draft!

Hi @jhennifer nice improvements here! Some notes for you:
- Since this is a team related badge, let's keep the background green (like the previous designs on the thread)
- I think the badge art in this comment is actually really close to what we want for this design. I think the only changes needed are to bring that spotlight up the front and to make sure the elements are balance.. in that design, the left side is kind of heavy (a lot of stars and the lifted arm of the badger). I would make some small adjustments to the composition to achieve that balance. Move the badger to the right a bit, maybe add another star on the right side.

Looking forward to your next draft!

Hello @jhennifer, couple of notes
- there seems to be a stray orange star in the background on top, let's remove that
- lower the opacity of the stars in the background to reduce visual noise, and maybe increase the size of the left-most star because that area seems a bit too empty now

Almost to the finish line!

Login to comment on this ticket.

Metadata
Boards 1
Artwork Status: In Progress
Attachments 35
Attached 3 years ago View Comment
Attached 3 years ago View Comment
Attached 3 years ago View Comment
Attached 3 years ago View Comment
Attached 3 years ago View Comment
Attached 3 years ago View Comment
Attached 3 years ago View Comment
Attached 3 years ago View Comment
Attached 3 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached a year ago View Comment