I am really wondering if you can just teach me this little trick i would be really grateful and thank you a million times.
I am trying to achieve these 2 effects on my images. I i would like to create this effect with icons using CSS and how can i create this border and arrow in the wrapper of a header with a background-image which will auto resize and stay fixed + the border outside to align with the border bottom in the div.
If they’re done in css, you’re talking about svg shapes.
What I do when I want to use an svg shape (just starting to get my legs under me with them), is I go to an editor like this one, build what I want, then use the view-source to copy/paste it over into my css.
There are probably svg libraries out there which would give you a head start, I just haven’t looked into them (I try to learn how to do this kind of stuff myself since it might be useful later on)
So what do you suggest since i am not a Photoshop designers i am only doing the front-end. What is the best solution so these icons from PNG should be transformed and saved in SVG? And use them with css right?
Where did you get them? Perhaps there are SVG versions. Illustrator might be able to turn them into vectors with the click of a button, but you still have to learn a little about how that program works. There are other, free alternatives. Dave pointed to a tool above, but it might be tricky to recreate those images with that.
Yes indeed. SVG is the most popular way to do images like this these days. No matter what resolution they are viewed at, they are always crisp and perfect, and there is good browser support these days.
If you want to stick with pngs, as I said, set up a demo doing as much as you can, and we can step you through the fine tuning.
Where did you get them? Perhaps there are SVG versions. Illustrator might be able to turn them into vectors with the click of a button, but you still have to learn a little about how that program works.
There are other, free alternatives. Dave pointed to a tool above, but it might be tricky to recreate those images with that.
==> I have a photoshop designer i wil ask them tomorrow to save them as SVG. It is a PSD design so the can create a SVG of these icons including the border at the bottom?
Can you only explain how and is it possible to display these images including these borders and the bottom inside a DIV to show them perfectly? SInce i am using a responsive design the CRISP effect would be a nice improvement.
Not sure how well you can save an SVG from Ps, but it can be transferred to Illustrator and then saved out.
Now, here’s the blunt message. I can tell from the original image that this graphic designer you are using has no idea how the web works. He is probably happily writing up a big invoice now, blissfully unaware of what will happen to those images on larger screens, in responsive layouts etc. But you need to consider all this. What is meant to happen on small screens? Are the graphics ready to expand left and right on wider screens?
Just a note. For simple, clean graphics, you can convert the logo or graphic to use to a shape or vector form. Then you can either copy the shape in Illustrator which does have the ability to save as SVG, or you can export from Photoshop as .esp and import it into Illustrator (or Ink, or any vector program) and save as SVG.
Of course, we’re talking about easy and clean graphics like the ones shown here. Complex gradients and shapes are better for bitmap formats like png or jpg. But simple, clean line graphics with few colors and good contrast are great for vector formats like SVG, and a vector format always looks crips and nice, no matter the scale you use.
Thanks for your advanced reply. Yes, the designer today sent me the SVG icons and PNG. Now what i need to know how can i use and PNG on Desktop and on Ipad and retina displays… the SVG image instead. Any good tutorial or solution?
You may just be better off following the route Paul has suggested above, with PNGs. Still, it won’t be as crisp as using SVG. Those SVGs you’ve been provided with are not properly delivered for use on the web. (Again, not a very experienced designer, IMHO.) They are sitting on a huge canvas, which makes them pretty useless. So the first thing to do is to download them (right click and Save As …), then open them in Illustrator and crop the canvas to the edges of the graphic itself, and then save that as your SVG.