Been looking into responsive web design lately, and to practice I've made a very simple "application" which adapts to the screen size of the browser. Everything works as expected, but now I'd like to spice up the interface.
My intention is to create a logo and perhaps some icons too. I've downloaded GIMP and I was thinking of using it. Then it struck me, is that the proper way to proceed?
Is GIMP a good choice? Or, could that be achieved with the functions in HTML5, like canvas and stuff like that. Or how do you normally do and with what tools?
I'm not quite sure how to proceed.
Thanks!
i recommend you using EaselJS , i hope you enjoy working with it, however normal graphics that you want ever be accessible for wide range of your visitors should be designed and saved as popular graphic formats such as PNG , JPEG and GIF.also gimp is a good lovely tool.
Related
I work for a company that's going through a website redesign, and the designers have sent me a PSD file with mockups of the static pages. This is a typical parallax scrolling type deal that seems to be all the rage right now, and there are some large images in the mockup that will end up on the site.
I've chopped out the relevant graphics from the PSD and saved them with JPG where I don't need transparency, however I'm forced to use PNG when I do and some of these images are pushing 500kb in size resulting in the page size totaling about 3 megabytes, and I'm not even done! This is also being saved with Photoshop's "Save for Web" feature.
Considering over half our traffic comes from mobile devices, this is a big problem. What are some good techniques to cut down on the size of these images?
Your first step should be to go back to the designers, tell them the design is too heavyweight and work with them to find a way to load fewer, lighter images.
Tools like PNGGauntlet and ImageOptim can help reduce the size of PNGs (and JPGs). They tend to get a better (smaller) result than just Save for Web alone.
Lazy loading images so they only get downloaded when they scroll into view is another technique to look into. Where possible, use built-in CSS tools such as gradients, shadows, and the like. Maybe a vector format like SVG can be used for some of the images?
And, as Kobus Myburgh hinted, you can use CSS media queries to load smaller background images on smaller screens. If they're all background images, you might be able to get away with stretching smaller ones (using CSS background-size) on larger screens. Foreground images are trickier, but something like picturefill or a srcset polyfill might do the trick.
I believe what you're looking for is "responsive images". Read more here for techniques to solve:
https://github.com/scottjehl/picturefill
This is but one example of responsive images. There are many out there. Try Googling the term.
Try some lossless compression techniques .
Reference :
Lossless compression of images
I've been using H5BP for what seems like Eons and find it really useful however I've never really understood what all of the icons are for.
I know they are for various devices but I've never really bothered you think more about it... I've just sheepishly replaced the icons with my own set for the site I'm working on.
I've just been googling and can't find any good explanation for each of them and in what context they are used?
I have an iPhone & iPad but to be honest I'm kind pretty un-impressed by both and therefore I'm probably not well versed enough to know exactly where the H5BP icons would be used for on these devices...
Please refer to this section of the HTML5 Boilerplate documentation - html.md
You'll find a link to Everything you always wanted to know about touch icons which will explain, in depth, what each icon is used for.
On the iPod/iPhone/iPad you can decide to place a website on your home screen (think of it as a bookmark). The bookmark will then have the same look as the icon of an ordinary iOS app (a large icon and a small text beneath it). The H5BP icon is used as the app icon, if someone decide to save your website like that.
The reason there are three different resolutions is simply because different apple-devices need different resolutions on their icons. The new iPad (retina) needs to have a high-res icon, and so forth.
I have implemented UI controls using JavaScript, CSS and HTML (and SVG). I know that browser support for SVG as background-image is poor, but that does not concern me as the project is not going to launch anytime soon.
However, it feels painful to do things like CSS sprites. It is also a lot more painful to use Illustrator than Photoshop. I am wondering that is the main benefit of vector graphics (scalability) worth this? Do you think it's a good idea to use SVG instead of raster graphics for UI controls like checkboxes, buttons and such?
It's worth it. Think about people using an app on an iPhone, then using the same app on an iPad—scalability helps a lot. The most difficult thing is learning the tools necessary to producing the vector graphics. Illustrator isn't any harder than Photoshop, it's just different; you're learning a new paradigm for image editing/creating, as if you're jumping from Java to Haskell.
I'm working on a web site with Expression Web. I came across this website http://www.ecodetox.ca and what I really liked was how everything seemed to be in round rectangles. I also noticed the background had a drop shadow. I'm wondering how I could achieve this type of effect in expression web without using loads of images from Photoshop. Thanks
All those rounded corners are images :
http://www.ecodetox.ca/images/middle-accueil/middle_01.jpg
http://www.ecodetox.ca/images/menu/menu_01.jpg
The methods for doing this are numerous and will depend on the actual design you want for your site. You will need familiarity with CSS and HTML and once you're comfortable you can check out the myriad tutorials online
I get a .pdf complete with images, fancy fonts, styles, gradients and what have you. Basically it's handed off to me with the message, "Make me a web page that looks exactly like this." I've tried a few pdf to html tools and they all look terrible. I figure I've only got 2 options and i hate them both.
convert the pdf to one big image and use an imagemap to add the links.
the screen copy tool that comes with acrobat reader to chop the file up into it's parts (buttons, logos, etc).
She uses Quarks to make this pdf. I've never used it, but I hear it is very popular. Are these really my only two options? Someone tell me I'm wrong, please.
Grab what text you can out of the PDF and clean it up. Pull the PDF into Photoshop and slice out the graphical elements you want to use. Rebuild the page using the images and put your text in HTML format.
Make a slice of the gradients and use them as background images with repeat.
Try to explain to your client why the fancy font is unsuitable for this medium.
Edit:
If it's just going to be a screen shot, you might as well just put the PDF up in the first place. At least people can zoom in.
Do not use one big image map. The more content you can convert from image to text, the better (more efficient) your HTML page will be.
Chop up the PDF into parts. Make the logos, etc. images, make text plain text, and make buttons button controls.
Exactly like what Diodeus said except-
-
Find the fancy font and check to see how much it will cost to license or buy it. Build two bills and send them to your client, one with the fancy font and one with a standard font. Then see if she wants the fancy font. It will show that you take your job serious and may get you less strict project conditions.
No they are not:
Adobes Online pdf to html service
or
pdftohtml