Brackets – jeden z edytorów, o których pisałem w poprzednim wpisie, jakiś czas temu otrzymał nowe rozszerzenie o nazwie Extract, które zmienia podejście do kodowania stron internetowych.

Pozwala ono dosłownie wyciągnąć z pliku PSD informacje dotyczące elementów i warstw, takie jak użyte kolory, czcionki, gradienty czy nawet wymiary i odstępy miedzy elementami.

A to wszystko możesz zapisać jako czysty kod CSS.

Jak działa Brackets Extract?

Na początku musisz zainstalować sobie wtyczkę Extract (Preview) – czy to bezpośrednio w Bracketsie czy po prostu pobierając instalator Bracketsa razem z nią.

Gdy masz ją gotową, w prawym górnym rogu na samym dole, pod ikonką klocka pojawi się dodatkowa ikonka – dwa prostokąty ze strzałką. Kliknij na nią!

Powinno pojawić Ci się okienko startowe, w którym masz otwarty przykładowy plik PSD. Możesz na nim potrenować sobie korzystanie z Extracta.

Jak widzisz po lewej – masz już gotowe warstwy z tekstem, tłami itd.

Brackets Extract - przykładowe warstwy

 

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jak edytować swój własny plik PSD?

Załóżmy, że dostajesz od pracodawcy pliki PSD nowej strony, którą musisz zakodować do HTML/CSS/JavaScript.

Dla przykładu użyłem darmowych plików z tej strony.

Na początek musisz taki plik wysłać na serwer Adobe. Aby to zrobić, kliknij na “Open a PSD…”.

Jeśli nie posiadasz jeszcze konta na Creative Cloud, będziesz musiał je założyć, bo to fundament działania tego rozszerzenia. Brackets pobiera informacje, które generowane są bezpośrednio na stronie Adobe.

Brackets Extract - otwórz plik PSD

Kiedy już plik zostanie przetworzony, zauważ, że tak jak poprzednio pojawił się jego podgląd oraz warstwy, z których możesz wyciągać informacje. Teraz możesz na żywo pobierać wybrane właściwości jakiejś warstwy i umieszczać je w swoim projekcie. Wszystko jest dosyć intuicyjne w obsłudze.

Adobe/Brackets Extract - podgląd pliku PSD

Jeśli chcesz dowiedzieć się jakie rozmiary ma dany element, kliknij na niego, a Brackets Extract pokaże Ci skróconą listę właściwości.

Magia zaczyna się dziać wtedy, gdy przejdziesz do Twoich stylów CSS.

Naciśnij Ctrl + Spacja i zauważ, że oprócz domyślnych właściwości podpowiadanych przez Bracketsa, masz również te dotyczące bezpośrednio pliku PSD.

Adobe/Brackets Extract - podpowiedzi w stylach CSS

Możesz nawet jednym kliknięciem wyeksportować sobie tło danej warstwy i od razu wstawić je do CSSów – zostanie automatycznie przeniesione do Twojego folderu z obrazkami. W ciągu kilku sekund zrobisz to samo, co musiałbyś normalnie robić przez ponad minutę w programie graficznym.

Jeśli chcesz zmierzyć np. odstępy między warstwami czy elementami, zaznacz kilka z nich. Najpierw jedną, potem przytrzymaj Shift i kliknij na następną.

Od razu pojawi się podpowiedź, z której będziesz mógł sobie skopiować powstałe wymiary, zmienić jednostki na procenty lub cokolwiek innego, co się Tobie podoba.

Prawda, że świetna funkcja?

Od dawna brakowało takiego narzędzia, które pozwoliłoby połączyć design z kodowaniem. Oby Extract rozwijał się dalej i w dalszym ciągu ułatwiał nam, programistom, często żmudną pracę.

Brawo Adobe!

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

    • No niestety, wielka szkoda.
      Ale też nic straconego, bo jest wiele narzędzi, które w tym pomagają.
      Jedna z możliwości, to: zaloguj się na swoje konto w Adobe i wrzuć jakiś plik PSD, a potem przejdź do zakładki Extract. Będziesz miał takie same funkcje, jak w przypadku Extracta w Bracketsie, a nawet większe.
      Inna możliwość, to np. Avocode.

  • >