W artykule:
W 2008 roku powstała mało znana firma programistyczna Bohemian Coding i stworzyła Sketch. Aplikacja została utracona w ogólnym zamieszaniu w Internecie przez długi czas, ale ostatnio wystartował – i słusznie.
Sketch 3 jest teraz nie tylko realną alternatywą dla Photoshopa i Illustratora, ale przewyższa go pod wieloma względami, zwłaszcza jeśli koncentrujesz się na projektowaniu stron internetowych.
To oczywiste, że szkic został stworzony z myślą o stronach internetowych, ale dbałość o szczegóły i troska włożona w interfejs użytkownika sprawia, że jest on świetny do wielu rodzajów prac projektowych. Integruje się nawet z wieloma różnymi usługami, w tym InVision.
Używam go do wielu moich projektów i nie mogę go wystarczająco polecić.
W tym artykule omówię, do czego jest zdolny Sketch i wskażę niektóre funkcje, które sprawiły, że wybrałem go zamiast Photoshopa dla większości moich potrzeb projektowych.
Zanim Zaczniemy
Zanim przejdziemy do sposobu korzystania ze Sketcha, należy zwrócić uwagę, że jest on dostępny tylko dla użytkowników OS X. Niestety, deweloperzy nie rozważają obsługi Sketcha w systemach Windows lub Linux. Zazwyczaj staramy się zaspokoić potrzeby zarówno użytkowników Windows, jak i Mac, ale w tym przypadku trudno to zrobić, ponieważ na tych innych platformach nic nie zbliża się do jakości Sketcha.
Być może najbliższą aplikacją jest Adobe Fireworks, który koncentruje się na tworzeniu stron internetowych. Niestety Adobe wycofało ten produkt, ale nadal można go używać. Jest dość solidny i wolny od błędów, ale haczyk jest tam po prostu nie będzie żadnych nowych wersji.
Korzystanie Ze Szkicu: Wstawianie Elementów
Pierwszą czynnością, którą prawdopodobnie wykonasz, gdy zaczniesz używać szkicu po raz pierwszy, jest wstawienie nowego elementu.
Najłatwiej zacząć od kształty, z których jest osiem: linia, strzałka, prostokąt, owal, Zaokrąglony prostokąt, gwiazda, wielokąt i trójkąt.
Po prawej stronie widać prostokąt ze zmodyfikowanymi właściwościami.
Za pomocą panelu Inspektor właściwości można zmieniać wiele aspektów kształtu, w tym jego rozmiar, położenie, promień obramowania, krycie, mieszanie, wypełnienia, obramowania, cienie i inne. Co najważniejsze, możesz przypisać wiele wypełnień, obramowań i cieni, aby tworzyć bardziej złożone projekty.
Na początku myślałem, że korzystanie z panelu Inspektora będzie uciążliwe, ale jak się okazało, całkiem się myliłem. Tworząc nową stronę internetową chcesz być w stanie dać deweloperowi doskonale zaplanowany projekt. Jeśli programista może zmierzyć odległość między dwoma widżetami lub odległość między tytułem postu a metadanymi, nie będzie musiał wracać do ciebie, aby dowiedzieć się tych szczegółów i maleńkich informacji.
Panel Inspektora pozwala idealnie umieszczać rzeczy w pikselach. W połączeniu z doskonałymi automatycznymi przewodnikami, nigdy nie pomyślisz o hicie Photoshopa i nie przegapisz automatycznego przyciągania!
Jeśli jesteś wektor rodzaj osoby, której możesz użyć krzywych Beziera, tak jak w Photoshopie lub Illustratorze, aby stworzyć dowolny kształt. Znalazłem świetny film o tym, jak działają krzywe Beziera, jeśli zawsze zastanawialiście się, co dzieje się w tle – jest super interesujący!
Jak widać na powyższym zrzucie ekranu, możesz dodać wiele tła, wiele ramek, zmienić krycie, dodać cienie i robić wszystkie inne wspaniałe rzeczy z niestandardowymi kształtami, tak jak w przypadku gotowych kształtów.
Wstawianie tekst oraz obrazy to oczywiście standard. Wystarczy nacisnąć „T”, kliknąć i rozpocząć pisanie. Możesz wstawiać obrazy, przeciągając je i upuszczając do aplikacji lub kopiując-wklejając ze schowka. To, co uwielbiam w umieszczaniu obrazu, to to, jak łatwo jest przyciąć obraz po umieszczeniu go. Kliknij dwukrotnie, wybierz i kliknij przyciąć.
Obszary robocze to kolejna z moich ulubionych funkcji. Pozwalają one podzielić obszar roboczy na różne segmenty. Jest to idealne rozwiązanie do tworzenia side-by-side pulpitu i widoku mobilnego. Istnieje kilka gotowych obszarów roboczych dostępnych do użycia, ale można łatwo tworzyć własne niestandardowe.
Wstawianie symbole to potężna funkcja, pozwalająca pracować szybciej i bardziej konsekwentnie.
Symbol jest specjalnym typem zgrupowanego obiektu. Możesz utworzyć przycisk ” Kup ” i uczynić go symbolem. Ten symbol będzie zawierał tło i tekst przycisku. Następnie możesz wstawić ten symbol w dowolnym miejscu, a edycja jednego z nich zaktualizuje wszystkie pozostałe. Przyjrzymy się temu nieco bardziej szczegółowo poniżej.
Organizacja Pracy
Organizacja to kolejny obszar, w którym Sketch przewyższa moim zdaniem Photoshopa. Istnieje pięć funkcji, których można użyć do stworzenia super zorganizowanego i logicznego dokumentu: strony, obszary robocze, warstwy, grupy i symbole.
Strony może być używany na przykład do wyświetlania różnych stron witryny. Każda strona ma oczywiście swój własny zestaw warstw. To tak jakby mieć różne arkusze kalkulacyjne w dokumencie Google.
Obszary robocze może być używany do organizowania różnych widoków twojego projektu. Używam ich do tworzenia widoków dla wersji tabletów i/lub mobilnych tej samej witryny. Wykorzystałem również obszary robocze do dokumentowania elementów projektu. Stworzyłem obszar roboczy dla przycisków, jeden dla typografii, jeden dla wspólnych elementów i tak dalej.
Warstwy pracuj tak, jak w Photoshopie lub innym oprogramowaniu obsługującym warstwy. Warstwy są uporządkowane z góry na dół, im wyższa warstwa znajduje się na liście, tym bliżej „przodu” widoku. Warstwy mogą być prostymi obiektami (tekst, kształt, obraz itp.), lub mogą to być grupy lub symbole.
Grupy są pogrupowane proste warstwy. Wystarczy polecenie lub przesunięcie kliknięcia warstw, aby wybrać wiele z nich i kliknij przycisk grupy (lub naciśnij Command + G), aby utworzyć grupę.
Po utworzeniu grupy wszystkie warstwy, które zawiera, wejdą do folderu, który możesz (i powinieneś) nazwać.
Kliknięcie na dowolny element w grupie w widoku głównym pozwoli Ci przenieść całą grupę-super poręczny.
Możesz kliknąć dwukrotnie w głównym obszarze, aby wejść do grupy i dotrzeć do elementu w niej, aby manipulować tylko tym elementem.
Symbole są specjalne grupy. Symbol działa tak samo jak grupy, ale zmiana symbolu w dowolnym miejscu w dokumencie automatycznie zaktualizuje wszystkie inne symbole tego samego typu. Jest to bardzo przydatne do tworzenia przycisków i innych wspólnych elementów, które są opisywane w całym projekcie.
Tekst jest zawsze ogromną częścią projektu,a Photoshop nie ułatwia tego. Sketch umożliwia dodawanie stylów tekstu, co znacznie zwiększy spójność twojej pracy. Działają tak, jak można się spodziewać po stronach Microsoft Word lub Apple. Wybierz warstwę tekstową i wybierz styl, aby natychmiast zmienić wszystkie jej właściwości. Co najlepsze, modyfikowanie stylu w dowolnym miejscu spowoduje aktualizację tekstu z tym samym stylem wszędzie. Jest to świetne rozwiązanie do tworzenia spójnych widżetów, tytułów stron i innych materiałów tekstowych na wielu obszarach roboczych i wielu stronach
Wtyczki Sketch
Aby Sketch był jeszcze lepszy, możesz użyć wtyczek. Istnieje mnóstwo dostępnych na stronie wtyczek i znajdziesz kilka więcej na Github.
Jednym z moich ulubionych jest wyrównanie linii bazowej tekstu. Wyrównanie tekstu jest nieco trudne, ponieważ wyrównanie w pionie nie jest prawidłowe ze względu na wysokość wiersza elementu tekstowego. Ta wtyczka oblicza różnicę i wyrównuje tekst dokładnie do środka wybranego elementu. Idealnie dopasowane przyciski, nadchodzę!
Uwielbiam również wtyczkę Unsplash It Sketch. Narysuj prostokąt i chwyć losowy obraz z zawsze niesamowitego Unsplash.
Spójrz na to demo od twórcy:
Palety szkicu są przydatne w projektach, w których pracujesz z ustawioną paletą kolorów (prawdopodobnie wszystkie projekty). Możesz bardzo łatwo zapisać i załadować kolory, a następnie wybrać je w dowolnym momencie, zgodnie z oczekiwaniami.
Tworzenie danych testowych to zawsze duża część naszej pracy jako projektantów i programistów. W pracach projektowych, to w dużej mierze składa się z wielu kopiowanie-wklejanie, a następnie wpisywanie. Istnieje kilka świetnych wtyczek, które pomagają w tym zadaniu. Personas for Sketch pozwala na generowanie danych użytkownika bezpośrednio w dokumencie, oto jak (dzięki autorowi projektu):
Demo wtyczki personas dla Sketcha
Uwielbiam, jak wtyczki zostały wykonane dla niszowych potrzeb projektowych, jak również.
Pobieranie kompozycji pozwala wybrać elementy, określić autora, a następnie poczekać, aż okładki albumów zostaną pobrane z Last.fm prosto do twojego projektu. Oto demo, dzięki uprzejmości autora wtyczki.
Demo wtyczki Sketch artwork fetcher
Istnieje wiele innych naprawdę przydatnych wtyczek, ale myślę, że te naprawdę pokazują moc szkicu, możliwość korzystania z usług stron trzecich, aby umożliwić Ci szybszą i lepszą pracę. Jeśli masz jakieś ulubione wtyczki do Sketch, podziel się nimi w komentarzach!
Dlaczego Sketch jest lepszy?
Dla mnie Sketch był darem niebios. W końcu porzuciłem Photoshopa na rzecz projektowania stron internetowych! Mam kilka powodów, które omówię szczegółowo, abyś mógł zobaczyć, skąd pochodzę:
1. Możesz Uzyskać Super Precyzyjne
Sketch daje lepszą precyzję we wszystkich kierunkach. Jednym z przykładów jest konfigurowalna siatka i sposób-sposób lepsze Auto-przewodniki, które faktycznie pomagają, w przeciwieństwie do bycia w drodze (nawet pozwalając ustawić elementy w równej odległości).
Lubię również możliwość projektowania według liczb, wpisywania wartości pikseli. Prowadzi to do idealnych projektów, które minimalizują czas komunikacji i maksymalizują wydajność i przejrzystość.
2. To proste podejście wektorowe
Uwielbiam niektóre wektory, ale tym bardziej kocham umiejętność łatwej pracy z nimi. Photoshop niepotrzebnie komplikuje to z jakiegoś powodu.
Mam najnowszą wersję programu Photoshop CC i podczas próby dodania ikony SVG do projektu pojawia się błąd: „nie można umieścić dokumentu” 1445368362_bubble.svg ’ ponieważ żaden parser lub format pliku nie może otworzyć pliku.”Jestem pewien, że firma, która tworzy dedykowany edytor wektorowy, mogłaby to rozgryźć. W szkicu po prostu przeciągam i upuszczam ikonę SVG do aplikacji i jest ona wyświetlana tak, jak można się spodziewać.
Innym aspektem edycji wektorowej, który uwielbiam, są cztery przyciski do union, subtract, intersect i difference. To pozwala mi wybrać dwa kształty i połączyć je, aby stworzyć coś ładnego. Aby zrobić dymek poniżej dodałem prostokąt, a następnie Trójkąt. I inteligentne prowadnice, aby je prawidłowo ustawić, wybrał je oba i używane Unii, aby je w jednym kształcie. Zbyt łatwe.
3.It obsługuje importowanie SVG
Już mówiłem o tym, jak można przeciągać i upuszczać obrazy SVG (często używam ikon) bezpośrednio do aplikacji. Byłem mile zaskoczony, kiedy mogłem również rozwinąć folder obrazu, aby uzyskać wszystkie warstwy i edytować samą ikonę.
4. Jakie to niesamowite w maskowaniu
Maskowanie to kolejny obszar, w którym Sketch robi to w sam raz – nie spodziewałem się, że będzie tak gładko!
Aby utworzyć zaokrąglony obraz, wszystko, co musiałem zrobić, to narysować nad nim okrąg, wybrać obie warstwy i nacisnąć przycisk maski. Voila, okrągłość osiągnięta!
To, co się dzieje, jest również bardzo oczywiste w panelu Warstwy, ogromny plus dla ludzi, którzy, jak ja, nie są naprawdę odpowiednimi projektantami.
5. Doskonały Odstęp Pikseli
Istnieje wiele sytuacji, w których musisz równomiernie rozmieścić rzeczy, a Sketch pomaga Ci to osiągnąć.
Utwórz obiekty, zaznacz je, kliknij prawym przyciskiem myszy, a u dołu menu kontekstowego zobaczysz opcje dystrybucji w poziomie i pionie. Działa jak urok. Każdy. Singiel. Czas.
6. Eksportowanie jest łatwe
Sketch oferuje również niezwykle potężną opcję eksportu. Tak bardzo, że całe samouczki powstały, aby pokazać, jak uzyskać dokładnie to, czego chcesz.
Można eksportować całe strony, obszary robocze, a nawet określone elementy.
7. Jest szybki
Słyszałem raporty o problemach z wydajnością w Sketch, ale musiały one zostać naprawione przed rozpoczęciem korzystania z aplikacji, ponieważ nigdy nie miałem problemu – wręcz przeciwnie.
Zrobiłem redesign strony pod koniec zeszłego roku i plik Photoshop był gdzieś w regionie 100MB. Mam dość potężny iMac i czasami się na nim dusił, musiał czekać wieki na niektóre uprawy i uzyskać niestabilną wydajność podczas przewijania dokumentu. Nie chcę nawet wchodzić w to, co się stało, gdy chciałem szturchać kilka elementów (5-6 sekund oczekiwania).
Odtworzyłem ten sam projekt w szkicu i plik był o 25MB-czwarta wielkość pliku PSD. Nie doświadczyłem żadnych opóźnień, bez względu na to, co zrobiłem-wszystko było o wiele bardziej snappier niż w Photoshopie. Właściwie wybrałem wszystkie elementy na stronie i popchnąłem je, od razu poszły 10px w lewo. Mogłem nawet kliknąć i przeciągnąć wszystko wokół, zostało renderowane bez żadnych problemów.
8. The Sweet Spot
Dla mnie w SketchU jest coś niematerialnego, co czyni go lepszym niż cokolwiek, czego kiedykolwiek używałem do tworzenia stron internetowych. Myślę, że duża część tego jest taka, że działa tak, jak można się tego spodziewać. Mam kilka przykładów, aby to zademonstrować.
Możesz dodać prostokąt i zaokrąglony prostokąt osobno. W jednym przypadku dodałem zwykły prostokąt i zdałem sobie sprawę, że prawdopodobnie chcę zaokrąglony. Zamiast go usuwać i tworzyć nowy kształt, odkryłem, że mogę kontrolować promień obramowania i po prostu dodałem 3px.
Zaraz potem chciałem stworzyć prostokąt, w którym tylko dwa rogi były zaokrąglone. Myślałem, że będę musiał stworzyć dwa kształty i połączyć je, ale zdałem sobie sprawę, że promień może być kontrolowany dla każdego rogu osobno.
Nie pamiętam wszystkich, ale było co najmniej 5-6 momentów, w których uroniłem łzę, bo chciałem zrobić coś w konkretny sposób i Sketch miał taką możliwość, albo robił rzeczy jeszcze lepiej. Nie będzie lepiej!
Strony Internetowe Wykonane Za Pomocą Sketch
Osobiście wykorzystałem Sketch do projektowania projektów 3-4 WordPress, w tym przeprojektowania strony internetowej o nazwie Bitesize Bio i nadchodzącego przeprojektowania popularnego bloga technologicznego gHacks.
Buty sportowe firmy Fleet Feet został również zaprojektowany całkowicie w szkicu:
Oprócz niektórych z tych rzeczywistych przykładów, możesz znaleźć kompletne koncepcje witryny jako pliki szkiców, które możesz wykorzystać jako podstawę do własnego projektu lub po prostu dowiedzieć się trochę o tym, jak inni tworzą rzeczy.
Doskonałym przykładem jest ta koncepcja portfolio:
Używanie szkicu do następnego projektu
Zacząłem używać Sketcha na początku tego roku i, jak widzicie, stałem się całkiem fanatykiem.
Jeśli jesteś zainteresowany tym, co inni myślą, że istnieje wiele recenzji. Oto niektóre z osobistych historii, które mogą być interesujące, jeśli rozważasz zmianę:
- Rok z wykorzystaniem szkicu
- Miesiąc ze szkicem 3
- Odkrywanie Szkicu
- Sketch vs Photoshop
- Organizowanie rozwoju Sketch 3 iOS
- Co pomyśleliśmy o Sketch 3 po raz pierwszy
To była jedna z tych aplikacji, w których nie miałem nawet krzywej uczenia się (lub po prostu bardzo płytkiej). Pokochałem go od razu, ponieważ pozwolił mi robić to, co chciałem, dokładnie tak, jak chciałem i z funkcjami, za którymi zawsze tęskniłem w Photoshopie.
Programiści sketcha nieustannie pracowali nad poprawą pojawiających się błędów, prawie zawsze z powodzeniem. Najbardziej wymowny scenariusz jest taki, że nawet zanim naprawiono wiele błędów, Wiele osób go przejrzało. Prawie wszystkie recenzje, które czytałem, mówiły coś w stylu: „podczas gdy Sketch ma wiele błędów, nasz zespół nadal uznał, że jest lepszy w projektowaniu interfejsu użytkownika.”Czuję się tak samo, każda negatywna strona tej aplikacji jest tak łatwo przeważyć przez wszystkie amazingness Zawiera, że przełączanie z powrotem do czegokolwiek innego wydaje się zupełnie niepotrzebne.
Czas porzucić Photoshopa? Jeśli jesteś projektantem stron internetowych w sercu, to może. Photoshop ma zaawansowane możliwości edycji zdjęć i wiele dodatkowych funkcji, których Sketch nie ma, ale chodzi o to, że nie jest potrzebny. Nadal mam zainstalowanego Photoshopa, ale w przyszłym miesiącu zamierzam go całkowicie porzucić i zamiast tego użyć Pixelmatora. Robi wszystko, czego potrzebuję za ułamek kosztów.
Tagi:
