I needed a resizable browser for a project I'm working on so I recreated Safari's window in vector using Sketch. I thought I could actually share the source here as it could be useful to some of you :)
7 months ago
This is literally pixel perfect. My only problem with Sketch is that I get the feeling that sending over a .sketch rather than a .psd to a developer might just be greeted with a confused face. From the day or so I spent using it, I loved it, but I worry it's just not universal enough yet:( Still awesome though.
Well done mate!! @Benjamin De Cock
Nice job! Find it interesting that you don't name your layers or group them?
@Joe I think it's a waste of time. Sketch lets you very easily select your objects directly on the canvas so you basically (almost) never deal with the layer list. Which is great :)
@Joe and the real-time previews of shapes make it easy to know which layer you're after, much easier than finding it by name.
As a programmer who dabbles in UI design, I suffer from a bit of OCD & keep naming & organising my layers.
Might try to forget about them now and see what happens :)
Something like this is always handy. Thanks Ben.
Very crisp work bud!
Fantastic! You even got the traffic lights spot on, those are tricky... Any chance of uploading the @2x version [to demo Sketch's easy @2x export]?
I personally find that layers are indeed a much better experience than point and click, considering I sometimes click randomly. It feels more controlled. But as I see you claim it is a powerful enough tool, I'll take another look at the beta. And if good enough, I'll switch :)
Don't you find Sketch extremely laggy when @1600% and beyond?
PS: Using the canvas vs. using the layers panel is probably the best thing I inherited from my Fireworks workflow :) It's sooo weird to see UI people using only the layers panel in Photoshop with Auto-Select and Show Transform Controls off all the time...
Real nice! First person to convert this to a psd wins though.
First document going into my Sketch iCloud :). Thanks!
Thanks for sharing, Ben!
I am giving Sketch a go and actually loving it. Needs PSD support though :)
@Benjamin De Cock in Photoshop you can make it so you can select layers on the canvas. When you select the move tool, there's an option near the top of the screen that says "Auto-Select".
@Ollin One of the great things in Sketch is the amount of effects you can apply to one single layer -- and that's the case with the traffic lights ;)
As for the automatic @2x export, here's the result. Not perfect for absolutely everything, but definitely good enough for many cases (especially glyphs).
@Radu No, it's been pretty fast with me so far.
@Connor Crosby Well yeah, I'm aware of that ;) But the behaviour and visual feedback is completely different (Sketch works actually more like Fireworks than Photoshop).
Awesome to see resources for Sketch!!!. Sketch is great because it gives you the css gradient values for anything you select.
The document opens blank in Sketch? , Found it it was way off screen. Just a bug in sketch with different display settings.
Very *very* nice. It's a great starting point to see how powerful can Sketch.app be. Thanks for that @Benjamin De Cock
Sketch sure has turned into a powerful tool. Been using it on a few recent projects. Love how lightweight and feature packed it is. Stability has greatly improved too
@Benjamin De Cock Beautiful work! I'm trying to like Sketch... but how do I resize your vector? Lets say I want to make it wider without distorting it: in Fireworks I would use the point selection tool, drag over the right hand third of the shape to select all points in that area (including all the browser resize and reload icons) then move them to the right. That's one step. Sketch seems to want me to scale and move each shape individually...
@Joe Same way on Fireworks— no reason to label when you just reach-out and grab what you want.
Dump a box of crayons on the floor and pick-up the yellow one. DONE. You didn't have to look for the arbitrary label telling you which one was yellow.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter