Views
103
Replies
1
Status
Closed
I’m in the process of re-doing a web page of mine (http://www.notator.org <http://www.notator.org>) by trying to make it more modern, stylish and attractive, with a "clean" and simple design. Since the issue is computer music software I want to add a hint of "high tech" to it, but not overdone. I’m more leaning towards the tasteful, modern, architectural sort of look than a geeky 14 year old kid’s computer related page.
Using Photoshop elements 2.0 I’ve been working hard designing a "header" graphic which I intend to have on the top of every page.
But I’m a little stuck when it comes to choosing suitable fonts and which effects would be best suited for all of this. I’ve been playing around with shadows and bevel styles, but I’m not quite satisfied with anything. Maybe it’s the fonts I’ve chosen (especially the one I’ve used with the smaller lettering which is the "Zekton" font, which is free). The bigger font is "Lotus flower", also free.
Naturally I want things to be readable, and the smaller lettering (depending slightly on which font I’m using) often blends into the background image, or its own shadow making it hard to read.
Anyway, here are some examples of what I’ve come up with so far:
<http://home.c2i.net/w-460389/notator1.jpg>
<http://home.c2i.net/w-460389/notator2.jpg>
<http://home.c2i.net/w-460389/notator3.jpg>
<http://home.c2i.net/w-460389/notator4.jpg>
I believe the first two ("notator1" and "notator2") have the size issue worked out correctly. Someone pointed out to me that a "header" image for a website shouldn’t be more than approx. 150 pixels high, and I’ve also managed to resize the screenshot image without distorting it too much. I adjusted the contrast/brightness a bit to make it a little less dominating, but still clearly visible.
I also got another idea. Instead of gradually fading away the image as first intended (especially the lower right hand corner of the screenshot) I got the idea that placing part of that corner on top of the text frame area would be a great idea. That would give everything a more "3D" like look, "jumping out" at you, and at the same time save some space.
I’m not sure how to do that in HTML, but I assume that I would have to cut the image in two pieces, then merge them together again in HTML. That way I could make a differenly coloured background for the lower part of that corner (most likely the same background colour as I choose to have for the web-contents area).
Here’s a few websites with examples of (more or less) what I mean:
<http://blog1.fc2.com/swan/blog-category-11.html> (the teddy bear on the top right hand side) <http://web-japan.org/> (the "J" and P" in "Web Japan" on the top left hand side)
<http://binarybonsai.com/> (the girl on the top right hand side) <http://www.highfonts.com/> (the giraffe on the right hand side)
I’m open for all suggestions.
Using Photoshop elements 2.0 I’ve been working hard designing a "header" graphic which I intend to have on the top of every page.
But I’m a little stuck when it comes to choosing suitable fonts and which effects would be best suited for all of this. I’ve been playing around with shadows and bevel styles, but I’m not quite satisfied with anything. Maybe it’s the fonts I’ve chosen (especially the one I’ve used with the smaller lettering which is the "Zekton" font, which is free). The bigger font is "Lotus flower", also free.
Naturally I want things to be readable, and the smaller lettering (depending slightly on which font I’m using) often blends into the background image, or its own shadow making it hard to read.
Anyway, here are some examples of what I’ve come up with so far:
<http://home.c2i.net/w-460389/notator1.jpg>
<http://home.c2i.net/w-460389/notator2.jpg>
<http://home.c2i.net/w-460389/notator3.jpg>
<http://home.c2i.net/w-460389/notator4.jpg>
I believe the first two ("notator1" and "notator2") have the size issue worked out correctly. Someone pointed out to me that a "header" image for a website shouldn’t be more than approx. 150 pixels high, and I’ve also managed to resize the screenshot image without distorting it too much. I adjusted the contrast/brightness a bit to make it a little less dominating, but still clearly visible.
I also got another idea. Instead of gradually fading away the image as first intended (especially the lower right hand corner of the screenshot) I got the idea that placing part of that corner on top of the text frame area would be a great idea. That would give everything a more "3D" like look, "jumping out" at you, and at the same time save some space.
I’m not sure how to do that in HTML, but I assume that I would have to cut the image in two pieces, then merge them together again in HTML. That way I could make a differenly coloured background for the lower part of that corner (most likely the same background colour as I choose to have for the web-contents area).
Here’s a few websites with examples of (more or less) what I mean:
<http://blog1.fc2.com/swan/blog-category-11.html> (the teddy bear on the top right hand side) <http://web-japan.org/> (the "J" and P" in "Web Japan" on the top left hand side)
<http://binarybonsai.com/> (the girl on the top right hand side) <http://www.highfonts.com/> (the giraffe on the right hand side)
I’m open for all suggestions.
How to Improve Photoshop Performance
Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!
