search

cardano-foundation / cardano-org

The Cardano Website
https://www.cardano.org
Apache License 2.0
21 stars 8 forks source link

Help creating dotted icons #67

Open katomm opened 1 month ago

katomm commented 1 month ago

Hello,

Is there anyone who could help to create new images/templates in the style of these dotted icons?

MyBaBB commented 1 month ago

Hi, I can make some icons for you. I can make these in SVG.

MyBaBB commented 1 month ago

here you go,

example-01-01

MyBaBB commented 1 month ago

You can assign it to me if you like and I can start making things in my spare time for you

katomm commented 1 month ago

Thanks again for picking up a shovel here! I will write a list of icons that we will need in the near future. From top of my head we will soonish need icons that represent:

Maybe a template in Inkscape would be nice as we only have the svgs.

MyBaBB commented 1 month ago

Thanks !!

RayTracedObserver commented 1 month ago

Here I've redone the dot grid based on the exact dimensions of the current retail.svg. Done in Inkscape. The retail cart icon is left untouched but is in a group that is hidden by default but can be made visible to study the way icons are formed. The dot grid was redone from scratch.

Icon_Template.svg :

Icon_Template

I believe there needs to be a discussion about the color choice for those icons. I see no objection to using red and blue but the current blue and red shades when put together seem somewhat overly bland and washed out to my eye or at least they don't really seem to fit together to my artist's perception. Perhaps it is only the blue or only the red that needs changing...

Both of my monitors have been recently calibrated using an x-rite calibration device but anyway most iPhones iPads and high end android devices have good calibration for people who don't have calibrated monitors. I think we should try various combinations of shades and collectively (even though right now there seems to be very little people contributing here) decide on the final shade. Or maybe that's something to do later on. Right now focusing on structure and shapes and recoloring the website being done last ?

katomm commented 1 month ago

Hello @RayTracedObserver, thank you for showing up here. As we will need a lot of icons and this is not a competition it's clever to have two people looking into this. I like the idea of having a template in Inkscape.

I'm not a designer but also noticed inconsistencies in the current icons and some even have a different grid (and therefore?) different sizes, which means not every icon can easily combined with others. If we solve these things allow a path of creating new ones, that would be fantastic.

Regarding colors: I agree on the opinion and but regarding colors we should adhere to the branding guidelines uploaded here.

MyBaBB commented 1 month ago

This is all fine. I do actually have a calibrated screen and I took it straight from the color sample provided. Let me know if it look off and I can check my calibration. I think that once we have a pattern with all of the codes then it will be easier.. One thing that I noticed is it is hard to make letters. Like trying to make an S look good is almost impossible. Once we get the scale and the sizes perfected then we can roll smoothly. I will study Inkscape this Morning and test. I am using the current image that was sent for the scale

On Tue, Jun 4, 2024 at 11:07 PM Tommy Kammerer @.***> wrote:

Hello @RayTracedObserver https://github.com/RayTracedObserver, thank you for showing up here. As we will need a lot of icons and this is not a competition it's clever to have two people looking into this. I like the idea of having a template in Inkscape.

I'm not a designer but also noticed inconsistencies in the current icons and some even have a different grid (and therefore?) different sizes, which means not every icon can easily combined with others. If we solve these things allow a path of creating new ones, that would be fantastic.

Regarding colors: I agree on the opinion but we need to adhere to some branding guidelines. (I will open a discussion thread with them and link them here)

— Reply to this email directly, view it on GitHub https://github.com/cardano-foundation/cardano-org/issues/67#issuecomment-2148951511, or unsubscribe https://github.com/notifications/unsubscribe-auth/A4VTGWM2ZHU27CR3XNGWAKLZF2TJ5AVCNFSM6AAAAABIUNJESOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBYHE2TCNJRGE . You are receiving this because you were assigned.Message ID: @.***>

RayTracedObserver commented 1 month ago

I had illustrator a long time ago but don't anymore. But it is very possible that the SVG template file I uploaded above opens up fine in illustrator with all the layers given that SVG is a standard.

But yes given this is open source it's very important for files to properly open in open software like Inkscape.

So if you do try to switch to Inkscape you'll see that it is very similar to illustrator. I set up a grid which should be activated by default on this file.

If it is not activated yet it can be activated in menu document properties.

In top right of Inkscape interface you will find snapping preferences behind a little icon : snapping centers to grid should be enabled (this is not the actual term but I am not in front of Inkscape to check right now).

@katomm Oh yes it's true that some icons have a different grid yes. We have to look into this and make it uniform indeed and settle on a definitive grid. I am surprised that McCann let this go through when doing the first version of the website.

