Eksportowanie plasterka w programie Sketch z przezroczystym tłem wokół

15

Za pomocą Sketch 3 chcesz wyeksportować ikonę, same ikony mają wymiary 24 x 24, ale mieszczą się w obszarze 32 x 32.

Nauczyłem się, jak to zrobić, łącząc dwie różne warstwy, jedną 24x24 i drugą 32x32, ale jest to żmudny proces. Muszę to zrobić dla każdej ikony.

Czy jest szybszy przepływ pracy?

Ariel Seidman
źródło
1
czy możesz wyjaśnić, co rozumiesz przez „obszar”? Jednolity kolor? Obszar roboczy? Kromka? A może potrzebujesz pliku w formacie 32 x 32 z ikoną 24 x 24?
spirala
Cześć Ariel, witaj w GDSE i dziękuję za pytanie. Wyjaśnij, na czym polega twój problem, jak pyta Spiral. Jeśli to możliwe, proszę zamieścić przykładowe zdjęcie. Dzięki! Jeśli chcesz dowiedzieć się więcej o witrynie, odwiedź centrum pomocy lub pinguj jednego z nas na czacie, gdy Twoja reputacja będzie wystarczająca (20). Kontynuuj wkład i ciesz się stroną!
Vincent

Odpowiedzi:

13

Kliknij, Aaby utworzyć obszar roboczy , wybierz rozmiar (lub ustaw własny, klikając +w prawym dolnym rogu) i rozpocznij eksport. Nie trzeba tworzyć dodatkowych warstw.

M. Appelman
źródło
7

To naprawdę bardzo proste, jeśli wiesz, jak to zrobić :)

Załóżmy, że masz ikonę o wymiarach 24x24px i chcesz, aby png miał wymiary 32x32px. Musisz utworzyć plasterek nad ikoną. Plasterek musi mieć rozmiar 32 x 32 piksele. Następnie zgrupuj plasterek i ikonę razem. Na koniec: kliknij plasterek, a w inspektorze zobaczysz coś takiego:

Okno inspektora

Upewnij się, że zaznaczyłeś opcję „Eksportuj tylko zawartość grupy”. Pozostałe opcje muszą być niezaznaczone.

W ten sposób wyeksportujesz przezroczysty plik png, nawet jeśli pod ikoną nie ma przezroczystego tła.

Inma
źródło
Nie mam tych opcji, czy będą przestarzałe? Korzystam z wersji szkicowej 56.2
Adriano Resende,
1

Jeśli chcesz wyeksportować tylko warstwę ikon (24 x 24), po prostu przeciągnij warstwę na pulpit.

Kilian
źródło
Byłoby miło. Niestety nie będziesz mieć ikon dla wyższych rozdzielczości ekranu.
Julian F. Weinert
1

Użyj tego, aby wyeksportować swoje aktywa. Problem z samym Szkicem i większością innych wtyczek polega na tym, że pomija niewidoczne warstwy podczas eksportowania. W rezultacie niewidoczne granice nie działają.

Próbowałem nawet zmniejszyć krycie granicy do 0, aby spróbować nakłonić Sketch do wyeksportowania. Ale natywny eksport Sketcha nie jest tak naiwny.

Możesz zobaczyć hordę wtyczek Sketch, które pomagają w łatwym eksportowaniu zasobów dla Androida. Mogą zmniejszyć liczbę wymaganych kroków, ale nie rozwiązuje to problemu granic.

Ten robi.

https://github.com/GeertWille/sketch-export-assets

Umożliwia eksportowanie zasobów dla systemów iOS, Android i Windows dla wszystkich rozdzielczości przy zachowaniu nienaruszonych granic.

Oszczędza wszystkie wysiłki obszaru roboczego.

Sarthak Pranit
źródło
1
Cześć Sarthak, czy mógłbyś wyjaśnić nieco więcej, co znajdziemy za linkiem, który podałeś i dlaczego odpowiada na pytanie? W ten sposób twoja odpowiedź jest nadal cenna na wypadek, gdyby link zerwie się później. Zgnilizna linków jest głównym powodem, dla którego tak naprawdę nie lubimy odpowiedzi zawierających tylko linki. Dziękujemy za twój wysiłek i wnieś swój wkład!
Vincent
0

Ta metoda działała dla mnie: umieść warstwę plasterka o odpowiednim rozmiarze powyżej warstwy, na której znajduje się ikona i upewnij się, że nieone zgrupowane .

Mam nadzieję, że to pomoże

wprowadź opis zdjęcia tutaj

cmdQ
źródło
0

Spędziłem więcej czasu, niż zajęłoby to przejście pojedynczo, ale nie poddałem się i znalazłem rozwiązanie, które działa dobrze:

  1. Skopiuj wszystkie ikony, które chcesz wyeksportować do nowego pliku
  2. Przekształć je w symbole
  3. Ponieważ stały się symbolami, będą miały własne obszary robocze (wystarczy dwukrotnie kliknąć jeden z symboli, aby przejść do strony symboli)
  4. Na stronie symboli upewnij się, że wszystkie symbole są zwinięte Widok> Lista warstw> Zwiń wszystkie grupy i zaznacz je wszystkie cmd + A
  5. Teraz możesz przejść dalej i wybrać opcję eksportowania i eksportowania wszystkich
  6. Voila! Jeśli odpowiednio je nazwiesz, będziesz mieć je również w schludnych małych folderach

mam nadzieję, że to pomogło!

Sójka
źródło
0

Wymyśliłem obejście nie polegające na tworzeniu oddzielnych obszarów roboczych. Jest trochę zuchwały, ale zadziałał dla mnie. Chciałem, aby ikony w moim projekcie mogły być eksportowane do Zeplina. Tworzenie nowych obszarów roboczych utrudniłoby programistom znalezienie ikon.

Zrobiłem kwadratowe tło z 1% kryciem w trybie mieszania „Ciemniej”. W ogóle tego nie widać. Następnie zgrupowałem to ikoną i sprawiłem, że grupę można wyeksportować. Super proste.

Sharkonaut
źródło