blogspot template modification - shoezznutzz

http://shoeznutz.blogspot.com/

I indulged my love of weird shoes in order to make another template modification. ;-)

There isn't too much to tell with this one except that I like the menu on the bottom and worked quite a bit on getting that to sit right. The header text was created in photoshop, using layer styles. Although I am usually somewhat careful when it comes to colored typography, in this case it seemed to be a good choice since the site background and the design are both toned down enough for colored text to make a good contrast.

Something which has really added to the design here is the post recommendations widget which I was posting about a few days ago. And another thing which I put in here is a custom cursor, which I got from the free cursor site, which I posted about before here.

This one too started out from the picture window template, in this case the first one on the left. I just wanted to try something very simple and minimal to show the images. So, I changed the radius values and the background image URL's from the HTML editor, played around with fonts, type sizes, colors etc and that was pretty much it, outside of adding a border to the images. For which again, I used the CSS box on the Advanced Template Designer to put in this bit of code:

.post-body img {
padding: 12px;
background-color: #151515;
border: 1px solid $(image.border.color;
}

Download template and header visuals from here >>>

.................................................................................................................................

blogspot template modification - istanbul catz and dogs

http://istanbulcatz.blogspot.com/

A Flickr contact of mine named István Tóth takes the most wonderful Istanbul cat and dog photos. With his consent, I have now started a blog for them. Partly to provide tutorial material for the easy peasy page, but mainly because it is so much fun to do it! (great content = easy design, remember? ;-)

For this one I used the picture window template, the one in the middle with the red header. What I was looking for was something like the rounded rectangle background that goes underneath everything, including the header. Nice unification of design elements, that. The radiuses of the rectangle's corners were smaller than what I have here, so I looked for the word "radius" inside the HTML code and changed the values. Also, I replaced all of the background png files with my own stuff by doing a ctrl+F in the HTML editor for "png". Then as usual, I went to the Advanced Template Designer and changed the fonts, colors, etc from there.

Another thing which I used here is the code which Furkan found on Southern Speakers a few days ago, which allows you to have separate boxes for things you post on the same day.

There is one thing with this blog, which is that it is bi-lingual. Which means that in the posts I would like to somehow distinguish between Turkish and English. So, the English stuff gets some added code inside the HTML tab of the post editor. Nothing major - only one small line:

<span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 17px; line-height: 1.8em;">english text</span>

The widgets got a custom treatment: They got a special shape, became wider, got a background color, etc. All of which I did from the CSS tab on the Advanced section of the Template Designer. And here is the code which I used for that, which you will need to apply to all the new widgets that you create:

#Gadget ID{
margin-top:20px;
margin-right:-15px;
margin-left:-5px;
padding: 15px;
background:#222222;
font-family:Arial;
font-style: normal;
font-size:13px;
text-align:left;
color: #888888;
border-radius: 20px;
}

I also added a border to the post images, again with the same CSS tab. And the code for that is this one, obviously you can change padding and color values as needed:

.post-body img {
  padding: 6px;
  background-color: #975858;
  border: 1px solid $(image.border.color;

There is a custom cursor on this as well. Those who would rather not have this will need to go into the code and remove the line which says
<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-7/cur671.cur), progress;}</style> 
and which comes just before
<b:skin><![CDATA[/*

And finally the header - where I tried something new: I placed the cat image (which is actually a part of the header) on the upper right hand corner in such a way that the header takes a curve around the post column. This was positioned as a separate image gadget, whose location I played around with using the CSS tab on the advanced designer. You can use your own image to replace what I have on the site. Create an image with a transparent background, save as a 24 bit png file and upload into the picture gadget.

The code for the placement of this is below, and please note how the margin values are huge big negative ones. This allows me to position the transparent png image above the header text, as well as the post, as a layer. Great! And I will certainly be experimenting with this feature a whole lot more:

#Image1{
margin-top:-100px;
margin-left:-44px;
}

And as for the header text, this was made with a layer style, however turned out to be way too strong in terms of color in the end. So, after I was sure of where everything was supposed to go, I merged the layers and colorized/desaturated the whole thing with the HSL palette and then saved this as a 24 bit PNG file with transparency.

Download template and photoshop file for the header here >>>

.................................................................................................................................

blogspot stuff: this (too) is "awesome inc"

I seem to notice in class that you are not really pushing the limits of the templates as much as you should. These templates are a fabulous start out point, however left in their default state they will hardly be adequate to suit any sort of ambitious design criteria. They are not even meant to do so - they are meant to be modified! And, as far as I can see, very few of you are modifying them to the extent where they will really suit your needs.

So, I have decided to do a few examples for you. Here is the first one: My visual communication history blog was long overdue for an overhaul, so it will be a good one to work on for this.

As visual material I have modified an earlier photoshop file, so nothing new there. I did make some new header typography for it, however. Which I may still change, not entirely happy with it yet... 

The template that I have used is one of the subcategories of awesome inc, and as a matter of fact it is that particularly nasty looking pink one with the white band underneath the header. So, yes, it did take quite a bit of work to get this to look the way that I wanted it to look.

What I did want out of this was a semi transparent background for the widget area. To get rid of all the white stuff I went into the code and replaced the image file which they had used with my own image file, a tiny 16 x 16 pixel semi transparent dark gray 24 bit png file, which I had previously uploaded to Picasa.  (Tip:  just do a ctrl+F for "http" and you will find all of it, since it is one linked image which has been used several times. And after that it is just a matter of replacing it with yours  ).

Next thing was adjusting all of the line heights. Which meant pasting this code into the CSS box all the way on the bottom on the advanced tab of the template editor. This is a really great thing (almost as good as the split window in Dreamweaver), since you can see the changes take effect as you are tweaking. The parameters you need to play with are highlighted in black:

#PopularPosts1 li{
line-height: 140%;
}
.post-body {
line-height: 1.7;
}
li{
line-height: 140%;
}

And then finally, all the other colors, etc, were fixed in the advanced editor as well. And, now I have a brand new look on my blog! See it in action here:
http://visualcommunicationhistory.blogspot.com/

You can also download the template from here >>>

.................................................................................................................................

playing around with free vectors and photoshop layer modes

The original vector file is here >>>
And here's what happened to it:

Read all about it (and also see other versions) here >>>

Download the photoshop file from here >>>

.................................................................................................................................

design: using photoshop plugins for website backgrounds and effects

geek.folk goes elegant ;-). This is to show you how to use photoshop plugins and filters to achieve effects on your background and header.

I didn't change much from the previous layout and even the glass buttons are still here, except that I applied a dark layer style to them this time.

On the background I used a plugin named Sinedots II, freely downloadable, courtesy of a very generous gentleman named Philipp Spoeth, who has been making this wonder available (PC only - ouch!) right here >>> for a very long time. Just place it in your plugins folder and the rest is fairly self-explanatory, although there are a few tutorials on it available on the download page as well. In this case I just applied the plugin onto the full canvas and then used a layer mask to delete the top and the bottom. Moved it up to where I wanted it to be, and that was that. In any case, this is such a beautiful filter that it would be kind of hard to go wrong with it no matter how you use it...

On the header, where I switched the font to Bauer Bodoni this time, I used the standard photoshop lens flare filter which is under Filters > Render. Now, here is the trick with that: It is actually quite difficult to get this to sit exactly where you want it to sit. What I do is, I create two layers in the same color, and then put the lens flare dead center in the middle of the top layer. Apply a gradient on a layer mask from all 4 sides  (Tip:  make sure you have the gradient colors going from solid black to transparent white, otherwise you will keep painting over what you are doing  )  then move, rotate, resize the flare to exactly where you would like it to be - which in my case is behind the header text so that I get a nice highlight there to offset the dark typography.

(Note: If I were to actually make such a site, I would place the flare on the background, together with the sinedots effect, so that the content slides over it as the viewer scrolls downward).

And you can see everything that I did in the photoshop file which you can download from here >>>.

.................................................................................................................................

playing around with photoshop layer styles

I downloaded the styles mostly from 22 pixels, however I may have looked elsewhere too. Just pull in a whole bunch and put them in the styles folder under photoshop presets. Then click on the little right arrow at the top of the styles palette in photoshop to load them. And my advice is to leave their values more or less as they are. It is quite easy to lose the effect altogether if you start tweaking them too much. I used the vector shape tool and I also installed a few dingbat fonts since layer styles seem to work especially nicely with shapes. (The two circle arrows on the right are in fact dingbats).

Only other thing I did was that I added a little divider line between the menu items. A tiny little vertical 1 pixel grey stroke and then gave that a motion blur at 90 degrees exactly, so that it faded out at both ends.

And the photoshop file, where you can also see how I aligned the stuff, is here:

http://www.citrinitas.com/easy-peasy/easy-peasy_gf_4headers.zip

.................................................................................................................................

easy peasy downloads

Wandering around the internet, gathering learning material for my students, I am touched by the amount of resources people make available to others. So, in my modest way, I would like to contribute as well - especially given the fact that I am making such a big point of using the resources and material of others as part of a web learning strategy:

Whenever I make a full photoshop file (or anything else that is remotely usable) for my own class I will be giving a download link to it as well. The very first one is in the previous post and they will all be collected under a new label called "downloads". My students will have the good sense to not to use the content "as is" for their course work, since I will obviously be able to recognize my own handiwork quite easily. Others who come to this site - please feel free to use as you see fit. A linkback would be very nice of course, but I will not be insisting upon it...

:-)

.................................................................................................................................

being "resource-ful": site layout with ready made visual components

Read all about it here ;-)

Get the photoshop file here:
http://www.citrinitas.com/easy-peasy/geek-folk.zip

.................................................................................................................................