4.09.2011

how to add a poll into a blogspot post

Easy enough to add a poll as a gadget, however what happens if you want to put a poll into one specific post only? Can be done as well, and this video shows us how:
http://www.youtube.com/watch?v=qoK9lHMjnDc
Ingenious, huh? Tried it, works like a charm... ;-)

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

4.06.2011

how to replace a blogspot widget title with an image

From your dashboard, go to design and into Edit Html. Make sure that you have ticked the Expand Widget Templates checkbox on the top right. Now you have to find the widget ID of the widget title you wish to edit. To find the ID of the gadget you wish to modify, please read this previous post here.

For example, the widget id for my widget is Label1, you will find something similar to this code below:

<b:widget id='Label1' locked='false' title='Topics' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if> 
<--------------lots of data here that you don't need--------------------->
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Replace the data:title tag ( <data:title/> ) with the code below:

<img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/>

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

4.05.2011

importing a table into a web page from office word

I love tables! Stands to reason of course, alignment freak that I am! But then, I do not love any old table, I like them to be really sleek looking as well. And the best place that I know of to create really cool tables is boring old Microsoft Word!

I have been looking at a lot of options for creating tables with CSS on various websites and one of the big problems that I find is that you are not really seeing what you are doing as you are fiddling around with the code. Unintuitive, in other words. Whereas with Word, obviously you do, you have full visual control. So, if you wish to put data into your website which needs to be shown as a table, a smart designer's way of going about it might well be creating the table in Microsoft Word (or it's Open Office equivalent) and importing it into the webpage from there.


February
March
April
May
Introduction
Completed



E-learning

Completed


Theories

Completed


GC


Interviews
Due Date

Simply draw the table on a brand new document in Word, tweak it's appearance in any way that you like, then do a Ctrl+A to select everything on the page; come to blogspot, go to the "compose" tab (not HTML!) and paste the table into your post. The one above was made just like that.

And...  Tip, or rather a word of caution:  Do not even look inside the "Edit HTML" tab on the post editor since what you will see there may give you a righteous heart attack!  :-D 

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

4.04.2011

additional photoshop lens flare tips

If you are working with a dark, more or less solid image field, the duplicate layer > apply flare > layer mask trick seems to be the easiest way to go. However, what happens if you want to use the flare on a photograph with a lot of different tonal values? There is another way to do this and I figured I should talk about that one as well, in case some of you want to try it out: 

Create a new layer on top of your image, fill it with 50% gray, or lighter or darker. Apply the lens flare onto the middle of the gray layer. Then in the layer palette change the layer mode from normal to hard light, screen or exclusion - whichever works, this will depend upon the values of the underlying image - as will the value of the gray of the flare layer. Move around, see what happens around the edges (they may be visible), and if needed use curves or levels or brightness/contrast (or indeed, yet once again a good old layer mask) on the gray layer to blend everything together.

So, the whole thing involves a bit of experimenting, undo's and redo's, I'm afraid. But essentially that is how it works folks.

Open this photoshop file here >>> to get a clearer idea.

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

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 >>>.

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

4.03.2011

a new (cleaner) look for easy peasy

This blog is getting to be quite big now. We have lots of different material, from plain text, to code samples, to photo gallery and slideshow demos, to lots and lots of different types of images. And when we start thinking in terms of design functionality, such diverse and colorful content needs a much quieter, simpler container.

I had been wanting to do something with the "Simple" template ever since I started this blog since it has a really cool, minimalist interface. There were a few problems with it however, such as that the default line height is way too narrow, both in the post body and in the gadgets. And when I started this blog only a few weeks ago I had no clue as to how to fix that! This last month has been a hugely instructional time for me - and this comes with a huge big thank you to Selim, who has undertaken not only our student's education in "code", but also mine.

And - I am totally loving it as well. All this fiddling around with code values and hunting around for them has gotta be the best fun that I have had in front of a computer in quite some time!

So, first I saved the old template for all the bits and bobs that I had put in the header. Then I installed the "Simple" template, copy pasted whatever was needed from the old one onto here; fixed all the other stuff that I felt wasn't quite right with the new template (namely all the line heights), tweaked the old header image a bit, changed the background image - and hey presto - we now have a much cleaner looking blog!

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

proud of our own! Onur Yazıcıgil and "Duru"

Duru is an ongoing multilingual font project, which consists of four weights with small caps and alternate glyph sets with accompanying italics. Italics are to be included in the font specimen booklet in May 2011.

The creator of "Duru" is our very own Onur Yazıcıgil, a much valued faculty member of our university since Fall 2009. He and I co-teach the main Graphic Design course of the 3rd year and he is one of the greatest colleagues and friends that one could ever hope for.

And... an amazing typeface designer, as the following will show:











 Note:  Duru is due to be distributed through an internationally renowned professional type foundry in the near future. So, please stand by for updates!

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