How the steps I need to follow to make these banners?
While you can make those banners in Photoshop, they appear to be vector images. adobe Illustrator might be the program you are looking for. when you create a vector image it can be re-sized at any time without damaging pixels, since it's vector. If you would like i would gladly make a short tutorial on how to make similar banners in adobe illustrator and upload them to my personal YouTube Channel. for now a useful sight that contains similar tutorials is http://vector.tutsplus.com/ -Jacob
Related
As a web developer, I have to cut a layout similar to this (example website by Ruben Bristian):
Should I bother with cutting multiple small images like a logo:
a label:
and so on? Or should I just make one big background image with all elements like this:
and make a positioned <a href> with display: block; for a linked logo?
A single image has smaller size than multiple elements altogether. What are the other pros and cons?
Use separate images.
Here are a few reasons why:
Maintenance:
It's going to be much easier to maintain in the future, if/when there comes a point when you want to build on what you already have. Furthermore (and subjectively), the background image is not critical to the design. It wouldn't look broken if parts of the background were clipped. It would look broken however, if the logo were distorted.
Bear in mind also that newer, sharper displays are being developed. It's much easier to display the standard resolution background (it's already blurry, so clarity is not essential), and maintain two versions of the logo. One for standard displays, one for HD.
Semantics: What if the user has images disabled? Sure, it's unlikely, but what about Google? You should have some proper markup with real content. Your site needs real textual content in order for Google's crawlers to gather information about it. Use CSS image-replacement techniques to build the interface.
Another note on HD displays:
It's convention to serve larger images to HD (retina) displays, and use CSS to downsize them, effectively increasing their dots-per-inch. If you use just one image, the user will have to download a considerably large image. More bandwidth used by you, and slower experience for your users.
Furthermore, the text will look horrible on HD displays. It makes much more sense to allow the browser to render razor-sharp text to the user.
Accessibility: For a start, screen readers won't have a clue what your site is about. That might not be so relevant in this case, but it's best practice to build and accessible website. If you want to include some smaller text on the site, some users may be unable to read it. Normally they would increase the font-size, but if you use images, they're powerless.
I may have over-dramatised this answer, but the advice is well-intentioned.
I would honestly try a little bit of a different approach. The "photo" part of the image would be one image, the logo another, and maybe the double bar on either side of the heading another (but might not be necessary.
I would use the photo part as a bg image on a div, and within code the rest.
I wouldn't make the text part of the image at all. Try using a service like Google Web Fonts to get a good font.
The approach will save you lots of maintenance time, and also help with performance.
PROS:
Total bytes loaded is lower.
You do not have to worry about how little images are put together to become the total image.
if you just use 1 image you will find that it will be much easier to maintain the fluidity of the layout. You will not have padding/alignment issues, rendering issues, etc. Realistically the load time should be the same either way, maybe a tad longer for multiple images as the browser would have to render more css, but i imagine it would not be very noticable. In the end it really comes down to what is better for the job. I pretty biased towards 1 clean image :)
I guess you have to think about how you are going to use each element individually, and how they are going to change in the future.
You might want to change the logo, animate it, or want to re-use it elsewhere. The background image might change, or become multiple images in some sort of transitional gallery.
If this its never going to change (unlikely), then, yes, flatten it in a single image.
I personally would have as a separate background image. Then perhaps have the logo and the label on another transparent png and utilise css sprites to re-use them throughout the site. This will halve the number of requests required to download the logo/label, and allow you to optimise each image separately ie the complex background photo, and the more simple logo/label.
What is a good 'image spriting' tool to turn single images into one big sprite with different background-position?
I know about http://spriteme.org/ but it doesn't seem to produce a result as nice as:
goDaddy's or Behance's
I've been doing it by hand for small hovers and icons but doing the entire website would take a while to hand-code all the background-position properties.
Thanks
You can try SASS/COMPASS. Even if you are only using the sprite functionality (called sprite mixin) it is worth using it. There are some nice tutorials like this one.
1) First, should I order the images in my spritesheet a certain way?(like biggest to smallest images, or images that appear at the top of the page to bottom of the page?)
2) Say I have a css spritesheet that contains before and after images. Like the image shows a cow, but when the image is hovered, it shows a cow with wings. Is it in my best interest to not use css spritesheet for that then? Does the css load all the pictures in my spritesheet at once?
3) Is a spritesheet better in terms of caching? Unrelated, but what does it take for a browser to cache something? I mean if it's only after a single page view, perhaps it's not worth it.
4) Lastly, I want to start a forum. I don't know anything about forums yet, but I plan to start one soon. I'm thinking of just having like a default set of 40 images that people can only choose from as their avatars. Should I even make a spritesheet for those images (if it's even possible)?
I know this is a lot of questions, so please answer any that you have knowledge of. Thanks!
A 'spritesheet' is just one large image. So...
1) Doesn't matter.
2) Again, it's just one image. If not all users will want to activate the 'after' feature, then you can save them some bandwidth my making the afters a separate sprite. If most people will want to use the after feature, then you can save them bandwidth by making it all one sprite. (Though note if we're talking really large images, there will be a practical limit to how much you want to stick into one sprite. No one is going to wait to download 1mb file, for instance).
3) Again, a sprite is just an image. It has the same caching pros/cons as any image.
4) 40 hits on the server is a lot compared to 1 sprite. So, based solely on that, a sprite would be useful. But if it's rare that you'll get more than 10 or so of those avatars on one page, then the sprite would be a detriment, as it's loading such a large file.
Just on the ordering of images, I have a sprite file for a site I’m working on that contains various browser logos with version numbers added to them. As such, there’s quite a lot of repetition in visual information in the file.
I was quite surprised to find that the direction of the repetition could have a big effect over the file size I could achieve for the image when saving as a PNG. When I had similar logos in columns, the file came out at about 120 KB; whilst when I arranged them as rows, it came out at 41 KB.
Once the project’s live I’ll post the actual images. It’s probably quite rare to have such similar images repeated in a sprite file; normally your images would be different, or you’d just use the same image repeatedly. (Indeed, I might end up refactoring my sprites so that the varying bits are in their own file.) But I hadn’t realised that such supposedly similar images could be encoded in two files of such varying sizes, purely based on the geometric arrangement of the elements in the image file.
1) Not sure, but I don't think it would matter much, if at all.
2) The best way to do this is with CSS image rollovers.
3) Spritesheets would be better for caching, since it's only a single image, instead of the web server having to connect, send an image, disconnect, send again, send another image, disconnect, etc...
4) I would just use single images. There's really no reason to use a spritesheet in that situation.
I am messing around and created a neat web layout in Photoshop. I then sliced it up and exported all of the Images and HTML to Dreamweaver. However, it turns my layout into tables. This is a problem because I can't get it to fit all screen resolutions. Does anyone have a quick fix or some advice on how to get my slicing converted to CSS?
You aren't going to get an automated thing like that to work the way you want it to. It's why I started coding. When slicing your psd think about it in the layers it is in, then you will have to figure out how to css it all together. It's alot to learn, but once you get your awesome psd working as an active web page you will realize how worth it it was.
Can we use whole page design jpg file as css-sprite without slicing?
You can, but it generally requires a lot of planning and careful development. For example, if you need to add a new icon/image to a page and you suddenly find your sprite image is not big enough, you have to go through and change all images on the page to use whatever new layout you come up with.
No. Most designs includes one or more images which are:
Content images, which should be included with <img> and have suitable alt text.
and/or
Images which tile in 2 dimensions, which can't be sprited.
as mentioned by codeka, you can. but you'll end up with a really big .jpg with a lot of white space if you plan to use the whole page as a sprite without slicing
You also probably don't want to use jpg for everything. Some things are better with jpg, some with png (or gif).