{"id":3647,"date":"2016-07-19T19:55:27","date_gmt":"2016-07-19T23:55:27","guid":{"rendered":"http:\/\/blog.tlsrv.net\/how-to-custom-icons\/"},"modified":"2022-12-01T07:50:50","modified_gmt":"2022-12-01T11:50:50","slug":"how-to-custom-icons","status":"publish","type":"post","link":"https:\/\/www.thinglink.com\/blog\/how-to-custom-icons\/","title":{"rendered":"How To: Create &#038; Use Custom Icons"},"content":{"rendered":"<hr>\n<p>With Summer upon us it&#8217;s the perfect time to sharpen our ThingLink skills. One little known way to enhance your interactive images is with custom icons. Custom icons tailor your images in a truly unique way, creating interactive content\u00a0that seamlessly integrates with your current branding and company stlye. \u00a0Read on to learn how to easily create icons with Powerpoint, upload icons to ThingLink, add\u00a0special effects to your icons, and some of our favorites from fellow users.\u00a0<\/p>\n<p><!--more--><\/p>\n<hr>\n<h2><strong>Create Your Own Icons<\/strong><\/h2>\n<p>While design pros can create their own icons in Photoshop or the design program of their choosing, there are tips and shortcuts for those of us who are not so experienced in digital design. Try using PowerPoint to create a basic icon. With PowerPoint shapes and merging options you can create any number of custom icons. Here, I\u2019m creating a Pisces icon.<\/p>\n<p>First use the shapes selector to choose all the shapes you\u2019ll need to create your design. Then use the green dot to rotate the shapes as necessary. Next use the blue squares or dots on the edges of the shape to resize as necessary.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.thinglink.com\/card\/809178239107858432\" width=\"800\" height=\"235\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div>\u00a0<\/div>\n<div>\n<p>Use the flip tool to change the orientation of any of your images and adjust line weight to change the thickness of lines. When the shapes are ready, place them in the proper arrangement, and use the Group tool to combine them into one object.\u00a0<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.thinglink.com\/card\/809179432429289472\" width=\"800\" height=\"214\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<div>\u00a0<\/div>\n<div>\n<p>Finally, adjust the color of your icon to whatever you\u2019d like. To get your new icon out of PowerPoint and into ThingLink, right click and select Save as Picture > PNG. This will save your new image as a PNG file with a transparent background.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.thinglink.com\/card\/809181138479218688\" width=\"800\" height=\"330\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<div>\u00a0<\/div>\n<div>Creating multiple versions of your new icon is easy. In Powerpoint, select your icon, right click and copy it. Paste to create your new version. Tweak your icon using the previous tools to change it in some way. Here I&#8217;m changing the color to purple.\u00a0<\/div>\n<div>\u00a0<\/div>\n<p><iframe loading=\"lazy\" src=\"\/\/www.thinglink.com\/card\/812114949143789570\" width=\"700\" height=\"259\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div>\n<h2><strong>Resizing Icon Images<\/strong><\/h2>\n<p>If you\u2019ve created an icon image, or if you already have an image you\u2019d like to use as an icon, you may need to resize that image to fit in the ThingLink upload guidelines. We suggest creating icons that are 36 x 36 pixels with maximum size of 140 x 64 pixels. On an Apple computer open the image in Preview. In the tools menu select adjust size and there you can adjust the pixel size to appropriate dimensions. On a PC right click your image and click edit to open in Paint. In the main toolbar, click resize image. (MS Paint image via <a href=\"http:\/\/scottiestech.info\/2015\/04\/30\/how-to-easily-resize-and-crop-a-single-image-in-windows\/\">Scottie&#8217;sTech.info<\/a>)<\/p>\n<p><strong><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/cdn2.hubspot.net\/hubfs\/603436\/Screen_Shot_2016-07-11_at_10.32.30_AM.png\" alt=\"\" title=\"Screen_Shot_2016-07-11_at_10.32.30_AM.png\" width=\"570\" height=\"483\" style=\"margin: 0px 10px 10px 0px; float: left;\"><\/span><\/strong><\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<strong><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/cdn2.hubspot.net\/hubfs\/603436\/resize_open-540x403.jpg\" alt=\"\" title=\"resize_open-540x403.jpg\" width=\"540\" height=\"403\" data-constrained=\"true\"><\/span><\/strong><\/p>\n<h2>\u00a0<\/h2>\n<h2><strong>Upload Custom Icons<\/strong><\/h2>\n<p>Now that you have custom icons created and properly sized, it\u2019s time to upload them to ThingLink. Select the upper right menu and choose the settings gear icon. In settings, select the Tag Icons tab. Here you can find all the custom icons that have already been uploaded to your account as well as add new ones. Click Upload Icon Set to add new icons. Here you can select the icon image and upload it. You\u2019ll notice that there are three options here. The first is for your default icon. This is the standard that will show. Next is the hover state. This is the version of the icon that shows when it the pointer hovers over it. Try adding a different color or message here to further enhane the interactivity &#8211; the creative possibilities are endless.\u00a0<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.thinglink.com\/card\/809184264271691776\" width=\"800\" height=\"413\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<div>\u00a0<\/div>\n<h2><strong>Highlight Icon<\/strong><\/h2>\n<p>The last icon option you\u2019ll see is highlight. This can be used to add a glowing effect behind your icon. Add a semi-transparent, white icon image here to make your icon glow.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/cdn2.hubspot.net\/hubfs\/603436\/tXvgPS.gif\" alt=\"tXvgPS.gif\"><\/p>\n<h2><span style=\"font-weight: 400;\"><strong>GIFs<\/strong><\/span><\/h2>\n<p>Animate your custom icons by uploading GIFs. Read more about adding GIFs in our <a href=\"http:\/\/blog.thinglink.com\/marketing\/how-to-use-gifs-in-thinglink-images\">previous post on the subject<\/a>.\u00a0<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.thinglink.com\/card\/626958459379646464\" width=\"800\" height=\"336\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>\u00a0\u00a0<\/p>\n<h2><span style=\"font-weight: 400;\"><strong>Custom icons in action:\u00a0<\/strong><\/span><\/h2>\n<p><span style=\"font-weight: 400;\"><strong><span>Browse some of these three examples of\u00a0our favorite icons created by fellow ThingLink users,\u00a0<\/span><\/strong><\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"><strong><span><a href=\"http:\/\/www.msiworldwide.com\/2013\/07\/scaling-up-development-projects-aid-worldwide\/\" target=\"_blank\" rel=\"noopener\">MSI uses custom icons to give viewers visual action prompts. Hovering over the film icon yields a YouTube video, the book icon a Scribd PDF, and the microphone an audio clip from Soundcloud.\u00a0<\/a>\u00a0<\/span><\/strong><\/span><\/li>\n<li><a href=\"http:\/\/www.heveya.com\/products\/organic-latex-mattress\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\"><strong><span>Heveya matches the visual look and feel of their corporate website.<\/span><\/strong><\/span><\/a><\/li>\n<li><span style=\"font-weight: 400;\"><strong><span><a href=\"https:\/\/www.gotahoenorth.com\/touchlaketahoe\/\" target=\"_blank\" rel=\"noopener\">GoTahoeNorth uses custom icons to provide tourists the best places to eat, hike, shop and stay in the region.<\/a>\u00a0<\/span><\/strong><\/span><\/li>\n<\/ol>\n<p>\u00a0<\/p>\n<hr>\n<p style=\"text-align: center;\"><span style=\"font-size: 20px;\">Thanks for reading! Want to learn more about custom icons, or any other ThingLink features\/ Schedule a free demo with a ThingLink expert. \u00a0<\/span><\/p>\n<p style=\"text-align: center;\">\u00a0<\/p>\n<p style=\"text-align: center;\">{{cta(&#8216;f3903730-8051-4ca2-8c48-4716245ce78e&#8217;)}}<\/p>\n<p style=\"text-align: center;\">\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With Summer upon us it&#8217;s the perfect time to sharpen our ThingLink skills. One little known way to enhance your interactive images is with custom icons. Custom&#8230;<\/p>\n","protected":false},"author":6,"featured_media":3648,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","om_disable_all_campaigns":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[491],"tags":[177],"_links":{"self":[{"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/posts\/3647"}],"collection":[{"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/comments?post=3647"}],"version-history":[{"count":1,"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/posts\/3647\/revisions"}],"predecessor-version":[{"id":6615,"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/posts\/3647\/revisions\/6615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/media\/3648"}],"wp:attachment":[{"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/media?parent=3647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/categories?post=3647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thinglink.com\/blog\/wp-json\/wp\/v2\/tags?post=3647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}