Maj
31
2016

Extract for Brackets – krok naprzód w tworzeniu front endu

Adobe Photoshop, mimo swoich ograniczeń, jest nadal najważniejszym narzędziem, stosowanym przy tworzeniu stron internetowych. Jeśli zajmujesz się tworzeniem stron internetowych i dostajesz od grafiki przygotowany layout, prawie na pewno będzie on w formacie PSD. Co to oznacza dla programisty?

Po pierwsze, skazuje go na korzystanie z drogiego ekosystemu oprogramowania od Adobe. Po drugie, prowadzi do konieczności ciągłego przełączania się między kilkoma oknami – przeglądarką, edytorem kodu i Photoshopem. Sam Photoshop również nie ułatwia pracy z layoutem i do przełożenia pliku PSD na HTML i CSS, trzeba sprawdzać parametry porozrzucane w kilku miejscach.

Czy można ułatwić proces tworzenia stron WWW na podstawie layoutu, bez używania kombajnów, takich, jak Adobe Dreamweawer?

hero

Magiczna opcja Extract for Brackets.

Brackets z dodatkiem Extract (dostępne także w formie jednej paczki) na pierwszy rzut oka jest prostym edytorem tekstu, skierowanym w stronę osób tworzących strony internetowe. Na prawym pasku bocznym znajduje się przycisk, po którego naciśnięciu zaczyna się magia – służy on do wczytania pliku PSD z użyciem chmury Adobe. Logujemy się na nią za pomocą założonego konta.

——————————————————————————————————————————-

Zobacz kurs Photoshop projektowanie stron -> TUTAJ

——————————————————————————————————————————-

Na dole ekranu pojawia się wtedy lista naszych plików PSD, z możliwością dodania kolejnego pliku. Po wybraniu naszego projektu, w edytorze mamy podgląd pliku PSD nawet wtedy, gdy nie mamy zainstalowanego Photoshopa. Program nie oferuje edycji pliku, ale zamiast tego, zyskujemy możliwość dowolnego przybliżania i oddalania obrazu. Możemy także przeglądać warstwy.

Praca z CSS

Na pewno zadajesz sobie pytanie, czy ten edytor, umożliwi Ci zakodowanie PSD do HTML za pomocą jednego kliknięcia. Niestety, taki program nie powstanie jeszcze przez wiele lat. Brackets ma inne zadanie – znacznie przyśpiesza pracę przy wpisywaniu HTML.

Po kliknięciu w element pliku PSD, możesz przejść do pliku CSS i po wciśnięciu spacji i przycisku control, zobaczysz listę podpowiedzi. Brackets pobiera takie parametry, jak na przykład:

  • cień tekstu

  • wysokość linii

  • wymiary elementu

  • czcionkę

  • przezroczystość

  • i wiele więcej

Dzięki temu, nie musisz za każdym razem wpisywać tych właściwości z „palca” – po prostu zacznij pisać nazwę parametru, a program sam podpowie Ci, jego wartości. Co więcej, aplikacja pokazuje najważniejsze parametry w jednym miejscu, a nie porozrzucane po oknach programu, jak to ma miejsce w zwykłym Photoshopie.

maxresdefault (1)

Pomiar odległości

Wymiarowanie odległości w plikach PSD to żmudna i nudna czynność, wymagająca dużej precyzji użytkownika. Możesz ją uprościć, korzystając z Brackets.

Po wybraniu elementu, program podpowiada jego wymiary. Dodatkowo, po zaznaczeniu dwóch elementów, Brackets podpowie Ci, jakie są odległości między nimi. Ta opcja jest na tyle wygodna, że skłania do zastanowienia się, dlaczego nie ma jej w zwykłym programie. Aplikacja pokazuje także informacje o położeniu warstwy.

Wydzielanie obrazów z pliku

Photoshop oferuje kilka opcji zapisania obrazka z warstwy do osobnego pliku, jednak żadna z nich nie jest tak wygodna, jak zastosowanie Brackets. Wystarczy kliknąć w obrazek i wpisać w oknie HTML lub CSS, „img src” lub „background-image” – aplikacja sama zaproponuje zapisanie zaznaczonego obrazka na dysku, w ostatnio używanym folderze, oraz wstawienie jego nazwy w ścieżkę.

