Design a logo for PyGMT #1404
Comments
weiji14
added
help wanted
weiji14
added
good first issue
|
As proposed in #2579 (comment), I'm merging issue #2579 into this issue so that we can have a central issue to discuss the logo. #2579 (comment) from @juanis2112
#2579 (comment) from @leouieda
|
|
I feel before we continue here, we should decide which tool we want to use to create the logo. At first ideas were implemented in Python using PyGMT (1. - 3.), but later versions (up on 4.) were modified with Inkscape. I have only little experience with Inkscape and I'm wondering about the reproducibility of the logo. When implementing the logo in Python we can easily share the code of the current version and people can experiment with it and build on it. |
|
Hello Friends! I'm using Github to contribute for the first time, so please let me know if I've made a mistake. I took a stab at brainstorming for the logo based on the original direction/storyline. You can take a look at the process here if interested : PyGMT.Logo.Process.mp4Option 01 : |
|
@sfrooti I really like your option 2! It's simple enough to look ok in a small size and has a bunch of elements that refer to GMT and the project history. Very good! @yvonnefroehlich regarding tools, I think making the logo with PyGMT itself limits our options for design quite a bit and would make it very hard to experiment. Inkscape is open source and relatively easy to pick up (easier than having to script everything and learn cryptic GMT options at least). But if people really want to make the logo with PyGMT then an option would be to try to recreate the ones above with code. Easier than designing with code directly. |
|
@sfrooti Great design!
I don't have a strong opinion on the color scheme. We want to use the Python and GMT colors but the colors don't have to be the same RGB values.
Definitely yes. @weiji14 once posted the OSGeo logo at https://forum.generic-mapping-tools.org/t/design-for-pygmt-logo/1346/14, which we may want to follow:
Some questions:
|
|
Thank you so much @leouieda and @seisman ! I'm glad you liked it.
I've tried a version of this, it looks a little heavy on the detail to translate well in smaller specs. But in in a bigger size it looks pretty cool. |
|
I wasn't really satisfied how the one on top came out, so I've made quite a few minor changes. I think the logo looks best against a dark background with brighter colours, so I thought of adding that into the visual itself, to give it more of a compass feel. I also experimented with a lot of fonts, and I think this one (Space Grotesk by Florian Karsten) which is an open source font, goes well with it : 
Black & White : 
Let me know what you think! |
|
Really like the logo as well as the combination of colors @sfrooti. How should we continue @GenericMappingTools/pygmt-maintainers ? |
|
Yes ofcourse @leouieda, I'd love to. I agree about the python logo too, the design is more cluttered with it. How can I share the vector files with you? Shall I just post it in a comment here? |
|
I think you could create a repository under your GitHub account, upload the vector files and also make sure adding a license like CC-BY. |
|
@sfrooti I'm wondering if you're still interested in sharing your logos with us. |
YES! I'm so sorry it slipped my mind. I'll upload the file and license tonight itself. |
|
Hello! Here is the link for the repository: https://github.com/sfrooti/PyGMT-Logo.git Everything is packaged under the CC-BY 4.0 license. Please feel free to tweak and adjust the design - it's meant to grow with the community! I've organized everything super neatly to make it easy to navigate 🥰 I'm so excited to see how the logo will be used! If you need anything at all - different formats, small tweaks, or just have questions - please don't hesitate to reach out. |
|
Thanks @sfrooti! It's much appreciated and it'll be great to finally have a logo 8 years after this project started. It was worth the wait! |
|
Thanks @sfrooti again for sharing the logos. I've attached these logos below to better compare them and discuss possible improvements. Here are the to-do lists in my minds:
|
|
Generally speaking, I like the logos. Do we want the needle to be slightly slanted, similar to the ones in #1404 (comment) (of course, without the Python logo)? |
|
I'd prefer a slightly slanted/tilted design, with the arrow pointed slightly Southeast rather than South. Also I kinda want the design to work on a Hex Sticker if possible, am wondering what would it look like if we change the circular outline to a 6-sided hex? |
A hex sticker would be nice but then we would loose the circular shape representing Earth, wouldn't we? Besides a more tilted design I would prefer to use the dark mode versions when using color, otherwise especially the yellow lines do not really stand out from the background. For black/white both looks good. |
|
First of all thanks a lot @sfrooti for working on a logo and even more providing and sharing your ideas! I just tried to generate these logos in Python / with PyGMT, including modifications for rotation and testing a hexagon shape. Here is what I have so far (no wordmark included yet, only the visual; codes are below):
Python code (it's a first version (: )
import pygmt
# %%
# -----------------------------------------------------------------------------
# Changebale settings (-> later input for function)
# -----------------------------------------------------------------------------
dpi_png = 720
color_concept = "color" # "color", "bw"
bg_concept = "dark" # "light", "dark"
shape = "hexagon" # "circle", "hexagon"
angle_rot = 30 # degrees
# %%
# -----------------------------------------------------------------------------
# Not-changebale settings
# -----------------------------------------------------------------------------
# size = 5
size = 5
value_yellow_1 = 2.65
value_yellow_2 = 1.4
if color_concept == "color":
color_blue = "48/105/152" # Python blue
color_yellow = "255/212/59" # Python yellow
color_red = "238/86/52" # GMT red
elif color_concept == "bw" and bg_concept == "light":
color_blue = color_yellow = color_red = "gray20"
elif color_concept == "bw" and bg_concept == "dark":
color_blue = color_yellow = color_red = "white"
match bg_concept:
case "light": color_bg = "white"
case "dark": color_bg = "gray20"
pen_yellow = f"5p,{color_yellow}"
pen_red = f"10p,{color_red}"
region = [-size, size] * 2
# %%
# -----------------------------------------------------------------------------
# Start plotting
# -----------------------------------------------------------------------------
fig = pygmt.Figure()
pygmt.config(MAP_FRAME_PEN="0.01p,cyan@100")
fig.basemap(region=region, projection=f"X{size * 2}c", frame=[0, "+gcyan@100"]) # "a1f0.5g0.5"
# .............................................................................
# blue circle for Earth
# .............................................................................
match shape:
case "circle": style="c7.5c"
case "hexagon": style="h8.6c"
fig.plot(x=0, y=0, style=style, pen=f"15p,{color_blue}", fill=color_bg)
# .............................................................................
# yellow lines for compass
# .............................................................................
# horizontal yellow line
fig.plot(x=[-4, 4], y=[0, 0], pen=pen_yellow)
# diagonal yellow lines
# upper left
fig.plot(x=[-value_yellow_1, -value_yellow_2], y=[value_yellow_1, value_yellow_2], pen=pen_yellow)
# lower right
fig.plot(x=[value_yellow_2, value_yellow_1], y=[-value_yellow_2, -value_yellow_1], pen=pen_yellow)
# lower left
fig.plot(x=[-value_yellow_1, -value_yellow_2], y=[-value_yellow_1, -value_yellow_2], pen=pen_yellow)
# upper right
fig.plot(x=[value_yellow_2, value_yellow_1], y=[value_yellow_2, value_yellow_1], pen=pen_yellow)
# .............................................................................
# letter G
# .............................................................................
# horizontal red line
fig.plot(x=[0.1, 1.65], y=[0, 0], pen=f"12p,{color_red}")
# red ring sector
fig.plot(x=0, y=0, style="w3.3c/90/0+i2.35c", fill=color_red)
# space between yellow lines and ring sector
fig.plot(x=0, y=0, style="w3.7c/0/360+i3.3c", fill=color_bg)
# vertical yellow line
fig.plot(x=[0, 0], y=[-4, 4], pen=f"6p,{color_yellow}")
# cover yellow line in lower part of the ring sector
fig.plot(x=0, y=0, style="w3.3c/260/-80+i2.35c", fill=color_red)
# .............................................................................
# upper vertical red line
# .............................................................................
# space between red line and blue circle
fig.plot(x=[0, 0], y=[4.01, 3.0], pen=f"18p,{color_bg}")
# red line
fig.plot(x=[0, 0], y=[4.00, 1.9], pen=f"12p,{color_red}")
# .............................................................................
# letter M
# .............................................................................
# space between letter M and yellow line at the right side
# fig.plot(x=[1.6, 1.6], y=[1.5, 1.8], pen=f"10p,{color_bg}")
fig.plot(x=[1.6, 1.6], y=[1.5, 2.0], pen=f"10p,{color_bg}")
# diagonal lines
fig.plot(x=[0.33, 0.90], y=[1.527, 1.00], pen=pen_red)
fig.plot(x=[0.90, 1.43], y=[1.00, 1.527], pen=pen_red)
# middle pick
fig.plot(x=0.9, y=0.9, style="d0.3c", fill=color_red)
# vertical lines
fig.plot(x=[0.285, 0.285], y=[0.00, 1.65], pen=pen_red)
fig.plot(x=[1.47, 1.47], y=[0.00, 1.65], pen=pen_red)
# .............................................................................
# letter T
# .............................................................................
# red curved horizontal line
fig.plot(x=0, y=0, style="w4.6c/240/-60+i3.7c", fill=color_red)
# vertical endings of curved horizontal line
fig.plot(x=[-1.05, -1.05], y=[-1.5, -2.5], pen=f"9p,{color_bg}")
fig.plot(x=[1.05, 1.05], y=[-1.5, -2.5], pen=f"9p,{color_bg}")
# arrow head as inverse triangle
fig.plot(x=0, y=-3.55, style="i1.1c", fill=color_red, pen=f"3p,{color_bg}")
# arrow tail
fig.plot(x=[0, 0], y=[-2, -3.57], pen=f"12p,{color_red}")
# .............................................................................
# Save
# .............................................................................
# fig.show()
fig_name = f"pygmt_logo_{shape}_{color_concept}_{bg_concept}"
for ext in ["eps"]:
fig.savefig(fname=f"{fig_name}.{ext}", dpi=dpi_png)
print(fig_name)
# .............................................................................
# Replot rotated (TODO get ride of the white margin)
# .............................................................................
fig = pygmt.Figure()
pygmt.config(MAP_FRAME_PEN="0.01p,cyan@100")
fig.basemap(region=region, projection=f"X{size * 2}c", frame=[0, f"+g{color_bg}"])
fig.image(
imagefile=f"{fig_name}.eps",
position=f"jMC+w{size * 2}c",
perspective=f"{angle_rot}+w0/0",
)
# .............................................................................
# Show and save
# .............................................................................
fig.show()
fig_name_rot = f"{fig_name}_rot{angle_rot}deg"
for ext in ["png"]: #, "pdf", "eps"]:
transparent = False
if ext=="png": transparent = True
fig.savefig(
fname=f"{fig_name_rot}.{ext}", dpi=dpi_png, transparent=transparent
)
print(fig_name_rot)Edit: Now, I additionally tried to add the WordMark. However, the suggested front (which I personally really like) is not available in GMT, and I used another one for now:
Python code (updated version)
import pygmt
# %%
# -----------------------------------------------------------------------------
# Changebale settings (-> later input for function)
# -----------------------------------------------------------------------------
dpi_png = 360
color_concept = "color" # "color", "bw"
bg_concept = "dark" # "light", "dark"
shape = "hexagon" # "circle", "hexagon"
angle_rot = 30 # degrees
# %%
# -----------------------------------------------------------------------------
# Not-changebale settings
# -----------------------------------------------------------------------------
# size = 5
size = 5
value_yellow_1 = 2.65
value_yellow_2 = 1.4
if color_concept == "color":
color_blue = "48/105/152" # Python blue
color_yellow = "255/212/59" # Python yellow
color_red = "238/86/52" # GMT red
elif color_concept == "bw" and bg_concept == "light":
color_blue = color_yellow = color_red = "gray20"
elif color_concept == "bw" and bg_concept == "dark":
color_blue = color_yellow = color_red = "white"
match bg_concept:
case "light":
color_bg = "white"
color_py = color_blue
color_gmt = "gray20"
case "dark":
color_bg = "gray20"
color_py = color_yellow
color_gmt = "white"
pen_yellow = f"5p,{color_yellow}"
pen_red = f"10p,{color_red}"
region = [-size, size] * 2
# %%
# -----------------------------------------------------------------------------
# Start plotting
# -----------------------------------------------------------------------------
fig = pygmt.Figure()
pygmt.config(MAP_FRAME_PEN="0.01p,cyan@100")
fig.basemap(region=region, projection=f"X{size * 2}c", frame=[0, "+gcyan@100"]) # "a1f0.5g0.5"
# .............................................................................
# blue circle for Earth
# .............................................................................
match shape:
case "circle": style="c7.5c"
case "hexagon": style="h8.6c"
fig.plot(x=0, y=0, style=style, pen=f"15p,{color_blue}", fill=color_bg)
# .............................................................................
# yellow lines for compass
# .............................................................................
# horizontal yellow line
fig.plot(x=[-4, 4], y=[0, 0], pen=pen_yellow)
# diagonal yellow lines
# upper left
fig.plot(x=[-value_yellow_1, -value_yellow_2], y=[value_yellow_1, value_yellow_2], pen=pen_yellow)
# lower right
fig.plot(x=[value_yellow_2, value_yellow_1], y=[-value_yellow_2, -value_yellow_1], pen=pen_yellow)
# lower left
fig.plot(x=[-value_yellow_1, -value_yellow_2], y=[-value_yellow_1, -value_yellow_2], pen=pen_yellow)
# upper right
fig.plot(x=[value_yellow_2, value_yellow_1], y=[value_yellow_2, value_yellow_1], pen=pen_yellow)
# .............................................................................
# letter G
# .............................................................................
# horizontal red line
fig.plot(x=[0.1, 1.65], y=[0, 0], pen=f"12p,{color_red}")
# red ring sector
fig.plot(x=0, y=0, style="w3.3c/90/0+i2.35c", fill=color_red)
# space between yellow lines and ring sector
fig.plot(x=0, y=0, style="w3.7c/0/360+i3.3c", fill=color_bg)
# vertical yellow line
fig.plot(x=[0, 0], y=[-4, 4], pen=f"6p,{color_yellow}")
# cover yellow line in lower part of the ring sector
fig.plot(x=0, y=0, style="w3.3c/260/-80+i2.35c", fill=color_red)
# .............................................................................
# upper vertical red line
# .............................................................................
# space between red line and blue circle
fig.plot(x=[0, 0], y=[4.01, 3.0], pen=f"18p,{color_bg}")
# red line
fig.plot(x=[0, 0], y=[4.00, 1.9], pen=f"12p,{color_red}")
# .............................................................................
# letter M
# .............................................................................
# space between letter M and yellow line at the right side
# fig.plot(x=[1.6, 1.6], y=[1.5, 1.8], pen=f"10p,{color_bg}")
fig.plot(x=[1.6, 1.6], y=[1.5, 2.0], pen=f"10p,{color_bg}")
# diagonal lines
fig.plot(x=[0.33, 0.90], y=[1.527, 1.00], pen=pen_red)
fig.plot(x=[0.90, 1.43], y=[1.00, 1.527], pen=pen_red)
# middle pick
fig.plot(x=0.9, y=0.9, style="d0.3c", fill=color_red)
# vertical lines
fig.plot(x=[0.285, 0.285], y=[0.00, 1.65], pen=pen_red)
fig.plot(x=[1.47, 1.47], y=[0.00, 1.65], pen=pen_red)
# .............................................................................
# letter T
# .............................................................................
# red curved horizontal line
fig.plot(x=0, y=0, style="w4.6c/240/-60+i3.7c", fill=color_red)
# vertical endings of curved horizontal line
fig.plot(x=[-1.05, -1.05], y=[-1.5, -2.5], pen=f"9p,{color_bg}")
fig.plot(x=[1.05, 1.05], y=[-1.5, -2.5], pen=f"9p,{color_bg}")
# arrow head as inverse triangle
fig.plot(x=0, y=-3.55, style="i1.1c", fill=color_red, pen=f"3p,{color_bg}")
# arrow tail
fig.plot(x=[0, 0], y=[-2, -3.57], pen=f"12p,{color_red}")
# .............................................................................
# Save
# .............................................................................
# fig.show()
fig_name = f"pygmt_logo_{shape}_{color_concept}_{bg_concept}"
for ext in ["eps"]:
fig.savefig(fname=f"{fig_name}.{ext}", dpi=dpi_png)
print(fig_name)
# .............................................................................
# Replot rotated (TODO get ride of the white margin)
# .............................................................................
fig = pygmt.Figure()
pygmt.config(MAP_FRAME_PEN="0.01p,cyan@100")
fig.basemap(region=region, projection=f"X{size * 2}c", frame=[0, f"+g{color_bg}"])
fig.image(
imagefile=f"{fig_name}.eps",
position=f"jMC+w{size * 2}c",
perspective=f"{angle_rot}+w0/0",
)
# .............................................................................
# Save
# .............................................................................
fig.show()
fig_name_rot = f"{fig_name}_rot{angle_rot}deg"
for ext in ["png", "eps"]: #, "pdf", "eps"]:
transparent = False
if ext=="png": transparent = True
fig.savefig(
fname=f"{fig_name_rot}.{ext}", dpi=dpi_png, transparent=transparent
)
print(fig_name_rot)
# .............................................................................
# Replot and add WordMark "PyGMT" vertical
# .............................................................................
fig = pygmt.Figure()
pygmt.config(MAP_FRAME_PEN="0.01p,cyan@100")
fig.basemap(region=region, projection=f"X{size * 2 - 2}c/{size * 2}c", frame=[0, f"+g{color_bg}"])
fig.image(imagefile=f"{fig_name_rot}.eps", position=f"jMC+w{size * 2}c+o0c/1.1c")
args_text = {"x": -3.6, "y": -3.6, "justify": "LM"}
fig.text(text="PyGMT", font=f"50p,AvantGarde-Book,{color_gmt}", **args_text)
fig.text(text="Py", font=f"50p,AvantGarde-Book,{color_py}", **args_text)
# .............................................................................
# Save
# .............................................................................
fig.show()
fig_name_rot_text = f"{fig_name_rot}_wordmark_vert"
for ext in ["png", "eps"]: #, "pdf", "eps"]:
transparent = False
if ext=="png": transparent = True
fig.savefig(
fname=f"{fig_name_rot_text}.{ext}", dpi=dpi_png, transparent=transparent
)
print(fig_name_rot_text)
# .............................................................................
# Replot and add WordMark "PyGMT" horizontal
# .............................................................................
fig = pygmt.Figure()
pygmt.config(MAP_FRAME_PEN="0.01p,cyan@100")
fig.basemap(region=region, projection=f"X{size * 2}c/{size - 2}c", frame=[0, f"+g{color_bg}"])
fig.image(imagefile=f"{fig_name_rot}.eps", position=f"jLM+w{size - 1.5}c")
args_text = {"x": -1.5, "y": 0, "justify": "LM"}
fig.text(text="PyGMT", font=f"50p,AvantGarde-Book,{color_gmt}", **args_text)
fig.text(text="Py", font=f"50p,AvantGarde-Book,{color_py}", **args_text)
# .............................................................................
# Save
# .............................................................................
fig.show()
fig_name_rot_text = f"{fig_name_rot}_wordmark_hor"
for ext in ["png", "eps"]: #, "pdf", "eps"]:
transparent = False
if ext=="png": transparent = True
fig.savefig(
fname=f"{fig_name_rot_text}.{ext}", dpi=dpi_png, transparent=transparent
)
print(fig_name_rot_text) |
The hex sticker looks nice, but I agree with @michaelgrund that the circular shape representing Earth is also an important element. Since @yvonnefroehlich already produces both versions, I guess we can provide both? The circular one should be the standard logo, and the hex one can also be used in presentations if people prefer this one. @yvonnefroehlich Excellent work! I was also planning to try writing such script. Glad to know that you already did, and they look pretty good. Could you please open a PR instead and add the scripts as a gallery example? The benefits are:
|
Thanks! Very happy about the positive feedback! Actually, I just tried it to see how well this can work and what people think. I agree more discussion about the code should be done in a PR. In #3849, I added the current version of the code as Python script / Gallery example. The code could be easily converted to a Python function using the variables listed at the beginning as input parameters. However, modifying the code for a method |
seisman
added
discussions
Description of the desired feature
Discussion for a PyGMT logo has been brought up a few times already in meetings and the forum post at https://forum.generic-mapping-tools.org/t/design-for-pygmt-logo/1346. I think it's time for the PyGMT project to have a proper logo in place by the end of the year (for v0.5.0), ideally before the AGU 2021 conference (#1395) in December so we can give out stickers 😁
Logo Design Requirements
As pointed out by Leo at https://forum.generic-mapping-tools.org/t/design-for-pygmt-logo/1346/2, the logo should ideally:
Are you willing to help implement and maintain this feature? Yes, this will be a fun and not very code-heavy project for the ESWN workshop running from 17-19 Aug
The text was updated successfully, but these errors were encountered: