4.02.2011

comic sans for everyone

http://www.google.com/landing/csfe/

Happy April's Fool Day  - from Google! Just about gave me a heart attack! :-D

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

creature house expression

This is probably the greatest vector drawing software that has ever been made. Basically Creature House Expression lets you draw smooth vectors (as intuitive as a real brush if you also have a tablet) which can become the most gorgeous water color strokes you could ever possibly wish for! It will also transform type and all sorts of other vector shapes (you can open Illustrator or EPS files), into painterly effects, which you can then export back out as a 24 bit PNG image with full transparency at whichever size you want.

It used to be freeware but then the rumor has always been that Microsoft bought it up and integrated it's key properties into their design suite Microsoft Expression (not to be sneezed at either by the way, excellent package in fact!) and took the free version off the shelf.

And then today I read somewhere that this wasn't so, and that a free download of Creature House Expression, for both PC and Mac, was still hidden away somewhere in the depths of the Microsoft Expression website. And sure enough, a bit of burrowing around and I found it:
http://www.microsoft.com/expression/expression-design/Default.aspx
Just downloaded it, installed it, and YAYY! It is a fully functional software!


Go go go! What on earth are you waiting for? Download now! Before they change their minds over there!

 Note:  I have quite a few additional creature house strokes and environment maps, which I downloaded back when the software was all over the place and people were developing freely downloadable stuff for it. I have put them all here:
http://www.citrinitas.com/easy-peasy/creaturehouse-stuff.zip
The strokes go to C: \ Documents and Settings \ All Users \ Application Data \ Creature House \ Expression 3 \ Strokes. And the environment maps go to the same location except Application Data \ Creature House \ Expression 3 \ Images \ EnvMaps on a PC. Where they all end up on a Mac, I have no idea.

You can also purchase a huge package of brushes for the software (very reasonably priced) from here:
http://www.graphicxtras.com/products/express.htm

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

4.01.2011

blogspot stuff: and if you want to edit the text attributes of your popular posts?

First off, you need to be aware that although they look like as if they are, these are not really made up of regular text fields; in fact the whole shebang is hypertext - in other words these are all links. Which Selim, sharp cookie extraordinaire that he is, figured out in a nano-second of course. So, as an example, if you want to change the line height, again scroll to the end of the widgets section inside the HTML editor, where again you need to find the line which says
/* Posts
----------------------------------------------- */
before which (while you are still in the widgets section) you paste:
#PopularPosts1 li{ 
line-height: 140%
}

And this will stop the text of your popular posts being all squished up in that horrible way. The value 140%, which is highlighted in black can of course be changed to whatever you wish it to be.

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

well done Ayhan!

Ayhan is working on a site on Aikido, about which he seems to be very knowledgeable. Not only is the site rich in content - even at such an early date - but it is also beautifully designed, well researched and very well written.

He does have one major design headache, which is that the background image, to which he has attached a resizing code goes underneath his gadget columns at smaller browser sizes. We have been discussing solutions for this and I am confident that he will come up with something good to fix the problem.

There are also posts on his design process which I especially like, however by rights they belong in a separate blog, his homework blog in other words, where he can talk about all of that, and maybe even at greater length. And he has promised to start one ASAP, so I am awaiting that one with excitement now. 

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

flickrslider, a very neat little app for slideshows and photo galleries

This comes to us from Fırat, who is scooting around in search of slideshows or photo galleries which he wants to embed into the amateur mobile photographers community portal that he is developing:



http://flickrslidr.com/

Uses your flickr sets to create slideshows. Very nice indeed, thank you Fırat! And keep 'em coming please! :-)

One small problem seems to be that you can only create a slideshow which has a square format. Anything narrow and the images slip to the bottom. The good news is that they give you the actual code which would make it possible to tweak this. As an example, along with being able to adjust the size, ideally I would also like this to loop rather than asking me every time if I want to replay it.

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

splitting up the header in blogspot

Today seems to be shaping up as a Fırat Gunal day here on easy peasy. While he is busily developing his own site he has been fabulous about finding some really useful stuff which we can share here as well: 

You may want to add a button or a search box onto the header of your website. In which case you need to split it. Here, as re-blogged from BloggerSentral, is how to do this:

Go to Dashboard > Design > Edit HTML. Make sure the Expand Widget Templates check box is un-checked. Look for the following lines in your HTML code:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>