Zauważyłem, że ta opcja potrafi spłatać figla i na przykład zapisać obrazek w folderze CSS, szczególnie, gdy często przełączamy się między folderami. Mimo to wykonanie kilku akcji Photoshopa, za pomocą jednego kliknięcia myszą i wpisania „img”, sprawdza się doskonale.

——————————————————————————————————————————-

Zobacz kurs Photoshop dla web designera -> TUTAJ

——————————————————————————————————————————-

Edytor pomaga także w złączeniu kilku warstw. Opcje zapisu warstw są ograniczone (nie ma na przykład możliwości ustawienia jakości), ale i tak umożliwiają wygodniejszą pracę z PSD, niż inne edytory, jak GIMP czy nawet Photoshop Elements. To także bezkonkurencyjne rozwiązanie, gdy pracujemy na cudzym komputerze, na którym nie mamy licencji Photoshopa, albo gdy mamy starszy komputer z zainstalowanym Linuxem i chcemy podejrzeć plik PSD. Brackets działa na systemie Linux, Windows oraz na komputerach Mac.

maxresdefault

Minusy Extract for Brackets

Aplikacja na obecnym etapie rozwoju, znacznie przyśpiesza pracę z plikami PSD, jednak moim zdaniem jest jeszcze za wcześnie, by móc zupełnie odinstalować Photoshopa.

Brackets jako edytor tekstu, może zdenerwować długim czasem uruchamiania się, oraz „myśleniem”, podczas zabawy z plikami PSD. Problemem staje się także mignięcie programu przy szybkim przełączeniu się na inne okno.

Największym problemem, jaki zauważyłem podczas pracy z edytorem, jest to, że odczyty z Brackets nie zawsze są takie jak w pliku PSD – program czasem przekłamuje na przykład wielkość czcionek. Myślę, że ten błąd zostanie wkrótce naprawiony i praca przy kodowaniu, stanie się znacznie przyjemniejsza.

PS – podobne opcje są dostępne także w Adobe Extract, programie dostępnym w płatnym abonamencie Adobe. Współpracuje on z Adobe Dreamweaver.

Inne opcje, dla których warto korzystać z Brackets

Jeśli do tej pory, Twoim ulubionym edytorem tekstu był Sublime Text, Atom czy dobrze znany Notepad++, do zmiany na Brackets, może Cię przekonać na przykład:

  • Kilka przydatnych dodatków, zainstalowanych wraz z edytorem. Jest to na przykład JSHint oraz walidator HTML.

  • Możliwość edytowania kodu CSS, w pliku HTML – możesz kliknąć w nazwę klasy i następnie wybrać opcję edytuj CSS i wybrać odpowiedni plik. Dzięki temu, nie musisz przełączać się między HTML i CSS.

  • Live Preview – program nie tylko odświeża automatycznie zawartość okna przeglądarki, ale także pozwala na bieżąco śledzić zmiany (bez zapisywania!) i podświetla ładnie edytowane elementy w kodzie.

  • Obsługa rozszerzeń, umożliwiających między innymi łatwiejszą pracę z Git, rozszerzenia składni i inne opcje. Rozszerzania instaluje się znacznie prościej niż w innych edytorach – wystarczy wpisać nazwę programu w odpowiednim miejscu.

Podsumowanie

Brackets to bezpłatny edytor tekstu przeznaczony dla osób, chcących tworzyć strony i aplikacje internetowe. Moim zdaniem, stanowi on pomost między Photoshopem, a kodem, znacznie uprzyjemniając naszą pracę.

Extract for Brackets to opcja, która wymaga jeszcze dopracowania, pod względem wygody korzystania, oraz 100% dokładności danych, ale nawet bez tych zmian, umożliwia ona szybszą prace z kodem. Jeśli jesteś przyzwyczajony do pracy z dodatkami, takimi, jak Emmet, nie ma problemu – bez problemu wyposażysz w nie edytor od Adobe.

Polecam pobranie programu ze strony producenta http://brackets.io/ i samodzielne zapoznanie się z jego opcjami.


Podobne wpisy

O autorze: Kamil Naja

Przygodę z obrazem zaczął od fotografii. Photoshopa poznaje od 2006 roku i program ten wciąż zaskakuje go możliwościami. Zajmuje się także copywritingiem oraz tworzeniem stron internetowych. Prowadzi własną firmę.

Zostaw komentarz

Musisz być zalogowany aby dodać komentarz.

Polecane

Kategorie