A visual journal to improvement - Week 2

More work with the Wacom.

A visual journal to improvement - Week 1

Working on control with the Wacom tablet.

My circles seem to be naturally wide and my vertical lines need work.

If you are like many designers out there, when designing a website, you most likely build the layout using Adobe Photoshop, slice up the necessary imagery, and then save the images as individual files. This process can be broken down to five basic steps.

1. Make a selection in Photoshop.
2. Copy said selection to the clipboard.
3. Create a new file based on the size of the copied data.
4. Save the new file for web.
5. Close the new file.

These steps are likely repeated hundreds of times during a typical site build out. To save time and fingers, I'm going to take the five steps noted above and turn them into an action that can be ran with a single keystroke. Most of you are probably familiar with actions, but there is a bug you need to look out for if using Photoshop CS3.

Steps in a perfect world - For Non CS3 versions of Photoshop.

1. Create a new document in Photoshop (CTRL + N).
2. Double Click the Background Layer in the Layers Panel and Click OK in the New Layer dialog box to convert the Background Layer to Layer 0.
   Note: This must be done for your Copy Merged Layers to register in the action.
3. Select the entire document (CTRL + A).
   Note: The selection size does not matter as it will not be part of the action.
4. Click the Create New Action icon at the bottom of the Actions Panel.
   1. Give your action an appropriate name.
   2. Choose a Function Key of your liking that will run this new action.
   3. Click the Record button.
5. Copy the selected area. (CTRL + SHIFT + C)
6. Create a new document. (CTRL + N)
   Accept the default settings in the New document dialog box.
7. Paste the copied contents into the newly created document.
8. Save the new document for web. (CTRL + SHIFT + ALT + S)
   Accept the default settings in the Save For Web & Devices dialog box.
9. Close the newly created document without saving.
10. Click the Stop Playing/Recording icon at the bottom of the Actions Panel.

Completed Actions with Export Dialog Active

Congratulations! You now have an action you can run by pressing the Function Key you chose in step 4-2.

Before rolling this new action into your production process, there are a few tweaks you should consider.

First, you'll most likely want to change the settings in the Save for Web & Devices dialog bog for each file specifically. As it stands, the action simply bypasses this dialog box. To prevent this behavoir, simly click the empty square (Toggle dialog on/off) to the right of the check mark for the Export entry in the Actions panel.

Second, If you are using Photoshop CS3 like myself, then you'll need to alter the above action considerably due to a bug in this specific version of Photoshop. You can read all about this bug on Steven Sacks blog, but more importanlty you should download the copymerged.zip file from the bottom of his blog post. We are going to use this file in our Action to address the Photoshop CS3 bug.

Steps in the real world...(Photoshop CS3)

Completed Actions for CS3 with Export Dialog Active

1. Download and unzip the copymerged.zip file.
   Copy the copymerged.jsx file to a permanent location on your computer.
   I placed my copy in the root directory for Photoshop.
2. Delete the Action we created in the previous ten steps.
3. Create a new document in Photoshop (CTRL + N).
4. Double Click the Background Layer in the Layers Panel and Click OK in the New Layer dialog box to convert the Background Layer to Layer 0.
   Note: This must be done for your Copy Merged Layers to register in the action.
5. Select the entire document (CTRL + A).
   Note: The selection size does not matter as it will not be part of the action.
6. Click the Create New Action icon at the bottom of the Actions Panel.
   1. Give your action an appropriate name.
   2. Choose a Function Key of your liking that will run this new action.
   3. Click the Record button.
7. Load the copymerged.jsx script file you downloaded in Step 1 via
   File -> Scripts -> Browse... (Navigate to the copymerged.jsx script file)
   A new document will be created for you by deafult containing the copied contents.
8. Save the new document for web. (CTRL + SHIFT + ALT + S)
   Accept the default settings in the Save For Web & Devices dialog box.
9. Close the newly created document without saving.
10. Click the Stop Playing/Recording icon at the bottom of the Actions Panel.

Congratulations! You now have an action that works properly in CS3!

Hope this saves you some time and finger strain in the future.

Cheers!

Legacy of Letters from Luca Barcellona on Vimeo.

Amazing demonstration...  Originally viewed at  Drawn!

Thought I would put up a poster I did for an office party a couple of years ago.

Happy Halloween everyone!

If you're an HTML purist and would like the DotNetNuke Rad Editor to use paragraph tags instead of the default break tag every time you hit the Enter key on your keyboard then following these simple steps:

1. Download the ConfigDefault.xml file from the following location: /Providers/HtmlEditorProviders/Telerik/Config
2. Find the following line of code
   

       <property name="NewLineBr">true</property>    

   and change it to read

       <property name="NewLineBr">false</property>    

3. Congratulations! That's it! Any module that uses the Telerik Rad Editor will now use paragraph tags instead of break tags.

If you've used DotNetNuke for any length of time, I'm sure you've discovered the quick edit pencil icon and the Modules Action drop down menu as ways to edit your content. I'm also sure that you've noticed these two features "fight" for the same space on the page, which can become somewhat annoying.

There are two different paths you can take to adjust this overlap issue.

Method 1: Remove the ability to use the quick edit pencil icons.

1. Navigate to Admin - Site Settings - Advanced Settings - Usability Settings
2. Uncheck the box labeled "Inline Editor Enabled?"
3. Click Update.
4. Congratulations, the pencil icons will no longer be displayed on your site.

Method 2: Adjust the CSS for the quick edit pencil icon.

1. Using your favorite FTP program, download the portal.css file located in the following folder:
   /Portals/{Specific Portal}/portal.css
2. Add the following CSS code to your portal.css file.
   

   .eipbackimg
   {
       margin-left:15px;
   }
   

3. Save and upload the file back to its original location.
4. Congratulations, the pencil icons will now display 15 pixels to the right of Modules Action drop down arrow.

Hopefully this helps you and/or your clients as you work with your various instances of DotNetNuke on a daily basis.

Cheers

I've been wanting to come up with a new design for my personal website for some time now.  After two different iterations of "typical" website layouts, I decided to switch gears and come up with a single page blog design.  I work with DotNetNuke on a daily basis, so my framework choice was a no brainer.  I also have an interest in art and photography, so I wanted the layout to express those passions as well.  

The site is a work in progress and will continually change both in content and look and feel.  Hopefully there will be much more to come in the following months.

Home brewing is something I've wanted to try for a very long time.  After much thought, research, and planning, I finally decided to step out of the "wanting" and into the "doing".  This series of posts will follow my first attempt at brewing beer at home.  We'll cover:

1. Preparation & Purchasing.
   What you need and need to know to brew your first batch of beer.
   
   
2. Brew Day.
   From sanitizing to fermenting in a single bound.
   
   
3. Transfer Day.
   Transferring the beer from the primary fermentor to the secondary fermentor.
   
   
4. Bottling Day.
   Putting some elbow grease in your beer.
   
   
5. Tasting Day.
   Best day ever!

To anyone who has a slight interest in brewing beer at home, I highly recommend you get out of the "wanting" and into the "doing".  After having gone through the entire process, I can honestly say that it's not nearly as daunting as it may at first seem!


Cheers