Sketch
Podział na:
- Pages – lewa sekcja
- Artboards – lewa sekcja
- Tools – górny pasek menu z ikonami
- inspektor – po prawej stronie, wyświetla właściwości zaznaczonego elementu
Dodanie nowego Page – przez ikonę 'plus’ obok nagłówka.
Wyszukiwarka na dole po Artboardach i warstwach.
Wyrównanie elementów względem siebie z paska opcji wyrównania (góra prawej sekcji)
Customize Toolbar – kliknięcie prawym przysiekiem na obszar paska narzędzi
cmd+D – duplikuje zaznaczoną warstwę, artboard, element
cmd – zmniejsza widok (zoom out)
cmd + zwieksza widok (zoom in)
Artboard
wykaz wszystkich zebranych skrótów do Sketch
dodanie nowego – A z klawiatury
zmiana backgroundu – z opcji po prawej stronie
Eksport artboardu w różnych rozdzielczościach lub formatach – dodanie kolejnych poprzez przycisk + po prawej stronie pod nagłówkiem Export
Elementy
Shapes
trzymając R z klawiatury – rysujemy prostokąt w Artboardzie
Kolory
Właściwości warstwy po prawej – Global colors i Documents colors.
Dodanie aktualnie wybranego koloru do Global lub documents colors poprzez ikonę +
Zmiana z RGB na HSL – poprzez ustawienie pod polem wyboru koloru
Graphic style
po stworzeniu elementu ze stylami, które chcielibyśmy powielać na innych elementach – z prawego meny Appearance – wybieramy Create new layer style
Po modyfikacji stylu możemy zostawić zmieniony na tylko tym jednym elemencie lub zaktualizować i nanieść zmianę na wszystkie poprzez wybranie opcji Update layer Style
Text style
po stworzeniu tekstu z określonymi stylami zapisujemy te ustawienia w sekcji właściwości elementu po prawej stronie – z Appearance (tam gdzie mamy zaznaczone – No text style) wybieramy Create new Text Style
Po modyfikacji stylu możemy zaktualizować na wszystkich tekstach – poprzez Update Text Style
Symbole
idealne dla elementów które często powtarzamy
pozwalają na grupowanie i zagnieżdżanie kolejnych elementów czy symboli w sobie nawzajem
Po stworzeniu pierwszego symbolu tworzy nam się przestrzeń (page) Symbols – tutaj mamy zgrupowane, wszystkie utworzone symbole.
Klikając w symbol, przeniesieni zostajemy do przestrzeni Symboli gdzie możemy je modyfikować, aby powrócić do Artboardu na jakim pracowaliśmy wystarczy kliknąć Return to instance
Kiedy dodajemy kolejne instancje symbolu np. Button, ale chcielibyśmy by tekst na nim był zalezny od kontekstu w jakim się znajduje, używamy opcji z panelu prawego Overrides
Kiedy zaznaczymy jeden z symboli i wybierzemy z prawego menu opcję Symbols możemy zastąpić obecny innym z listy
dla tekstów użytych w symbolach warto używać auto width by po podmianie nie załamywała się linia
nazewnictwo
użycie / w nazwie grupuje symbole i ułatwia ich wybieranie np. cells/label cells/info tworzy drzewo symbolu w którym z gałęzi cells mamy dwie opcje: labels i info
Grid layout
aby dodać własny grid zaznaczamy Artboard, potem View z górnego paska menu – Canvas/Layout Settings.
Otrzymujemy okno w którym mamy podane szerokość Artboardu, oraz możemy wprowadzić parametry Siatki takie jak ilość kolumn, szerokość kolumn, czy szerokość Guttera i tak samo ustawić wiersze. Po wprowadzeniu danych automatycznie przeliczane są pozostałe wartości.
Przydatny może również okazać się kalkulator do Grid’a.
Możemy również ustawić wypełnienie lub kolor lini siatki.
Lub ustawić wprowadzone parametry jako podstawowe.
Widoczność siatki na danym Artboardzie włączamy/wyłączamy poprzez klawisz ctr+L
Przydatne i użyteczne praktyki
- smart guides – zaznaczając element i przytrzymując klawisz Alt – pokazują się nam linie z wartościami do kolejnych obiektów, na które najedziemy kursorem
- zaokrąglanie rogów elementów – różne dla różnych rogów uzyskujemy poprzez
- rozdzielenie poszczególnych wartości średnikiem – 14;6;6;6 – rogi ida od górnego lewego zgodnie z ruchem wskazówek zegara, czyli potem mamy górny prawy i dolny prawy i dolny lewy
- lub klikniecie na dany prostokąt – tak by na rogach pojawiły się punkty oznaczone pusta kropką i przesuwamy z wybraniem jaką opcję dodać do opcji rysowania punktu
- lub po zaznaczeniu w polu poniżej wprowadzić indywidualną wartość dla tego rogu
- bezpośrednie zaznaczenie elementu poprzez cmd+click, nie poprzez podwójne kliknięcie na element
- zaznaczenie wielu eleemntów – cmd+click na element +shift+click na kolejne elementy
- przestrzeń i wyrównanie – zaznaczamy obiekty i z górnego paska wybieramy sposób wyrównania –
- horyzontalnie do lewej, do środka, do prawej
- wertykalnie do góry, środka lub dołu
- przestrzeń pomiędzy elementami ułożonymi horyzontalnie
- przestrzeń pomiędzy elementami ułożonymi wertykalnie
- eksportowanie grupy lub warstwy – poprzez przycisk z dołu prawej sekcji inspektora, poprzez dodatkowe klikniecie ikony + możemy ten sam element wyeksportować w różnych rozdzielczościach i formatach
- powielenie elementu – zaznaczamy element, cmd+D i zostaje on powielony dokładnie w tym samym miejscu co orginał
- wielokrotne powielanie elementy – trzymając klawisz alt zaznaczamy element i przesuwamy stworzony automatycznie duplikat i odsuwamy o konkretną odległość od oryginału, następnie bez trzymania kursora myszy z klawiatury wprowadzamy tyle razy kombinację cmd+D ile kopii, odsunietych o ustaloną wcześniej wartość potrzebujemy
- przesuwanie elementu nad lub pod –
- z górnego paska menu poprzez backward lub forward
- w pełni na górę lub w pełni na spód poprzez przytrzymanie klawisza alt – wtedy w górnym menu opcje mamy To back i To front
- wprowadzanie wartości jako równań matematycznych np. do szerokości elementy możemy dać 44+28/2
- własne kształty gwiazdy przez zmianę promienia (jak blisko środka są ramiona) i ilości punktów ramion
- kopiowanie styli css – poprzez prawy klawisz myszy na danym elemencie i Copy CSS Attributes
- kopie z rotacją – wybieramy kształt, który chcemy powielić, z górnego menu wybieramy Layer/Path/Rotate Copies i wybieramy ilość powtórzeń danego elementu. Następnie zaznaczając kółko w środku możemy ustawić położenie stworzonych kopi
- tekst na ścieżce – tworzymy ścieżkę, nakładamy na nią warstwę z tekstem i przy zaznaczonym tekście z górnego menu, wybieramy Text/Text on path – i zrobione
Masking
zgrupowane elementy i oznaczone ikonką strzałki wskazującej na kształt przynależnej do nich maski
Odpięcie jednego elementu z efektu maski – zaznaczenie go w liście wartst i z menu kontekstowego wybranie Ignore Underlying Mask
Tworzenie własnych kształtów
tworzymy dwa lub więcej kształtów które mają tworzyć docelowy kształt, zaznaczamy je wszystkie i z menu górnego wybieramy opcję połączenia kształtów:
- Union – otrzymujemy kształt połączonych zaznaczonych eleementów
- Substract – element wyżej wycina się z elementu niżej
- Intersect – część wspólna wszystkich elementów
- Difference – cześci osobne wszystkich elementów