Jump to content



Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  yordan : (21 April 2014 - 09:11 PM) Hey, Ritesh, Did You Hear Me?
@  yordan : (14 April 2014 - 05:28 PM) By The Way, This Could Be An Interesting Subject For A Topic, What About Posting This Question? Let's See If Other People Have The Same Feeling Concerning Bootlists!
@  yordan : (13 April 2014 - 09:36 AM) Boot Order : Cd, [Usb,] Hard Drive :D
@  yordan : (11 April 2014 - 07:23 PM) I Simply Let The Bios Do That
@  Ritesh : (11 April 2014 - 10:23 AM) Is It Possible To Launch Fedora Live Cd Or Installation Disk From Hard Drive On Windows Platform Using Grub Mbr File.
@  Ritesh : (11 April 2014 - 10:21 AM) No U Are Not.. Btw.. I Have Question For You.
@  yordan : (10 April 2014 - 08:02 AM) You Are Partially Right.
I Was Not.
Nevertheless, I Am Again :)
@  Ritesh : (09 April 2014 - 07:33 PM) :P
@  Ritesh : (09 April 2014 - 07:33 PM) I Think U R Not..
@  yordan : (09 April 2014 - 09:28 AM) I'm The Master Of The Shoutbox!
@  yordan : (05 April 2014 - 10:32 PM) He-He
@  Ritesh : (04 April 2014 - 06:59 PM) Ha Ha Ha ....
@  yordan : (04 April 2014 - 11:15 AM) Welcome Back, Starscream!
@  yordan : (03 April 2014 - 02:31 PM) And I Hope That He Will Come Back Soon :)
@  yordan : (01 April 2014 - 02:53 PM) Nice, Ritesh Came, I'm Not Home Alone Today.
@  Ritesh : (01 April 2014 - 08:51 AM) Oh!!! Poor Dear Yordan..
@  yordan : (31 March 2014 - 10:02 AM) I'm A Poor Lonesome Cow-Boy
@  yordan : (27 March 2014 - 02:22 PM) He Is Unpatient Due To His Patients!
@  Ritesh : (27 March 2014 - 10:46 AM) :(
@  Ritesh : (27 March 2014 - 10:46 AM) He Is Busy With His Patients.

Photo
- - - - -

What Is The Best Size To Make A Background In Photoshop?


11 replies to this topic

#1 lonebyrd

lonebyrd

    Premium Member

  • Members
  • 302 posts
  • Gender:Female
  • Location:Northeastern Connecticut USA
  • myCENTs:38.43

Posted 05 October 2006 - 05:52 AM

I'm using Photoshop 7 and I want to make my own background. I'm learning how to do some neat things with it now. My question is, once I open up a new file, what size do I make it so that every person who visits my site will be able to view it correctly? I know people don't all have the same screen resolution, so what do I do? I want to make a banner too and am having the same dilema. Do I just make it one size, like 800x600 then have to do some kind of code to make sure it looks good for everyone? If so, can someone please tell me how it goes?

#2 foolakadugie

foolakadugie

    Premium Member

  • Members
  • 242 posts
  • Location:Los Angeles

Posted 05 October 2006 - 06:51 AM

I'm using Photoshop 7 and I want to make my own background. I'm learning how to do some neat things with it now. My question is, once I open up a new file, what size do I make it so that every person who visits my site will be able to view it correctly? I know people don't all have the same screen resolution, so what do I do? I want to make a banner too and am having the same dilema. Do I just make it one size, like 800x600 then have to do some kind of code to make sure it looks good for everyone? If so, can someone please tell me how it goes?

Wel lthere are a number o ways to solve those problems. As far as the background goes, sometimes it is best to have a seamless tiling image. That way no matter what resolution the viewers screen is set to it will fil lthe screen without looking badly. You can tile it vertically, horizontally or both. This speeds up loading time if you have a small image repeating. If you do use a large image without tiling it, you can use CSS to fix it in place so the back ground will not move when you scroll the page.

Is the banner going to extend across the entire width of the page? Alot of people design the page to fit a minimum screen resolution depending on their audience. The standard use to be 800x600, but I think that now most of the population uses at least 1024x768. So if you design your page to one of those sizes and enclose the design in a fixed table so that it basically looks the same on other screen resolutioons, just with a little extra space on the sides.

#3 lonebyrd

lonebyrd

    Premium Member

  • Members
  • 302 posts
  • Gender:Female
  • Location:Northeastern Connecticut USA
  • myCENTs:38.43

Posted 07 October 2006 - 01:47 AM

I don't want to make an image that is a tile kind, it wouldn't look right the way I am doing it. And as for the CSS and the scrolling, I was asking how to do something like that. Is that what I would need to make it look right in all browsers? I don't know if backrounds look different in different browsers so I don't know if there needs to be some sort of coding done. I wanted to know how to code it to make it look good.

*Edit* Take a look at my website. You will understand why I am asking for help in making it viewable in all browsers. It doesnt come up right in my Firefox browser. My Webpage

Edited by lonebyrd, 07 October 2006 - 03:54 AM.


#4 foolakadugie

foolakadugie

    Premium Member

  • Members
  • 242 posts
  • Location:Los Angeles

Posted 07 October 2006 - 11:37 AM

I don't want to make an image that is a tile kind, it wouldn't look right the way I am doing it. And as for the CSS and the scrolling, I was asking how to do something like that. Is that what I would need to make it look right in all browsers? I don't know if backrounds look different in different browsers so I don't know if there needs to be some sort of coding done. I wanted to know how to code it to make it look good.

*Edit* Take a look at my website. You will understand why I am asking for help in making it viewable in all browsers. It doesnt come up right in my Firefox browser. My Webpage

I looked at the image and these are might thoughts on the problem. If you scripted it to make it stretch the entire width and height no matter what screen resolution, it may become very distorted and pixelated. There are ways of detecting browsers and screen resolutions (which could send them to a specific page designed for that resolution) but that may be too much trouble.
Personally my solutiom would be to put the entire webpage within a table with a fixed width of 800x600 and then behind that just give the page a background color, so that if someone views it at a larger resolution, it would start tiling the image and everything will stay in place. If you want to do a fixed background image that doesn't tile, you will still be left with a big border around the background image if viewed at a higher resolution.

a scipt like this will do the fixed background image though:

<style type="text/css">
body 
{
background-image: 
url('smiley.gif');
background-repeat: 
no-repeat;
background-attachment: 
fixed
}
</style>


#5 Hercco

Hercco

    Super Member

  • Members
  • 595 posts

Posted 08 October 2006 - 04:26 PM

Your only good option is to use a fixed width page. Just don't do it with a table, but a div block.

Checking for screen resolution and handing out "suitable" page for the browser doesn't really work as screen resolution does not equal the browser window width. I don't know about you guys but at least I don't use full screen browsing with my 1600x1200 screen. And people use much higher resolutions too.


To be honest, "full window" backgrounds in my opinion are a bad idea. They work fine for websites that have little textual content and you can use a fixed sized box inside the document body to form the page, you know the kind of sites that are in that style. Or sites that open into a small window.

Would a partial background be an option? For example, you could use a gradient mask to fade the background image into the background color. That could end up looking cool and be functional for all window sizes. Then perhaps combine the background image design with menus and a banner or a logo?

#6 KDEWolf

KDEWolf

    Advanced Member

  • Members
  • 179 posts
  • Gender:Male

Posted 11 October 2006 - 04:04 AM

I'd suggest you to make you site using no tables, only styled DIV and SPAN tags (and also styling key HTML elements, as A, BODY, etc) using CSS stylesheets. The first advantage is that you can easily update the whole site's look by editing only a single file. The second one is that you can a different CSS for each browser and/or resolution, for example.

About the actual background image, do as Hercco suggested. It's the best way to begin styling your background. Later, once you're more experienced you can try some more complex stuff...

#7 Grafitti

Grafitti

    Premium Idiot

  • [HOSTED]
  • 661 posts
  • Gender:Male
  • Location:Switzerland, but currently in Pakistan

Posted 16 November 2006 - 04:12 PM

What about a fixed header length of 800 or 1024, which then fades to solid color. that way you have a 1px image to the right of the header, which stretches to 100%. that way anything larger than an 800 monitor will display the color banner, and those that don't have such a big monitor won't notice the difference.

#8 Guest_(G)Francesca_*

Guest_(G)Francesca_*
  • Guests

Posted 04 September 2009 - 03:31 AM

Please help us with our myspace background issuesWhat Is The Best Size To Make A Background In Photoshop?

Hello All,

We read everything on this page and tried to fix this issue but it just won't work. I understand that you think full background images are a bad idea, but we love how the page looks on a mac. Problem is that most browsers / pcs cut off the image on the left side and only one of us is displayed. Can you please help us fixing this? Thanks so much in advance. Here is the code we use presently:

<imgStyle="visibility:hidden;width:0px;height:0px;" border="0" width="0"Height="0"Src="http://counters.Gigy...YTY4YTg5.Gif"/> <p align="center"><aHref="http://www.Msplinks....><imgBorder="0" src="http://content.Pimp-...if"Alt="MySpace Layouts" title="Myspace Layouts"Style="position:absolute;top:0px;left:0px;" /></a></p><style> .Pimp_my_profile { Generated at Pimp My ProfileWww.Pimp-my-profile.Com } table, tr, td { background-color:transparent;} table, tr, td { background-color:transparent; border:none;Border-width:0px; } table table table { width:100%; max-width: 600px; }Table table table table { width:100%;; } body, .BodyContent {Background-color:000000;Background-image:url(http://img2.Pimp-my-...9275bf7b66d.Jpg);Background-position:Top Right; background-attachment:fixed;Background-repeat:no-repeat; border-color:FF2222; border-width:6px;Border-style:Solid; } table table { border:0px; } table table tableTable { border:0px; background-image:none;Background-color:transparent; } table table table { border-style:Solid;Border-width:2px; border-color:2222AA;Background-image:url(http://content.Pimp-...00000-70-tp.Png);Background-repeat:repeat; background-attachment:fixed; } table, tr, td,Li, p, div { color:ffffff; } </style> <p><aHref="http://www.Msplinks....paceLayouts</a> / <aHref="http://www.Msplinks....HotComments</a> / <aHref="http://www.Msplinks....mageHosting</a> </p>  

 

-question by FrancescaKeywords:

#9 StarGaiz

StarGaiz

    Newbie [ Level 1 ]

  • Members
  • 8 posts
  • Gender:Female
  • Location:Currently between NW AR, &amp; TX
  • Interests:Filmmaking, Set Design/construction, Graphic Design, nature, art, wildlife, books, dance, all things Irish, my Faith.

Posted 11 September 2010 - 09:46 PM

(I first wrote this as a non-registered guest, so I'm retyping it here after registering and logging in. If this accidentally shows up twice, I will delete the first one, and apologize in advance. It hadn't shown up yet, so I wanted to make sure my reply posted. Thank you).
I started out wanting to ask the same question as 'lonebyrd.' But I eventually figured out what I really want to do, is be able to make my own header and footer design that looks painted on drawing paper grain, then have a small image of that same paper grain tile all of the in-between background in a way that moves (scrolls) with the blog posts all the way down.

In a way that's almost exactly like this beautiful blog:

They have a canvas background that seams seemless from top to bottom. I want to do exactly that, but have my own design at the top & bottom, where their paint splotches are, and instead of canvas thread, I'd like a seemless paper texture behind it all. I'd probably be using a pre-existing simple blogger template. But want to adjust the image and typography.


So how does one get a portion of their background texture to seemlessly repeat all the way through, so that it will look like a solid contiguous piece of paper background?

I'm a graphic design student, some (small amount of) html background, am very good with Photoshop (where I intend to make all of this). And could use a little bit of Illustrator if need be. But my basic questions come down to what size to begin the images with, and how to put it all seemlessly together.

Thank you so much for your time & consideration in reading & helping me w/ this. I look forward to hearing back from you soon!

Happy Day!

#10 pentangeli

pentangeli

    Newbie [ Level 1 ]

  • Members
  • 4 posts

Posted 09 October 2010 - 04:14 PM

There's no real right way to get an irregular surface (like paper) to repeat without obvious patterns beginning to appear once it's been tiled many times, but there is many programs and applications which will attempt to make a seamless tile from whatever image you give it (I suggest no more 100px by 100px) you can go up or down a fair bit in size but realistically, anything a lot larger isn't even worth tiling. I would let the app (texture magic for mac is good) attempt to make a seamless tile for you, then I'd definitely take it into photoshop and refine it. You can test it in there. Simple open the tile it generated, go to "Define pattern" and define it as a pattern. Extend the canvas area to a really big size and go to Fill from the top menu and select the pattern you've just defined, you'll now see how seamlessly it tiles. No doubt it'll have a few problems (edge or center). Edge problems will be it not repeating uniformally (like black sharp artifacts going into lighter parts of the next tile on the mirrored edge) or center problems (there's a lot of detail in the center of the tile creating a kind of "tapestry" effect all over once tiled (which looks horrible). So with tiling, less is more. less detail in the center and experiment with making the edges bleed into each other, around all 4 sides until the transition is truly "seamless".

Concerning your question, you should use the background attachment to be either fixed or scrolling and to repeat both x and y with the css background image property in the body selector and you could then maybe use an absolute relative div overlay with a transparent background to hold a png image with an alpha channel to show the background tiling through it. This is a method of having images with transparency which seem part of the background yet are free of it's restrictions. For example, you could have the background scroll beneath a banner. Forgive me if I misunderstood as the link to the example blog you posted wasn't there. This method is pretty simple though. Seamlessly tile a background with css styling and use positioned divs to add unique fixed or otherwise details to them. Any background larger than a large image slice tends to load really slowly, unless it's a gif which is a horrible image format for detail. A low resolution jpeg can offer some suitable results but you should always be tiling smaller background images (taking phones and laptops into account) most of the world will never see your 1024 by whatever slower loader.

#11 xamire

xamire

    Member [ Level 1 ]

  • Members
  • 30 posts
  • Gender:Male
  • Location:Kansas
  • myCENTs:7.17

Posted 29 May 2011 - 09:47 PM

I'm using Photoshop 7 and I want to make my own background. I'm learning how to do some neat things with it now. My question is, once I open up a new file, what size do I make it so that every person who visits my site will be able to view it correctly? I know people don't all have the same screen resolution, so what do I do? I want to make a banner too and am having the same dilema. Do I just make it one size, like 800x600 then have to do some kind of code to make sure it looks good for everyone? If so, can someone please tell me how it goes?


Either get, or make a small square background image (5x5 or smaller, no actual photos, just use textures, or flat color), and then code your background to repeat that image (make sure the squares look decent together).
Using a flat image background is a no-no generally speaking. It's a huge picture, that has to load with all the other things on the website, thereby slowing it down.
Imagine if 1000 people had to load that same image on every screen. Exactly.

Meanwhile, repeating the background is like loading a small 5x5 square, and telling the browser to repeat and fill in all the white space with the same one small image.

Edited by xamire, 29 May 2011 - 09:49 PM.


#12 manuleka

manuleka

    Way Out Of Control - You need a life :)

  • Members
  • 1,633 posts
  • Gender:Male
  • Location:myComputer
  • myCENTs:58.12

Posted 30 May 2011 - 01:42 AM

unless you don't mind your background showing only part of it on smaller screens and big blank space on wide large screens it's best to have a few background sizes and let a script do the prior-check for screen size for you

for example:
so if this was me i'd be looking at a script to check the Browser platform, and then that script will call either jscript/javascript/vbscript etc.. (depending on Browser support) to check for screen size and call out the background



Reply to this topic



  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users