Star professional: Photoshop

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKaGe6hgT01RVW6tyOv77YglKVjoBf9ww9E7eX8fDNVNtGjpyMZWspd6zO1AOPISAphO972Uz2AS-5qwHW0uuipr4dnYocVMTltpFKHa7CqkLE0oSED9OQuOIAt3z-S7o652-Z7fOeCk/s1600/psd-svg.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKaGe6hgT01RVW6tyOv77YglKVjoBf9ww9E7eX8fDNVNtGjpyMZWspd6zO1AOPISAphO972Uz2AS-5qwHW0uuipr4dnYocVMTltpFKHa7CqkLE0oSED9OQuOIAt3z-S7o652-Z7fOeCk/s1600/psd-svg.jpg" /></a></div>
 
With the advent of high-definition screens, web designers now have to make sure that the images they use are optimized for HD. Skipping this process may render websites blurry or pixelated, leaving a not so good impression on visitors. One of the best ways to deal with HD screens is to use Vector Graphic whenever possible. 
 
Vector Graphic is scaleable at any size, so it will look great on an HD screen. In this post, we would like to share a quick tip on how to convert your Photoshop Text into SVG. If you have, for example, a text-based logo in your design, you’ll probably find this tip very useful. 
 
Photoshop Stage 
For this example, we will use a simple text-based logo created using the <a href="http://www.fontsquirrel.com/fonts/pacifico" target="_blank">Pacifico</a> font family (screenshot). 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XiKVOpQ18cYQcSnzsx8brQuUaMGx8_7yMcIbl2cGZjhmbOBcpoyR2QFqdmtt8yF8K5IFKI_ZQW3bJKhDYCTTkg-fYCsTMv_IXV0NDxfjnNKupuWCMcWeMtAMDGT9kSO7zlRkUU3AXb8/s1600/logo-example.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XiKVOpQ18cYQcSnzsx8brQuUaMGx8_7yMcIbl2cGZjhmbOBcpoyR2QFqdmtt8yF8K5IFKI_ZQW3bJKhDYCTTkg-fYCsTMv_IXV0NDxfjnNKupuWCMcWeMtAMDGT9kSO7zlRkUU3AXb8/s1600/logo-example.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
 
 
On the the Layers tab in Photoshop, right-click on the text layer and select Convert to Shape (screenshot). 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxxOJItJOJvB-V1QZv8SKk__iooWQy1et1ilBHr56Fza_iQjgRK4_VPpOTMUXeWD0-vIwhFwWL-O9lvRh-LNoTRMHB3FC-AEa8hqHLqFpfgWrxB6m6m_9kujGydHVWO4Dn9bTLjFMK8Yo/s1600/convert-to-shape.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxxOJItJOJvB-V1QZv8SKk__iooWQy1et1ilBHr56Fza_iQjgRK4_VPpOTMUXeWD0-vIwhFwWL-O9lvRh-LNoTRMHB3FC-AEa8hqHLqFpfgWrxB6m6m_9kujGydHVWO4Dn9bTLjFMK8Yo/s1600/convert-to-shape.jpg" /></a></div>
 
Then, save the file in Photoshop EPS format. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtrec-fsMFtozO0YV0TlrEX8Kcss2KRVBievDe9OR6Mp_2asMyN4xcceItT336aw4rg1Amr28dZHWumlqconl_kbnt6XTAEnqFXCdv5NSgtytSqG99DXc4J8E_Zc-ULxdpdamE9RKvTDY/s1600/save-eps.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtrec-fsMFtozO0YV0TlrEX8Kcss2KRVBievDe9OR6Mp_2asMyN4xcceItT336aw4rg1Amr28dZHWumlqconl_kbnt6XTAEnqFXCdv5NSgtytSqG99DXc4J8E_Zc-ULxdpdamE9RKvTDY/s1600/save-eps.jpg" /></a></div>
 
Illustrator Stage 
Open the EPS file in Adobe Illustrator. You should see that the text is now a <a href="http://www.vectorstock.com/" target="_blank">vector</a> object. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKYgiLil3iocS7HD1MgoJ1Xo91NZlANB8eYBpNwm2dZewGa61E4Ge3m2whQCd7WKpNElZIxnR_RuJqe3cB3gUOOxXd_3DmvYZ_DdqjbMq4BWjhNFHQ-q4s_9uJmCZfkIJ2DvRyOmh3e0/s1600/vector-obj.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKYgiLil3iocS7HD1MgoJ1Xo91NZlANB8eYBpNwm2dZewGa61E4Ge3m2whQCd7WKpNElZIxnR_RuJqe3cB3gUOOxXd_3DmvYZ_DdqjbMq4BWjhNFHQ-q4s_9uJmCZfkIJ2DvRyOmh3e0/s1600/vector-obj.jpg" /></a></div>
 
In this stage, you can make a few adjustments such as removing unnecessary layers, changing the background colors, or resizing. To resize the document in Illustrator, just go to File > Document Setup and select Edit Artboards. 
 
You can use your mouse to resize the Artboard, or specify the size more accurately by filling in the Width (W) and the Height (H). 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrs6UlvhlpWLAEok6FQw9ryWilRIoZ-a6QlcBlbw5A8cNgLvURlApwZCc6Bb_9WTmEVlYnuZz9_RKWkqs1VzrLl7izwaR7aPjWTsu4rWiratIlVX0ADOUtd9dKtGiIDZA8mEH7tpg8wpA/s1600/resize-artboard.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrs6UlvhlpWLAEok6FQw9ryWilRIoZ-a6QlcBlbw5A8cNgLvURlApwZCc6Bb_9WTmEVlYnuZz9_RKWkqs1VzrLl7izwaR7aPjWTsu4rWiratIlVX0ADOUtd9dKtGiIDZA8mEH7tpg8wpA/s1600/resize-artboard.jpg" /></a></div>
 
 
Next, save the file in SVG format, which is the default option. And that’s it. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPEQHdNI1frh39FYqICxNLy-MpTFnrdQmdlbb7Im9Bd2jxqGl0lTKJQkjhM-nkuhidh7uS5AnljPNz8w-heGlUeryH06o7GNIH134ITMMAJdEoID970emT4-TzJYceDl-YtUCp8iC4jxY/s1600/save-svg.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPEQHdNI1frh39FYqICxNLy-MpTFnrdQmdlbb7Im9Bd2jxqGl0lTKJQkjhM-nkuhidh7uS5AnljPNz8w-heGlUeryH06o7GNIH134ITMMAJdEoID970emT4-TzJYceDl-YtUCp8iC4jxY/s1600/save-svg.jpg" /></a></div>
 
Conclusion 
The act of converting the font into Shape is to ensure compatibility across multiple computers – when you are working remotely, different fonts installed on different systems may cause the "Font missing" error. This may also happens with different versions of Adobe Illustrator or Photoshop. Turning text to SVG will help minimize or eliminate issues to do with compatibility.

How To Convert Photoshop Text Into SVG [Quicktip]

With the advent of high-definition screens, web designers now have to make sure that the images they use are optimized for HD. Skipping t...

+ Read more »

How To Convert Photoshop Text Into SVG [Quicktip]

Follow Me on Facebook

Follow Me on Google +