Oikofugic Design

Jquery animated menu

Jquery animated menu

See working example: here

Add comment July 13th, 2011

50 Reasons not to use photoshop for web design

Check out the article

Add comment January 18th, 2011

How to resize multiple pictures in photoshop

Image Processor

Generally when you take photos with your digital camera, you want the images to be as large as possible, allowing you best results when pictures are edited for print media.
However if you have images for a website, Flickr, facebook etc, large file sizes will take longer to load if allowed at all, so you may need to resize a batch of pictures.

Step 1
Create a second folder in the folder where your original images are. Call it small pics.

Step 2
Open photoshop, Go to file – Scripts – Image processor

Check out the screen shot, just fill out as required
(Note: it might be worth doing a single manual resize to get the correct dimensions for your batch job)

Step 3
So choose folder where you have your images, and folder where the resized ones should go

Step 4
Hit run, go and check your resized pics.

1 comment April 16th, 2010

Centering text on the canvas in photoshop

Photoshop tip

Centering text on the canvas in photoshop

It’s been bugging me for a while, getting used to what where familiar functions in corel photopaint.
For eg. Right click on text, a drop down box appears: Arrange – Align and distribute – to center of document.
Easy when you know.

But what about photoshop:
I found the answer here, also easy when you know, but alas I didn’t find it until I googled.

Select the text layer and the background layer in the Layers panel,
Click the text layer as shown below, and whilst holding ctrl select the background layer.
You will see a marquee around the entire canvas.

and then pick the Align Center button on the Options bar.

That’s It :0)

1 comment February 11th, 2010

Photoshop tutorial

Light Burst.

The tutorial can be found here: photoshop essentials

Not too bad for a first attempt, and very nice to follow instructions.. Cheers

Note to self: Align text in photoshop: Control plus a then v…

Some more text tuts you might want to try.

Add comment January 26th, 2010

Photoshop tutorials

Hay, so I’m doing another tutorial, but this time I’m going to post my progress rather than hide it away on the old hard drive:

So the night has drawn to an end, brew followed swiftly by bed.. Maybe I’ll get around to finishing this one.

20-plus more stages to go, I’ve done the easy bit. See ya soon.

Full tutorial here: PSDTUTS

1 comment January 14th, 2010

Bokeh

The term comes from the Japanese word boke, which means “blur” or “haze”,
and anyway I haven’t been in town for a while and this beast needs updating.
So without further ado:

You know what, I think it was in Veerle’s blog, but I can’t find it,
And in a basic attempt to upgrade my photoshop and illustrator skills I am doing the odd tutorial.

In photography the concept is easier, in that your prime subject is in sharp focus, while the background dissolves into a “haze.”

Like I said, just a quicky.. See ya soon..

Add comment January 13th, 2010

Video conversion to meta injection

Hidden complexities

So on and off over the last couple of days, I have been over at the flowplayer forum, getting help and information from a couple of the members there as to why my particular video wasn’t working properly.

To begin I started with windows movie maker just for a bit of fun and to check out the quality of the software, ending up with a really dodgy 36 second film.
So as you can see I added a couple of effects a transition or two and threw in a tune, Now at this point I wanted to add my video, or at least gain the ability to put this video into a web page.
And not just put it there to run in a continuous loop, but have a player to play pause rewind etc.
Enter Flowplayer:
Check out the finished product, (for sake of testing only).
Here:
If you decide to follow the link to the video, you can find there a link to the thread describing how I overcame difficulties with meta data.
The hidden info that describes the quality of your film.

Add comment September 1st, 2009

Javascript libraries working together

Mootools and Jquery

I Started freshfreelance site a while ago and used the mootools Kwix script for the sites main menu.
Took me a while to sort it, and was to be honest never as good as the example, but hey..
All was fine, until I used lightbox on one of the sub pages, they worked fine independently, but when together the lightbox wouldn’t work.
I googled for a while, but found no solution I could get my head round at the time, so I took the cop out and disabled the javascript on the menu, (Just for that one page) allowing the lightbox script to work.

Time passed

and I learned to live with it.
Today however I came across the problem again, wanting to implement the JQuery cycle script to cycle some pics, wouldn’t work, and I knew instantly it was the libraries cinfkict.
Googling more successful this time.
Enter:
jQuery’s no-conflict mode,
I have rambled enough:
the solution as I see it.
This is what I had and it worked solo,

<script type="text/javascript">
$(document).ready(function() {
    $('#slideshow11').cycle();
});
</script>

I added

var J = jQuery.noConflict();

and changed the $ for J in the function, and Presto.

<script type="text/javascript">
var J = jQuery.noConflict();
J(document).ready(function() {
    J('#slideshow11').cycle();
});
</script>

There are more elegant solutions out there, Check: JQuery, and I found help here. Michael Shadle

Add comment August 21st, 2009

Png transparency and ie6

png transparency fix for ie6

So I downloaded a few of png’s to use in a site for a client.
The job was almost done and I had sent him a preview to look over, when a couple of issues came up. He said some of my graphics looked odd.
It was an ie6 situation, and to be honest I hadn’t tested back that far, but my luck the client was still using this old browser.
Ok so i thought i’d find a copy of ie6 and install it along side opera, firefox etc, but hey it can’t be done. (correct me if I am wrong on this), but newer versions overwrite older so this method of testing wasn’t possible. Anyway a google later I found Microsoft expression web, a way to test how your design will render in ie6 and ie7, only a preview version and soon to become obsolete on my system.
So checking previous sites a couple of problems came up, one easily sorted using display:inline to keep floated elements in check, the other being the ugly background appearing when an image should render with none. I found solutions all over, most worked a little, but were quirky,
Enter DD_belatedPNG by Drew Diller, I haven’t tested it extensively, but so far all is good.

So I just wanted to spread the word from my little corner.

The html

 

</head>

<body>

<div id="wrapper">
<div id="top">
<div id="logo"></div><div id="strap"></div>
</div>

<div id="nav"></div>

<div id="header">
<div id="header_title">
<h2>Welcome to My new site</h2>
</div>
</div>

So that’s it upload the javascript replace your divs or classes. Mine are all background on the style sheet.

The css

#header {
 width:940px;
 height:106px;
 margin-top:20px;
 background:transparent url(img/header_back1.1.png) no-repeat; }

#nav {
 height:52px;
 width:940px;
 background:transparent url(img/nav_back1.png) no-repeat; }

#logo {
 width:162px;
 height:106px;
 float:left; 
 display:inline;
 background:transparent url(img/test.png) no-repeat;}
 
#strap {
 width:400px;
 height:33px;
 margin:60px 0 0 20px;
 float:left; 
 display:inline;
 background:transparent url(img/print1.png) no-repeat; }

I used it as is and it worked a dream. Cheers..
Will be playing with it some more.
Till next time.. Bye

Add comment June 18th, 2009