Free Vector Web Page Elements – Part 3
This set is Part 3 of my Free Vector Web Page elements series, and there are a couple of important differences to note. Believe it or not, there is no “reflection” in this set. In fact it’s quite opposite of the previous sets in 2 ways. Instead of a reflection, we have here a subtle shadow-like gradient overlay on the bottom half of the button and header shapes, that hints at a silky 3D feel.
There is no transparency involved in the main buttons and bars (white silky ones), so they should be relatively easy to customize. If you change the color of the button itself, you must also change the bottom color of the gradient overlay. Another difference is that this is my first set designed on a dark background. If you are wanting to apply customization to any of my previous sets to a dark background color, this set might help you learn how to do that on your own.
It may be hard to see, but there are subtle drop shadows on the buttons and various other shapes. Keep this in mind when customizing, and structuring your layers.
Customizing tip: If you are having trouble selecting certain paths or shapes, go to the “Object” menu and “Unlock All.” this will make every shape selectable, then you can lock the shapes you DON’T want to select, to make things easier ;)
Some other quick Illustrator tips to help you with basic selection methods, among other things in this post.
Includes: – AI (2) EPS (1) SVG (1)
Everyone can thank Mark (one of BittBox’s readers) for inspiring me to make a PNG for every download, with all of the individual elements of the set separated onto a transparent background. Ideal if you see no need to customize, but want your own background color. 451 X 1498 px – 88K with transparency
Can u explain how did u do those tabs, where u can only see one side of the tab and the other side is faded out. I looked at the file and its just a path with overglow filter and i cannot seem replicate it. How did u do the slanted fading
Thanks
Excellent look. I’m definitely going to use that shiny rss logo. Thanks!
@MySchizoBuddy
It’s an “Opacity Mask” in Illustrator. Select the tab shape and in your Transparency palette, click on the little arrow in the upper right and select “Release Opacity Mask.” You will then notice a shape above the tab shape that has a gradient fill. White being visible, black invisible. It acts like a clipping mask only with transparency. There is no right click option for applying this. You must go to the transparency palette to apply an Opacity mask.
I have further reading and detailed instructions in this post:
http://www.bittbox.com/illustrator/illustrator-tutorial-how-to-make-a-vector-glass-button/
toward the bottom of the tutorial.
~BittBox
Those glassy RSS feed logos are golden!
Thanks!
All of my glassy RSS icons:
http://www.bittbox.com/freebies/free-glass-style-rssfeed-icons/
~BittBox
This is probably going to sound stupid but as a novice, I’ll go ahead and ask it. What is the best way to (or how do you) go about implementing these various web page elements into an actual website? I mean, is it a case where you manipulate the graphics in Illustrator, then take them to Photoshop and then Dreamweaver to create the actual site? My apologies if this is a terrible question.
Ken,
Not a terrible question at all. In fact, I’m going to post a tutorial on this soon, because of similar requests, if you don’t mind waiting. If not, email me and I would be more than willing to give you some pointers when I have time.
~BittBox
I recently stumbled on to your site and I am very impressed. I love the amount of detail you can achieve with Illustrator. I didn’t even know you could do that and I’ve been working with it since ‘95. (not as an illustrator, but I used it for the occasional logo or other stuff I couldn’t possibly do in Photoshop)
You’ve inspired me to try and do some more with it from now on.
I’m so impressed with everything that you’ve put out so far. It’s a significant amount of time and effort that you put into this very solid and helpful work. I guess what I’m trying to convey is appreciation. Thank you.
Awesome as always…How about some vibrant colors with a blue/orange theme? Or are you even taking requests?
Requests are alway welcome :)
Looking forward to the tutorial. Thanks for all of your help.
These are really great, thanks.
the icons are really great, but I am also loving the darkness in the layout.
there are way too many light sites on the internet, so nice one on bringing back the darkness! :)
hey man that is a nice website layout but i think the gray part is totally hidin in the black part. so you can do soemthing to that other wise a nice and innovative layout.
keep it us.
Regards
Amitav Roy
[...] http://www.bittbox.com/freebies/free-vector-web-page-elements-part-3/ [...]
[...] http://www.bittbox.com/freebies/free-vector-web-page-elements-part-3/ [...]
[...] http://www.bittbox.com/freebies/free-vector-web-page-elements-part-3/ [...]
Looks good.
your tutorials are very easy to understand and i feel you should keep on posting such nice things more
Thanks for the tutorials, I couldn’t believe that someone is giving these works free. What about copyright issues, can I put this on my blog?
BittBox, I am also interested in copyright issues.
well i have never thought that web designs can be made in illustrator. well i now think that it is better to get the layout. as shapes are easy to make in illustrator. your tutorial really changed my mindset man. thanks
Regards
Web Design Mumbai
very nicely done. i think now i should start to use illustrator to design website layouts. photohshop will be used, but first i think it will b better if i make the layout in illustrator and then start with photoshop.
Yeah hi, I’m just a 16 year old who wants to create a cool looking website, I will make sure that you get all credit for the sites pics, but could you upload a zip with all the images! Cause when I downloaded all I got was a screen shot of what I see here, I did not get the separate files! Please, I don’t have money to pay you but it would be really nice if you could help me out!
Never, mind, this awesome, I downloaded The GIMP! I don’t have money for Photoshop, but this program is just like it,all I did was open the png file and then I used Fuzzy Select, to get each one and saved it separately, this is so cool! Thanks for all the cool neat downloads, I will still give you credit on the website I will make, and it will have a link so people can come check out your site!
Thanks for sharing this meterial. Good work.
well i think it is a nice thing to first get the basic structure and then you can always place the required image. if we get the look and feel we can later add images
I am looking to use some of your super vector graphics. I have downloaded InkSpot (on Mac OS X Tiger). I want to change the colours so the png technic does not work so well.
I tried the tip you mentioned on the page (Object>Unlock All), but the file (BB_vectorWPE_3.svg) appears as a single image. Any help would be greatly appreciated.
Thanks for sharing such excellent work.
./joe
Thanx A Million!
[...] BittBox – Vector Web Page Elements [...]
Not Found
The requested URL /wp-content/uploads/2007/03/free_vector_WPE_3.zip was not found on this server.
Thanks!
I just moved servers and some of the files got lost in the mix.
Files replaced
~Bitt
@ Bitt:
Thanks a lot!
hope you can fix the broken photos on this page unless its my mac that has probs?
[...] [Glass Badge] [Glass Bar] [Glass Arrow Button] [Glass Number] [Web Page Elements Part 1 Part 2, Part 3, Part 4] [Glass Buttons & Bars] ???????: [Butterflies] [Wings] [Flowers] [Rounded [...]
Free Vector Web Page Elements – Part 3 | BittBox…
Homemade vector freebies, design tips, tutorials and bitts….
nice vector thanks!
Thank for sharing, It looks good, I can’t wait to download it.
VishwaTrade Corporation is IT services and consulting company in Mumbai that delivers affordable , professional business and technology solutions through global software development model. Founded in 2002 at Mumbai India, and pioneering the offshore software project and software product development process.
Thanks a lot, I’m using the tabs!