Wednesday, February 19, 2014

TIP #44 - When copy and pasting text from Photoshop for HTML... Beware!

If you have ever copy and pasted text from Photoshop for use in a website or EDM, you need to be aware of a potential problem.

Dreamweaver or WYSIWYG editors are not going to show up this problem either, you'll need to use a code editor such as Sublime Text.

Pasting the copy into Sublime Text you may see an "EXT" character if a soft return has been used in a Photoshop text element. (SHIFT and ENTER). Hard returns will paste correctly as a <br />.



The reason this is an issue is that it will cause the space to close up when rendered in a browser or email client. So instead of a space or a new line, you will see no space or return!

Pasting this copy into a text editor like note pad would normally save you from unwanted code from Microsoft Word... but not from this sucker!

There are also other characters that can throw HTML rendering related to languages.

So my tip for any designers who are starting to code more HTML, while Dreamweaver gives you the visual display, it's editing is not the best. Move to something more powerful and don't rely on the visual cues. This will speed up your coding skills as well!

More on Sublime Text and other editors later...

Sunday, February 9, 2014

MAC TIP #17: How to move program toolbars to the top of a second monitor

OK, so if you use a laptop and plugin a second monitor as your main monitor, what you really want is the program toolbars (or menu bar) at the top of the larger montior, not on the laptop monitor.

So how do you do that?

Simple... just go into "System Preferences" and select "Displays".


OR, if you have "Show displays in menu bar" already turned on, you can access this option from the top tool bar and go to "Display Preferences". (Highly recommended).



 Once in "Displays" menu, now select the "Arrangement" tab.


This is where you set whether your monitor is on the left or right of laptop and if it's higher or lower. But you can also move the menu bar. Simply drag the white menu bar to the larger second monitor. (cursor added)



The monitor screens will then refresh and then you will note all program tool bars now on your larger monitor! Browser, Photoshop etc.

Happy days.  :-)