From 73d6c904b4f5456768955cca0ca59b5668266854 Mon Sep 17 00:00:00 2001 From: RayTracedObserver <160285742+RayTracedObserver@users.noreply.github.com> Date: Fri, 16 Aug 2024 02:13:24 +0200 Subject: [PATCH 1/3] New dotted icon for NFTs and instructions Adds new NFT.svg icon and a *readme.txt file with instructions on how to make new dotted icons using the template file --- static/img/dotted-icons/*readme.txt | 26 +++ static/img/dotted-icons/nft.svg | 349 ++++++++++++++++++++++++++++ 2 files changed, 375 insertions(+) create mode 100644 static/img/dotted-icons/*readme.txt create mode 100644 static/img/dotted-icons/nft.svg diff --git a/static/img/dotted-icons/*readme.txt b/static/img/dotted-icons/*readme.txt new file mode 100644 index 0000000..1d04fec --- /dev/null +++ b/static/img/dotted-icons/*readme.txt @@ -0,0 +1,26 @@ +To make a new dotted icon use the template-dotted-icons.svg file. + +The file has been made in open source vector graphic software Inkscape. + +In Inkscape, make sure that the rectangular grid is enabled and visible in file > document properties. + +Turn on snapping to grid in snapping options (top right of app window in Inkscape 1.3.2) + +Use pencil tool to draw the icon with a stroke width of 5 px with a round "join" and round "cap". + +The colors in the template are already set to follow the cardano branding guidelines which at the moment of writing these instructions are the following values for Inkscape + +Blue icon : R : 0 G : 51 B : 173 A : 100 +Background dot grid : R : 255 G : 85 B : 83 A : 100 + +Please delete all the dots that are hidden under the icon to make the SVG file lighter and prevent potential issues. + +------- + +It is important to remain playful and creative and one could for example color some dots blue if this helps making a better, more meaningful icon. Maybe you have other ideas. + +While these instructions are for the current grid system, if you think you can design a better grid system than the current one, create it, and submit your ideas to the community. Collaborate. + +Some icons currently have a different grid system, which allows for more slanted designs. This template was made for the more rigid and square grid because it is the one that most of the icons use. But why not make a template for the slanted, more relaxed grid style ? Or take inspiration from it and redesign all the icons. + +Thank you for your contributions. \ No newline at end of file diff --git a/static/img/dotted-icons/nft.svg b/static/img/dotted-icons/nft.svg new file mode 100644 index 0000000..2e59246 --- /dev/null +++ b/static/img/dotted-icons/nft.svg @@ -0,0 +1,349 @@ + + + + + + + From a2785bff09f5c98f6945435e064a029e96b35041 Mon Sep 17 00:00:00 2001 From: RayTracedObserver <160285742+RayTracedObserver@users.noreply.github.com> Date: Mon, 19 Aug 2024 00:43:31 +0200 Subject: [PATCH 2/3] Improved dotted icons instructions --- static/img/dotted-icons/*README.md | 32 +++++++++++++++++++++++++++++ static/img/dotted-icons/*readme.txt | 26 ----------------------- 2 files changed, 32 insertions(+), 26 deletions(-) create mode 100644 static/img/dotted-icons/*README.md delete mode 100644 static/img/dotted-icons/*readme.txt diff --git a/static/img/dotted-icons/*README.md b/static/img/dotted-icons/*README.md new file mode 100644 index 0000000..c114974 --- /dev/null +++ b/static/img/dotted-icons/*README.md @@ -0,0 +1,32 @@ +# Dotted icons + +## Where to find the template + +To make a new dotted icon, download and modify the template-dotted-icons.svg file ( /static/img/dotted-icons/template-dotted-icons.svg ) + +The template SVG file was made in open source vector graphic software Inkscape and can be edited in other vector graphic software. + +## How to make a new dotted icon in inkscape + +In Inkscape, make sure that the rectangular grid is enabled and visible in file > document properties. + +Turn on snapping to grid in snapping options (top right of app window in Inkscape 1.3.2) + +Use pencil tool to draw the icon with a stroke width of 5 px with a round "join" and round "cap". + +The colors in the template are already set to follow the cardano branding guidelines which at the moment of writing these instructions are the following values. + +Blue icon : R : 0 G : 51 B : 173 A : 100 +Background dot grid : R : 255 G : 85 B : 83 A : 100 + +Please delete all the dots that are hidden under the icon's lines in order to make the SVG file lighter and prevent potential issues. + +## Creative choices + +It is important to remain playful and creative and one could for example color some dots blue in order to make a more meaningful icon or convey a specific idea. + +While these instructions are for the current grid system, if you think you can design a better grid system, or a better icon system than the current one, submit your ideas to the community. Collaborate and experiment. + +Some icons currently have a different, slanted grid system. The template-dotted-icons.svg file was made for the more rigid and square grid because it is the one that most of the current icons use. But why not make a template for the slanted, more relaxed grid style ? Or take inspiration from it and redesign all the icons. + +Thank you for your contributions. \ No newline at end of file diff --git a/static/img/dotted-icons/*readme.txt b/static/img/dotted-icons/*readme.txt deleted file mode 100644 index 1d04fec..0000000 --- a/static/img/dotted-icons/*readme.txt +++ /dev/null @@ -1,26 +0,0 @@ -To make a new dotted icon use the template-dotted-icons.svg file. - -The file has been made in open source vector graphic software Inkscape. - -In Inkscape, make sure that the rectangular grid is enabled and visible in file > document properties. - -Turn on snapping to grid in snapping options (top right of app window in Inkscape 1.3.2) - -Use pencil tool to draw the icon with a stroke width of 5 px with a round "join" and round "cap". - -The colors in the template are already set to follow the cardano branding guidelines which at the moment of writing these instructions are the following values for Inkscape - -Blue icon : R : 0 G : 51 B : 173 A : 100 -Background dot grid : R : 255 G : 85 B : 83 A : 100 - -Please delete all the dots that are hidden under the icon to make the SVG file lighter and prevent potential issues. - -------- - -It is important to remain playful and creative and one could for example color some dots blue if this helps making a better, more meaningful icon. Maybe you have other ideas. - -While these instructions are for the current grid system, if you think you can design a better grid system than the current one, create it, and submit your ideas to the community. Collaborate. - -Some icons currently have a different grid system, which allows for more slanted designs. This template was made for the more rigid and square grid because it is the one that most of the icons use. But why not make a template for the slanted, more relaxed grid style ? Or take inspiration from it and redesign all the icons. - -Thank you for your contributions. \ No newline at end of file From 086ab0c35fd7e42e0fa12e5dba7814176bc44287 Mon Sep 17 00:00:00 2001 From: RayTracedObserver <160285742+RayTracedObserver@users.noreply.github.com> Date: Thu, 22 Aug 2024 02:46:54 +0200 Subject: [PATCH 3/3] Adds get-funded.svg dotted icon Adds get-funded.svg dotted icon representing "getting funded in ada". Image description : a hand holds a coin and seems to be about to drop it in a slot. --- static/img/dotted-icons/get-funded.svg | 310 +++++++++++++++++++++++++ 1 file changed, 310 insertions(+) create mode 100644 static/img/dotted-icons/get-funded.svg diff --git a/static/img/dotted-icons/get-funded.svg b/static/img/dotted-icons/get-funded.svg new file mode 100644 index 0000000..7f9d674 --- /dev/null +++ b/static/img/dotted-icons/get-funded.svg @@ -0,0 +1,310 @@ + + + + + + +