How to generate keyboard key graphics?
I'm trying to figure out how to create keyboard key graphics for a tutorial rather than using text, like in the attached image. How can I do this? Thanks!
Question marked as
Additional to the other suggestions here, you might consider searching for a vector Apple individual keys clipart source. The individual keys should be on a transparent background. This clipart most always has some cost associated with it, but can look very professional too.
If you attempt screen captures of keyboard layouts, you will have low resolution images that should have post-processing performed to remove background, or shadow artifacts from around the key image.
Or a styled HTML approach. There are better examples of button styling available, but this was handy:
and was generated in Safari 13.0.5, or Firefox 73.0.1 with the following HTML code where the Apple symbols were introduced from the character palette's Technical Symbols category.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
padding:20px;
height:100%;
font: 20px Helvetica, serif;
color: #555;
}
.keyshape {
/*Box Properties*/
display:inline-block;
width:48px;
height:48px;
margin: 0px 4px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
/*Text Properties*/
font: 18px/48px Helvetica, serif ;
text-transform: uppercase;
text-align: center;
color: #666;
}
</style>
</head>
<body>
<p>Use this command: <span class="keyshape">⌘</span> + <span class="keyshape">T</span>
</p>
<p>Or these: <span class="keyshape">⌥</span> + <span class="keyshape">⌘</span> + <span class="keyshape">I</span>
</p>
</body>
</html>
One enters their two or three key combination characters, saves the HTML (.html) file, and double-clicks it in the Finder to open it in a browser. Then screen capture the key sequence and copy/paste into your document.
