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

1. 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
2. zaokrąglanie rogów elementów – różne dla różnych rogów uzyskujemy poprzez
   1. 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
   2. 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
   3. lub po zaznaczeniu w polu poniżej wprowadzić indywidualną wartość dla tego rogu
3. bezpośrednie zaznaczenie elementu poprzez cmd+click, nie poprzez podwójne kliknięcie na element
4. zaznaczenie wielu eleemntów – cmd+click na element +shift+click na kolejne elementy
5. przestrzeń i wyrównanie – zaznaczamy obiekty i z górnego paska wybieramy sposób wyrównania –
   1. horyzontalnie do lewej, do środka, do prawej
   2. wertykalnie do góry, środka lub dołu
   3. przestrzeń pomiędzy elementami ułożonymi horyzontalnie
   4. przestrzeń pomiędzy elementami ułożonymi wertykalnie
6. 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
7. powielenie elementu – zaznaczamy element, cmd+D i zostaje on powielony dokładnie w tym samym miejscu co orginał
8. 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
9. przesuwanie elementu nad lub pod –
   1. z górnego paska menu poprzez backward lub forward
   2. 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
10. wprowadzanie wartości jako równań matematycznych np. do szerokości elementy możemy dać 44+28/2
11. własne kształty gwiazdy przez zmianę promienia (jak blisko środka są ramiona) i ilości punktów ramion
12. kopiowanie styli css – poprzez prawy klawisz myszy na danym elemencie i Copy CSS Attributes
13. 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
14. 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