SketchUp - Changing Dimensions

SketchUp is a nice free program from Google for 3D modeling. It is very intuitive, easy to use for the most of it, however there are still some not that obvious operations like, for example, changing dimensions of different shapes to exact value.

The fist what should be said is that SketchUp model is not driven by dimensions which are setup by "Dimension" tool - those dimensions are just text and arrow objects, so one can click the text and change it to any other text not even related to any dimension. Furthermore, in most cases you really do not want to modify them this way - such a change will kill the possibility of the dimension value to track the true size.

The unpleasant thing about changing dimensions is that it should be done different way for different shapes:

1. For a line segment - right click on it and choose "Entity Info"
   
   Type a new value in the "Length" field, hit "Enter" and that will make the change.


2. For 2D shapes - select a 2D face with "Scale" tool
   
   then select a green box which corresponds to the dimension you are intending to change
   
   
   The "Red Scale" field ("red" indicates that the scaling is along the red coordinate axis) in the right bottom corner of the SketchUp window by default is in scale mode. Just type a new exact dimension with a unit (1m in this example)
   
   
   and press "Enter" - the dimension will change and the value will follow.
   
   
3. For 3D shapes (mostly the same as for 2D case) - with "Select" tool select a whole shape
   
   switch to "Scale" tool
   
   and select a green box corresponding to the dimension you're going to change.
   
   
   Type a new exact dimension with a unit (1m in this example)
   
   
   and press "Enter" - the dimension will get changed.

For more complicated shapes it is easier to create a reference at required position and then modify the shape with "Move", Push/Pull", "Scale" or other tools to align with the reference. A simple line segment, a guide line or a guide point (created with "Tape Measure" or "Protractor") can serve as such a reference.
Read more...

Picasa - Managing Blogger Pictures

Managing images in Blogger environment seems not convenient at all. It is possible to upload a picture directly to a post, scale and position it, but the sad part comes when you delete an image from the blog - because it is not really deleted from its storage. Trying to find better pictures for a post occasionally makes one upload some different variants of the same picture and all those raw variants are going to stay stored, taking valuable place which is 1GB max for free. The good part is that the default storage for Blogger images is actually Picasa.

One who has a Blogger account already has a Picasa account - you can login to it from Picasaweb with your Google user name and password as usual and there is no need to install Picasa on the home computer. For Blogger images Picasa has corresponding albums created - named the same as the blog, marked with the Blogger and Unlisted icons.

1. The first inconvenience for image managing is that all of them are stored in the same blog album as bulk;
2. The second is that addresses (URL) assigned by Blogger to the images directly uploaded to a post are different from their addresses you can see in Picasa.

So the best approach I can see to manage images for Blogger would be:

1. to upload them directly to Picasa, so they can be easily managed in the Picasa environment;
2. It's possible to assign tags to pictures in order to keep them organized, but I find it more convenient to group them in different albums (PostIcons, for instance, to keep all icons for post/topic types), not just in the default blog albums
3. as a consequence of mentioned above use only direct link from Picasa to put a picture into a post.

Since Picasa in this case is used as an ordinary image hosting any other image hosts can be considered for that purpose. However advantage of Picasa is that it is under the same Google's roof as Blogger itself and that's supposed to give it more reliability against others. Read more...

Blogger Template with Rounded Corners and Adjustable Column Width

While I liked the general style of the "Rounders 3" Blogger template, I really wanted some things to be modified:

1. to add the third vertical column to the left of the main post section;
2. the third column should be consolidated with the main post section in one visual block;
3. I'd like to keep rounded corners.

All those are definitely feasible, but adjusting column width in the original "Rounders 3" could become some headache.

In the "Rounders 3" rounded corners are defined with background pictures in two wrappers: one for two top corners and the other for two bottom ones.
In this case every adjustment in width of a column would require redrawing of the corner picture to follow the change.

A simple solution to make width easily adjustable would be to employ a 4-wrap structure each wrap with one of the corners.
For that 4 corner pictures need to be at a reachable web hosting.
I uploaded them to Picasaweb - anyway it is the default Blogger's storage for images.

Since I planned to use the corners for all of the blocks in the blog page the template styles should be updated with new classes of <div>

/* Round corners div wrappers --------------- */
div.wrap-1 {
float:$startSide;
background-image: url("http://lh5.ggpht.com/
_6uhqGhAnYS8/SoDG27WBpuI/AAAAAAAAAR8/
7W7XN9gbIKY/s800/RCorner_TopLeft.png");
background-repeat: no-repeat;
background-position: $startSide top;
padding:0;
}

div.wrap-2 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKOuKcJ3I/AAAAAAAAASI/
FO8GZlpdnGU/s800/RCorner_TopRight.png")
no-repeat $endSide top;
padding:8px 0 0;
}

div.wrap-3 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKXk4wLwI/AAAAAAAAASM/
vZCNY04HzOs/s800/RCorner_BottomLeft.png")
no-repeat $startSide bottom;
}

div.wrap-4 {
float:$startSide;
width:100%;
background:transparent url("http://lh6.ggpht.com/
_6uhqGhAnYS8/SoDKowtWYZI/AAAAAAAAASQ/
j8KRoSoiN9c/s800/RCorner_BottomRight.png")
no-repeat $endSide bottom;
}
/* Round corners div wrappers END ----------- */

HTML wrapping structure looks like this:

<div class='wrap-1' id='header-wrapper'>
<div class='wrap-2'>
<div class='wrap-3'>
<div class='wrap-4'>
<b:section class='header' id='header' maxwidgets='1'>
.......
</b:section>
</div>
</div>
</div>
</div>

Adding "width" attribute to the <b:skin> (CSS) section:

#header-wrapper {
width:$BlogWidth;
background-color:$titleBgColor;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding:0 0 0 0;
color:$titleTextColor;
}

and the corresponding variable at the top of the <b:skin> section:

<Variable name="BlogWidth" description="Total Blog Width"
type="automatic" default="920px" value="920px">

makes adjustment of the section width a snap.

It should be said that many people are interested in rounded corners techniques for web design. While my current goal was only to make width of a rounded corner block easily adjustable from a variable but my choice of rounded corners implementation was straight forward - there are many very interesting approaches allowing to create rounded corners with fancy graphic effects as 3D profiles, gradients, reflections, shadows, etc. Recently I bumped on an interesting post with a list of different techniques: "25 Rounded Corners Techniques with CSS" - check it out.
Read more...