MyBaBB commented 1 month ago

Where do I find this SVG? I looked for it in the repository

RayTracedObserver commented 1 month ago

Where do I find this SVG? I looked for it in the repository

The file is in my message above. It's the dotted grid. It's an SVG which contains a hidden layer with the retail cart from the retail logo. I am quite new to GitHub so I don't know how to add files to the directory containing the other SVGs. I don't think I have the rights to do that but certainly I could make a proposal... I need to read a few tutorials...

RayTracedObserver commented 1 month ago

Icon_Template.zip

@MyBaBB Here is the file but zipped in case this works better because Github seems to be renaming it and changing it somehow when I uploaded it directly... I tried downloading and opening the one I uploaded previously in Inkscape and it won't open. Makes one wonder what Github is doing to the file...

MyBaBB commented 1 month ago

@RayTracedObserver Ok thanks, I took a screenshot and made another one , and I made the borders the same size as the dot. and put the colors in. I would like to use yours though so that we are on the same page from the start. I had the same problem with it opening up on the markdown file from github. We need a good way to send and receive easily. I have a Figma account for Student. I don't know if we can collaborate on a Student Account. I am unfamiliar with Inkscape but I am very interested. I just use Illustrator because it is the most widely accepted universally. I use Gimp for some things like making .ico files. Anyways I am a Jr. Frontend developer and I took on this task mainly to gain a reputation on Github for experience and Collaboration. So it would be nice if I could start a folder to push the SVGs to on there so that it shows up as experience on Github. So, lets research the best way for me and you to share files. Good to meet you.

RayTracedObserver commented 1 month ago

Nice to meet you too. Well I don't mind trying to install Figma, I've never used it but am a very fast learner when it comes to software. If the app is well designed enough that is. However maybe for such a "simple task" as creating new logos based on this grid it's not even necessary and a simple shared folder on Google drive or mega or Dropbox or whichever service is just as good.

I don't mind trying Figma out of curiosity though but am not willing to pay for a subscription for it or other costs. So if you find a way for us to use it for free I'll install it :)

Also the zip file above is working fine. So we can always zip files and put them here and github won't modify them.

But I don't know if any of these would count for reputation on GitHub. And if it's something that you find important and would help you in your "career" then I don't mind using whatever method you choose.

I am actually more familiar with illustrator than Inkscape but I don't have an adobe subscription currently and don't wish to get one. I tried Inkscape for the first time last month and it was so similar to illustrator that it was very easy to pick up. So do give it a try, it's free and the interface is a hundred times more professional looking than GIMP.

RayTracedObserver commented 1 month ago

Experiments for NFT icon NFT1 NFT2

Ordered pattern :

NFT3

Patterned with randomness :

NFT4

On the first one I disabled the underlying red dots that are under the blue lines because I've noticed that sometimes on some browsers the red dots can still be seen ever ever so slightly at the edges of the lines, even on the ones done by the McCann agency. On the other test NFT ones they are not hidden yet. Normally they should not be visible regardless but I guess it's an issue with some browser's vector rendering engine or something of the sorts. And I do have to check dimensions and alignment. These are just tests.

Wow I really don't like the colors of the guidelines, that blue reminds me of clunky windows blue screen of death and broken tech... oh well haha. I'll get over it for now and make the best of it.

MyBaBB commented 1 month ago

Ok. I can do google drive. I will look in the morning at it. It's been a while. I think yes it's a simple thing. It will be even more simple if we are doing the same thing. I am not good at fig.a but it is the new thing. I don't pay neither. I think you have to pay to share info. If we can sync to Google drive would be good. I have used photorealism to sync svg's to a google before to Google. before. I am sure we can work out something easy. We probably won't even send many. We can look further into it. It will be interesting how ever it works out. It's so thing to do.

On Wed, Jun 5, 2024, 1:04 PM RayTracedObserver @.***> wrote:

Nice to meet you too. Well I don't mind trying to install Figma, I've never used it but am a very fast learner when it comes to software. If the app is well designed enough that is. However maybe for such a "simple task" as creating new logos based on this grid it's not even necessary and a simple shared folder on Google drive or mega or Dropbox or whichever service is just as good.

I don't mind trying Figma out of curiosity though but am not willing to pay for a subscription for it or other costs. So if you find a way for us to use it for free I'll install it :)

