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 :)
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.
@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 :)
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...
@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).
@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).
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...
31 Responses (page 1 of 2)
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.
7 months ago
Well done mate!! @Benjamin De Cock
7 months ago
Nice job! Find it interesting that you don't name your layers or group them?
7 months ago
@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 :)
7 months ago
@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.
7 months ago
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 :)
7 months ago
Something like this is always handy. Thanks Ben.
7 months ago
Very crisp work bud!
7 months ago
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]?
7 months ago
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 :)
7 months ago
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...
7 months ago
Real nice! First person to convert this to a psd wins though.
7 months ago
First document going into my Sketch iCloud :). Thanks!
7 months ago
Thanks for sharing, Ben!
I am giving Sketch a go and actually loving it. Needs PSD support though :)
7 months ago
@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".
7 months ago
@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).
7 months ago
@Radu No, it's been pretty fast with me so far.
7 months ago
@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).
7 months ago
Awesome to see resources for Sketch!!!. Sketch is great because it gives you the css gradient values for anything you select.
7 months ago
The document opens blank in Sketch? , Found it it was way off screen. Just a bug in sketch with different display settings.
7 months ago
Very *very* nice. It's a great starting point to see how powerful can Sketch.app be. Thanks for that @Benjamin De Cock
7 months ago
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
7 months ago
@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...
7 months ago
@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.
7 months ago