Insert the following code right under (after) it:
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

So the final code should look like this:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it. You will now need to position the sections side by side, by floating the section containing the blog title to the left,  and the new section to the right. To achieve that, locate this line of code:
]]></b:skin>

Add the following CSS code right before (on top of) the line:
#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Now it is time to add the banner, search box, or whatever it is that you want to add. Go to Design > Page Elements and click the Add A Gadget link to add your widget. If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code, and change header and header-right widths and experiment with different values until you get it right. And you can see a screenshot of how this looks on Fırat's post.

 (Extra little tip from Fırat:  You can also do this by going to Design > Template Editor > Advanced > Add CSS where you will see the newly added code and also how the header looks on the page. Much easier to tweak values when you actually see what you are doing at the same time!  ;-) 

3.31.2011

aligning the top of your columns in blogspot

You may already have noticed that the top of the post column at blogspot stands a few pixels above the gadget columns, and if you are like me you are probably dying to fix that. Yesterday in class I was delighted to find out that our student Furkan is bothered by this as well, so this post is especially for him :-).

Funnily enough the blog section at blogspot is perceived as yet another widget by the code! Which Selim most ingeniously figured out - one smart cookie, that one! So, you actually need to go to the bottom of the widgets section of the CSS in the HTML editor, where you will see this line, which is the start of the next section:
* /Posts
----------------------------------------------- */

Then add this code directly above that line, while you are still inside the widgets section, that is:
#Blog1{
margin-top: 6px;
}

Then play with the pixel value highlighted in black until all the stuff is aligned. In the case of this page this was 6 pixels, could be less or more in yours, of course.

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

playing with blogspot widgets (gadgets)

As we have talked in the class last week, it is possible to separately edit every widget, give them different backgrounds, alignments, borders, colors, fonts etc. Here is how you do it:

The "widget id" is the only thing you need to edit the widget, but first you need to find it of course. To find the ID of the gadget you wish to modify, please read this previous post here.

Now go into the HTML editor, into the CSS part and find the section entitled "Widgets", then scroll down to the end of the section, just above the part where "Posts" section starts. In other words search for this line:
* /Posts
----------------------------------------------- */
And then all you have to do is; add the code given below straight above this line. The word Label1 in the topmost line, which is highlighted in black, is what you replace with the ID that you have found in the way described in the above linked post.

#Label1{
margin-top:20px
padding-left: 5px;
background:#ddddd;
font-family:arial, sans-serif;
font-size:11px;
text-align:left;
color: #db4c46;
};

The styles I have used are just for example, you can use as many or as few as you wish.

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

backgrounds: one size fits all

Here is what to do if you want to have a background image that will automatically re-size itself according to the browser windows size (thus also for different screen resolutions).

First off be sure to get a nice large image around 16:9 ratio size having preferably 1900 px width, reduce its size (not in pixels, as in kbs) so it is not larger than 300-450 kbs(even this is too large but it will do).

Then upload it to someplace where you can have a direct link to it.

Finally go into "Edit HTML" from the design tab. Find "body {" in the css section. (just searching that quote without the quotes will get you there if you can't see it). It will most likely look something like this:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

Now, replace this part;
background: $(body.background);
with this;
background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

You should have something like this as the final result;
body {
  font: $(body.font);
  color: $(body.text.color);
  background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This will work in most of the latest versions of known browsers.

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

3.30.2011

splashup - another great online image editor


Beautiful dark, elegant interface. Makes one feel good just to look at it. You can edit and save images from and to various online domains, including Flickr and Facebook, as well as from and to your own hard drive, of course. And it seems to have quite a few of the necessary bells and whistles - such as layers, layer effects, filters and so forth...

Check it out here: http://www.splashup.com/

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

3.29.2011

design tutorial: clean body text in your posts

I have made some deliberately unaligned body text and taken several snapshots which I combined for a tutorial. Looks really ugly folks! :-P:


To get to the tutorial, please click on the image and read the annotations.

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

3.27.2011

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:

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

blogspot stuff: finding your gadget ID


This is something which you need to know about if you wish to configure the properties of your individual gadgets in the HTML editor. They are well hidden out of sight, however can be found at the very end of the address bar of the gadget when you are on the Design panel: Click to edit the gadget, scroll all the way to the right, to where the mouse cursor on the image is pointing - and there it is!

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