Looking for feedback on a background image for website

Dec 18, 2011 8:48 AM

Offline

Nov 2010

http://yumestate.com/wp-content/themes/YumeState/backgroundbrown2.png

Is the background in question. I was thinking about changing it, but I'm not sure what to do so far. There's something about it that I don't like, maybe that it has too many characters on it.

If you would like to see what it looks like in an actual website, please visit http://yumestate.com to see it with text.

Specifically, I'm looking for what do you like about it, and what do you not like, and any suggestions you have towards creating a better one. Thanks!

Dec 18, 2011 9:30 AM

Chellle

Offline

Nov 2008

1023

The background image, seeing it is not sliced and is for public browsing, ideally ought to be compressed so that there is no latency in loading up concurrently with the rest of the site. JPEG Q11–10 or so would do.

I believe the image of the bridge and light should be hatched or removed, especially since it is hardly viewable on site. Fill with color (on condition that you removed the image) or hatch with color using a darker color to contrast with the wings of your image, i.e. dark purple in this case.

Attempt to match some of the colors, and trial at keeping the site layout simple yet styled. Good work, meaning time, brings out your vision. You must keep at it. Every time you find the image is off, look at it and think to yourself about what you do not or find difficult to admire.

Always recall the focal point of your imagery in this design process.

Dec 19, 2011 2:48 AM

UltimaniumX

Offline

Nov 2010

Hmm, I'm not sure if I can slice it up. Can you insert multiple images into a background via CSS?

I'm currently just using background-image:url(******image******). If I slice it up, how would I insert multiple parts of the picture?

So it's better to use JPG over PNG?

I apologize, I don't know what hatched means. Can you explain?

Okay, so if I remove the bridge and light, do you mean just cut it out and replace with a solid colour?

Do you find that it's too "busy"?

Dec 19, 2011 9:32 AM

Chellle

Offline

Nov 2008

1023

If you desire to use CSS, you must perform independent research seeing I am right out of bed here. My apologies.

Use table code snippets from HTML. Place your imagery in chronological order within the code. For optimized browser compatibility and to ensure the image data transfers to one's browser correctly, type out the code horizontally, i.e. (<tr><td><IMG CODE HERE></td></tr>), and so forth.

For the web and to demonstrate courtesy to everyone online, yes, it is much best to make use of smart compression where possible. You will have to do this by eye, and make decisions yourself as to how much compression to use and what algorithm. PNG (Portable Network Graphic) is a lossless quality image format, JPEG (Joint Picture Expert Group) is a lossy quality image format.

A hatched area on an image (be it digital or physical) is, common term in technical drawing, a shaded area for the purpose of creating a focal point for those who are not savvy with technical [fine] drawing details. Here I used it loosely, in that to merely shade with a solid color, in which condition that you cannot precisely remove the section without compromising, i.e. destructive editing, which may result in undesirable jagged edges.

It is not imperative to make an incision, simply hatch it on an independent layer above it.

I do find it too busy. Follow the a fore stated steps and you can develop a better design from there.

Dec 19, 2011 3:10 PM

-Mika

Offline

Dec 2011

All I know is that is the Angel Beats! Opening :)

Dec 20, 2011 2:53 AM

UltimaniumX

Offline

Nov 2010

naeceal said:
Use table code snippets from HTML. Place your imagery in chronological order within the code. For optimized browser compatibility and to ensure the image data transfers to one's browser correctly, type out the code horizontally, i.e. (<tr><td><IMG CODE HERE></td></tr>), and so forth.

This would work, but I'm not sure how I would be able to implement it into a background image. I would have to do some research on how to place a table underneath the rest of my code. Unfortunately until then though, I don't think I have an option of slicing the background image even though it's common courtesy =/

I prefer PNG simply because it is lossless, but I understand that it does significantly increase the download and load time for my website. What I can do is switch it to JPEG, and maybe lower its quality somewhere between 9-10.

naeceal said:
A hatched area on an image (be it digital or physical) is, common term in technical drawing, a shaded area for the purpose of creating a focal point for those who are not savvy with technical [fine] drawing details. Here I used it loosely, in that to merely shade with a solid color, in which condition that you cannot precisely remove the section without compromising, i.e. destructive editing, which may result in undesirable jagged edges.

It is not imperative to make an incision, simply hatch it on an independent layer above it.

I do find it too busy. Follow the a fore stated steps and you can develop a better design from there.

Okay I will come up with a prototype on the hatched design. Please let me know if I understand the concept correctly (I'm still a little confused as to what hatching means).

-Mika said:
All I know is that is the Angel Beats! Opening :)

You are correct Mika, good observation. =)

Thanks naeceal for your feedback, much appreciated =)

Jan 15, 2012 1:57 PM

UltimaniumX

Offline

Nov 2010

Just wanted to add a quick reply, I've found out how to slice my background into sections and place it correctly on my website. Thanks for the tips again!

I was able to take

http://yumestate.com/wp-content/themes/YumeState/backgroundblack.png

and slice it into four pieces, and still look correctly positioned on the main site.

http://yumestate.com/wp-content/themes/YumeState/black_01.png
http://yumestate.com/wp-content/themes/YumeState/black_02.png
http://yumestate.com/wp-content/themes/YumeState/black_03.png
http://yumestate.com/wp-content/themes/YumeState/black_04.png

I'm still thinking of what to change in the original picture I posted in my first comment. I may just entirely redo that one. Right now, I have a "Light" version layout, and a "Dark" version. I'm content with the Dark version, but again as I said in the first comment, there's something about it that I don't like.

UltimaniumXJan 15, 2012 2:01 PM

Jan 17, 2012 6:00 AM

Takenoshin

Offline

Nov 2009

120

Hi ultimaniumX, For me—I'm sorry your your site looks oldish. The backgrounds PNG format and quite large so your site loads too slow. I can help make your wordpress site better and modern ^_^ I've started to give my service for free =)

Signature under construction.

<a href="http://twitter.com/takenoshin">
<img src="http://i.imgur.com/g3Mvc.png" />

See All Discussions

» I used a basic AI video enchancer to upscale really old anime tsukareru - Nov 25, 2023	25	by tsukareru »» 2 hours ago
» Created my first amv yesterday. Check it out, enjoy, and provide feedback if you'd like! painiwakura - Mar 24	2	by Astachanna »» 8 hours ago
» Impact of Anime on India's Youth & Its effects on Family Dynamics- A Survey Anituber69 - Apr 10	2	by Anituber69 »» Apr 14, 11:57 PM
» Anime hoodies - New brand abambata - Apr 13	2	by abambata »» Apr 14, 3:30 AM
» Puppet Blood Manga - Thought on Zuo Bandō. Cvensart - Apr 13	0	by Cvensart »» Apr 13, 10:05 PM

Looking for feedback on a background image for website

More topics from this board

» I used a basic AI video enchancer to upscale really old anime

» Created my first amv yesterday. Check it out, enjoy, and provide feedback if you'd like!

» Impact of Anime on India's Youth & Its effects on Family Dynamics- A Survey

» Anime hoodies - New brand

» Puppet Blood Manga - Thought on Zuo Bandō.

MoreTop Anime

MoreTop Airing Anime

MoreMost Popular Characters