— Reply to this email directly, view it on GitHub https://github.com/cardano-foundation/cardano-org/issues/67#issuecomment-2150860974, or unsubscribe https://github.com/notifications/unsubscribe-auth/A4VTGWK5ENTPPRU4GTXI5ALZF5VOJAVCNFSM6AAAAABIUNJESOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJQHA3DAOJXGQ . You are receiving this because you were mentioned.Message ID: @.***>

katomm commented 1 month ago

I like how this is shaping up. Please let me know if I can help by either providing a google folder for uploading files or giving a git crash course on creating pull requests, a dedicated discussion category about images in https://github.com/cardano-foundation/cardano-org/discussions or anything else.

MyBaBB commented 1 month ago

Thank you for letting me have a shot at this. It looks like your graphics man has it figured out and is eager to make these icons. I will keep your repo and check the issues from time to time for anything that is maybe a little more advanced. I am more of a custom parts man. If you look at this repo. I can build something for your other issues. I have an three images that fade in and out. https://mybabb.github.io/Docusaurus-Playground/. We can make some cool custom parts.

RayTracedObserver commented 1 month ago

Thank you for letting me have a shot at this. It looks like your graphics man has it figured out and is eager to make these icons. I will keep your repo and check the issues from time to time for anything that is maybe a little more advanced. I am more of a custom parts man. If you look at this repo. I can build something for your other issues. I have an three images that fade in and out. https://mybabb.github.io/Docusaurus-Playground/. We can make some cool custom parts.

Please feel free to stick around this issue and feel free to make other icons, I am just a random Cardano enthusiast and have no incentive to do this other than because I believe open source blockchain can help the world, I most probably won't be doing all the icons because I need to work on my own life projects and I can't give too much time to Cardano. The more the merrier. @MyBaBB

Ah sure I would like to learn how to make pull requests @katomm Surely there are some good tutorials out there though, I don't want to take your time for something that has probably been explained thousands of times. But if you have a good tutorial link in mind I am happy to look at it.

katomm commented 1 month ago

My advice would be to get https://www.sourcetreeapp.com as git client.

ubani commented 1 month ago

A great alternative to Adobe's indesign, photoshop, and illustrator is the Affinity.serif suite. They're only at a fraction of Adobe's cost, no subscription, and less memory consumptive.

RayTracedObserver commented 1 month ago

My advice would be to get https://www.sourcetreeapp.com as git client.

Thank you. Is it better than Github desktop ? I've never used any of them.

RayTracedObserver commented 1 month ago

A great alternative to Adobe's indesign, photoshop, and illustrator is the Affinity.serif suite. They're only at a fraction of Adobe's cost, no subscription, and less memory consumptive.

Ah yes I did try it a long time ago and at the time a few features were still missing but it was so much better optimized. I am sure it is great and fully featured now that time has passed.

RayTracedObserver commented 1 month ago

I created a pull request with the template. Hopefully I did it correctly. @katomm

katomm commented 1 month ago

Thank you. Is it better than Github desktop ? I've never used any of them.

Better is of course relative. SourceTree is a universal git client and GitHub Desktop tries to hook you into the GitHub world focusing on basic things.

katomm commented 1 month ago

I created a pull request with the template. Hopefully I did it correctly. @katomm

Thanks just commented on #76

katomm commented 2 days ago

FYI. The following pictures would be necessary shortly: (for #52 )

RayTracedObserver commented 1 day ago

Ok I'll see what I can do. I can't promise I will be able to work on this at all due to personal reasons. It would be great if more people would get on the assignment.

To anyone reading this you can use https://github.com/cardano-foundation/cardano-org/blob/staging/static/img/dotted-icons/template-dotted-icons.svg as a template. In Inkscape, if it is not already on, turn grid on in document properties and use pencil tool to draw icon using same color as template color. Stroke width is 5px, make sure to disable fill.

Some icons have a different grid. So maybe there needs to be a talk about choosing a definitive grid style and dimension... for now I just made the template using the most commonly used grid size in the currently existing icons.

RayTracedObserver commented 1 day ago

Could this work for get funded in ADA ? @katomm It is supposed to look like a hand dropping a coin into a slot... But I don't know if people will see that. The grid matrix format makes it difficult to represent such abstract things.

Screenshot 2024-07-23 at 00 30 21

RayTracedObserver commented 1 day ago

Please don't laugh, doing experiments for receive ADA from people around the world... Ideas welcome... Screenshot 2024-07-23 at 00 50 22

This one is just a test not a final proposal. If only I could make the earth a bit smaller it would leave a bit more room for other things... but making a smaller earth recognizable is not an easy task... another option would be to forget the earth and represent people and the concept of receiving, or people and Ada...