Archive for Graphic & Web Designs

[Web Design3] An Immanuel Valentine’s (2 ♥comments)

This time round, I designed a shopping website - An Immanuel Valentine’s. Immanuel means God is with us.

To me, this is a really very challenging project. Not only I started the html coding from scratch, I was also restricted from using the brushes I have in Photoshop. Since this project is for commercial purpose, I can only use the basic brushes Photoshop provides, instead of those nice and fanciful brushes other people have created.

This project was given to me only yesterday (12 Jan 08) and I was supposed to do everything before monday (13 Jan 08). Given the limited tools for designing, I tried to make the banner of the website.

In the end, I only managed to come out with this banner on Saturday.

After creating the heart shape, the design was still plain. So, i went online and used this quote “For yesterday’s memories, today’s love, and tomorrow’s dreams I love you“. Couldnt find who’s the author of this quote.

Then today, I was told that the banner was too plain. I think.. think.. and think.. Finally,I made use of the little flowers Photoshop has and created this:

So, I created the html codes. I was told to make the website looks something like my blog(for your information, it is called Iframe). That means only the middle portion(the blog entries) refreshes on its own, without the whole page to be reloaded. I tried a lot of times to create the codes, but it did not work. The html codes seemed to be broken. After trying like dont-know-how-many-times, I successfully make the links work.

Then, created the little logos.

Then, added the content. Beautify it. Create Google Calendar, Hit Counter etc.

I was happily doing all these things in Geocities and suddenly, I saw the terms and conditions for using the Free web hosting service. No commercial purposes is allowed. So, I had to transfer everything to blogger.

Actually, at the “EARLY BIRD SPECIAL” section, I was thinking of doing a marquee on the products. But in the end, it was changed to the Early bird section. The flowery design at the Early bird section was copied from the banner. I did a color balance- so it changes from a pinky color scheme to a brown color scheme. Personally, I like the arrangement of this flower pattern. I didnt expect myself to come out with this swirling effect of the flowers(See Banner)

My own rating of this design(5 stars MAX):

See the number of hours I’ve devoted on this design.. and this is the reason why mummy is nagging me now.. I think i need a break..

My Time Log
5 hours doing the basic html codes
2 hours adding the content
1.5 hours designing banner and logos.

[Web Design2] Petrina’s Blog (1 ♥comments)

Unlike what I normally do- when I help people to design their websites; blogs, I will charge them. But I did this design FOC. Who does not want to be pay back after contributing something? I think I’m overly-generous. =)

The second project given for me was Petrina’s Blog. This blogskin was designed by me from scratch. Unlike the previous blogskin I did, this time round, I created a new blogskin instead of modifying. The theme was about Jesus, and I named the design as “I’m walking with Jesus“.

I was thinking of a suitable background for the banner. What can Jesus be related to? Then, I thought of heaven, sky. So, i took the background picture from ashlee7307.

I added maple leaves, the cross, drew a pathway to the cross. Then the footsteps. At first, I didnt know what to do after adding the maple leaves and the cross. It will be very plain just that. Then, I thought of the story I saw before. I thought it was quite touching.

Footprints..
The Lord replied, my son, my precious child. I love you and I would never leave you. During your times of trial and suffering, when you see only one set of footprints, it was then that I carried you.

So, this is how i got the pathway and the footsteps.

At the bottom of the banner, you can see this word: I want to have a relationship with you. I got this inspiration from yesterday’s sermon.

So I started to write the html code, and tried published it in blogger.com When I view the blogskin in blogger, Everything is so different from the way I designed. Browsing back the html codes, I realised that I didnt “fix” the tables at the respective location and give them a fixed width. So after editing the codes, I’m finally done with the design.

I spent less than 3 hours to finish the whole blogskins including the designing of the banner.

[Web Design1] Arts Fantasy Blog (1 ♥comments)

Hey! I’m supposed to blog this long time ago but I cant find time to update it. Unlike what I normally do, when I help people to design their websites; blogs, I will charge them. But I did this design FOC. Who does not want to be pay back after contributing something? I think I’m overly-generous. =)

The first project given for me was Arts Fantasy Blog. This is the second time doing a blogskin for Arts Fantasy.

First, let me talk about the banner. This GIF Banner is made from 60 individual gif pictures. What I do was to design the banner first. Then, using Photoshop to move the clouds by 4 moves, then saved it as a picture. So, the clouds will move alot of times before returning to the first still picture. So, I tried this way. In the end, there was 176 gif individual files. I combined all these gif files and make it to a single GIF file. But there was too many files. So, I couldnt add everything. So, I had to redo again. Just for this flash banner, I took more than half a day to complete it.

You may say that I can just use Flash and just motion tween the clouds. But the problem is I dont have the software, and I dont know how to use it. I learned it before, but i forgot already.

This blogskin was modified from pink donut addicts. It originally look like this:

What I did was to change the stylesheet, the background, the banner, and shift around the tables.

[Version4] Rosy Star (0 ♥comments)

This is my fourth wordpress designs. This is a duplication of my version 3- Angelic Star.

I was thinking of giving my readers to choose the theme they like. Angelic Star is a blue-color themed, while Rosy Star is a red-color themed. Readers can change to their favourite wordpress themes from the right sidebar.

The girl in the banner is taken from anaRasha of deviantart. I extracted the girl from the original background, and put it in my own banner background. Since it is a red-color themed, I named this wordpress template as Rosy Star.

The background of this banner was taken from ashlee7307 at deviantart. I just took the bottom portion of her picture as the background.

Like what I did for my version 3, I used the template Blue_sky_ajax by Samir Kamble and modified it to become Rosy Star.

Created the hovering effect at the two sidebars. When you move your mouse to the small item pictures, the images changed. The words will fade off.
Example
Before you hover, it looks like this:When you hover to the image, it looks like this:So, try changing the template between Angelic Star and Rosy Star. Which one do you like? Related Post:
[Version1] Where memories are kept.
[Version2] A ballerina’s dream
[Version2.1] Jay Chou Secret
[Version3] Angelic Star
[Version4] Rosy Star

« Previous entries Next entries »

© 2006-2008 Jassy’s blog All Rights Reserved|
original layout & code © ilabyu.net