Creative Cloud — Ekstrakcja to nowa, bezpłatna funkcja usługi Zasoby Creative Cloud, która ułatwia eksplorowanie plików PSD (wraz z ich warstwami i kompozycjami) bezpośrednio w przeglądarce. Jest to szczególnie przydatne dla projektantów i programistów serwisów WWW, którzy mogą współużytkować pliki PSD, wydzielać informacje o projekcie i pobierać zasoby gotowe do wykorzystania produkcyjnego. Za pomocą usługi Ekstrakcja można wykonywać następujące operacje na pliku PSD w przeglądarce internetowej:

  • Kopiowanie tekstu i stylów CSS
  • Pobieranie informacji o kolorach, gradientach i czcionkach
  • Mierzenie odległości między dwoma elementami
  • Zapisywanie zoptymalizowanych zasobów graficznych o jakości produkcyjnej

Projektanci serwisów WWW i programiści korzystający z plików PSD mogą wykorzystać usługę Creative Cloud — Ekstrakcja, aby łatwiej i wydajniej przygotowywać kod na ich podstawie. Ekstrakcja rewolucjonizuje obieg pracy, ograniczając liczbę niezbędnych zadań i potrzebę wielokrotnego przechodzenia między aplikacjami.

Uwaga:

Ekstrakcja jest usługą generującą dane tylko do odczytu; nie można za jej pomocą edytować plików PSD.

Wyodrębnianie informacji o stylach

  1. Zaloguj się do serwisu Creative Cloud.
  2. Przejdź do sekcji Zasoby swojego konta Creative Cloud.
  3. Prześlij plik PSD, przeciągając go do obszaru Pliki lub używając opcji Wybierz plik. Możesz także przejść do pliku PSD, który został przesłany wcześniej.
  4. Kliknij miniaturkę pliku PSD, aby otworzyć go w widoku Ekstrakcja .
Plik otwierany w widoku Ekstrakcja

W widoku Ekstrakcja można eksplorować projekt PSD za pomocą przeglądarki internetowej. Dostępne są opcje eksploracji hierarchii warstw, wyświetlania różnych kompozycji warstw i wydzielania części pliku PSD w postaci nowych plików graficznych. Kliknięcie dowolnego elementu na podglądzie pliku PSD spowoduje zaznaczenie warstwy i podanie informacji o tej warstwie. Po zaznaczeniu elementu można wykonywać następujące działania:

Wyświetlanie i kopiowanie współrzędnych i wymiarów elementów

Kliknięcie pojedynczego elementu w pliku PSD powoduje wyświetlenie panelu informacyjnego. Na panelu tym jest wyświetlana szerokość i wysokość elementu, a także pozycje x i y warstwy tego elementu w projekcie.

Współrzędne i wymiary elementu projektu podane w pikselach (px)
Współrzędne i wymiary elementu projektu podane jako wartości procentowe (%)

Uwaga:

Kliknij dowolną wartość, np. Sz., W., X lub Y, aby skopiować ją do schowka.

Usługa Ekstrakcja może wyświetlać wartości pomiarów w pikselach albo jednostkach procentowych. Jeśli jest zaznaczony jeden element, to wartości procentowe szerokości i wysokości są podawane względem łącznej szerokości i wysokości projektu PSD. Jeśli są zaznaczone dwa elementy, przy czym jeden całkowicie mieści się w drugim, to szerokość i wysokość wewnętrznego elementu jest podawana względem wymiarów elementu zewnętrznego.

Wymiary elementów wewnętrznych są wyświetlane względem wymiarów elementów je obejmujących

Uwaga:

Kliknij dowolną wartość, aby skopiować ją do schowka.

Wyświetlanie odległości między dwoma elementami

Aby wyświetlić odległość między dwoma elementami, kliknij elementy, trzymając wciśnięty klawisz Shift. Informacje o odległości między elementami są przydatne podczas dobierania wartości marginesów lub odstępów wewnętrznych.

Odległość między dwoma elementami

Kopiowanie kodu CSS

Po zaznaczeniu elementu w projekcie PSD można skopiować jego styl CSS, klikając opcję Kopiuj CSS na niebieskim panelu informacyjnym. Kod CSS można także wyświetlić i skopiować w okienku Narzędzie do inspekcji stylów CSS.

Wyświetlanie kodu CSS

Uwaga:

Usługa Ekstrakcja obsługuje preprocesory. Na zakładce Style kliknij ikonę (strzałka w dół) obok pozycji CSS, aby wyświetlić opcje użycia preprocesorów CSS.

Opcja użycia preprocesorów CSS

Kopiowanie tekstu

Jeśli wybrany element zawiera tekst, kliknij pozycję Kopiuj tekst, aby skopiować go do Schowka.

Kopiowanie zaznaczonego tekstu do schowka

Wyświetlanie i kopiowanie informacji o czcionkach, kolorach i gradientach

Po otwarciu panelu Style można wyświetlać i kopiować informacje związane z czcionkami, kolorami i gradientami używanymi w projekcie (dokumencie PSD). Kliknięcie wyświetlonego rozmiaru czcionki, koloru, lub próbki gradientu umożliwia skopiowanie tych wartości do schowka.

Przykład wartości gradientu koloru

Po zaznaczeniu elementu używane w nim style tekstu i kolorów są wyróżniane na panelu Style.

Uwaga:

Dzięki integracji z usługą Adobe Typekit, funkcja Ekstrakcja zapewnia dostęp do tysięcy czcionek wysokiej jakości. Obok czcionek z biblioteki Typekit na panelu Style jest wyświetlana ikona Typekit (). Kliknięcie tej ikony Typekit powoduje, że usługa Ekstrakcja otworzy stronę danej czcionki w serwisie Typekit.

Gdy znajdziesz odpowiednią czcionkę WWW, dodaj ją do zestawu Typekit i utwórz odsyłacz do niej w kodzie produkcyjnym.

Informacje o czcionce i kolorze zaznaczonego elementu

Korzystanie z próbnika kolorów

Próbnik kolorów () umożliwia szybkie sprawdzanie koloru elementu w projekcie.

  • Wybierz narzędzie Próbnik kolorów, a następnie kliknij w dowolnym miejscu w projekcie. Próbnik wykryje kolor i doda go jako próbkę koloru do panelu Style. Pozwoli to wyświetlać i kopiować informacje o kolorze w postaci stylów CSS.
Narzędzie Próbnik kolorów

Wyodrębnianie zasobów graficznych

Usługa Creative Cloud — Ekstrakcja umożliwia zaznaczanie poszczególnych warstw w pliku PSD i wyodrębnianie zasobów graficznych (obrazów). Zasoby graficzne można wyodrębniać w postaci 8-bitowych i 32-bitowych plików PNG, plików JPG oraz plików SVG.

Wyodrębnianie obrazu

Na niebieskim panelu informacyjnym danego elementu kliknij ikonę i wykonaj następujące czynności:

  1. Przejrzyj ustawienia zasobów obrazów. W razie potrzeby wybierz inny obsługiwany format obrazu (PNG, JPG lub SVG).
  2. Jeśli generujesz zasób w formacie JPG, dostosuj jakość obrazu.
  3. W razie potrzeby wybierz opcję skalowania, na przykład „Skala 2×”. Obraz można skalować w przedziale od 0,1× do 5×.
  4. Kliknij przycisk Zapisz.
  5. Wygenerowany zasób znajduje się w panelu Zasoby. Zasoby są także dostępne w nowo utworzonym folderze obok pliku PSD w widoku Zasoby Creative Cloud. Folder otrzymuje nazwę -assets. Jeśli na przykład nazwa pliku to adventure.psd, folder zasobów będzie mieć nazwę adventure-assets.

    Kliknięcie miniaturki obrazu w panelu Zasoby spowoduje pobranie zasobu do komputera lokalnego.
Panel Zasoby

Uwaga:

Zalogowany użytkownik wyświetlający plik PSD w serwisie Zasoby Creative Cloud ma dostęp do zaawansowanych funkcji wyodrębniania zasobów. Za każdym razem, gdy pobiera się zasób, jest on dodawany do panelu Zasoby oraz folderu .psd_assets w serwisie Zasoby Creative Cloud. Aby pobrać zasób do własnego, lokalnego komputera, można kliknąć odpowiednią miniaturkę obrazu w panelu Zasoby.

Panel Zasoby nie jest dostępny, gdy kliknie się odsyłacz otrzymany od innego użytkownika, aby wyświetlić plik PSD. W takiej sytuacji można w zwykły sposób korzystać z funkcji Ekstrakcja, ale kliknięcie ikony spowoduje, że zasoby zaczną być pobierane bezpośrednio do komputera. Skorzystaj z funkcji zarządzania pobieraniem w przeglądarce, aby odszukać te zasoby na swoim dysku twardym.

Praca z warstwami

Na panelu Warstwy są wyświetlane wszystkie warstwy i grupy warstw zawarte w pliku PSD. Jako że usługa Creative Cloud — Ekstrakcja generuje dane tylko do odczytu, zmiany warstw nie są zapisywane w pliku PSD.

Panel Warstwy umożliwia przełączanie widoczności, zaznaczanie elementów warstw i wyodrębnianie zasobów.

Wyodrębnianie warstw lub grup warstw jako zasobów graficznych

Jako zasób obrazu można wyodrębnić warstwę lub grupę warstw w pliku PSD. Wykonaj następujące czynności:

  1. Kliknij panel Warstwy, aby wyświetlić hierarchię warstw w pliku PSD.
Hierarchia warstw

Uwaga:

Można wybrać wiele warstw w hierarchii na zakładce Warstwy i wyeksportować je jako pojedynczy nowy obraz, stanowiący kombinację wszystkich wybranych warstw.

  1. Sprawdź i przejrzyj hierarchię warstw. 
    • Aby rozwinąć grupę warstw, kliknij ikonę folderu () obok niej.
    • Kliknij element, aby wyróżnić odpowiednią warstwę/grupę warstw w panelu Warstwy.
  2. Zaznacz warstwę/grupę warstw, którą chcesz wyodrębnić jako zasób obrazu. Przytrzymaj wciśnięty klawisz Command (Mac) lub Ctrl (Windows), aby zaznaczyć wiele warstw. Jeśli zaznaczono wiele obiektów, to są one wyodrębniane w postaci pojedynczego zasobu zawierającego wybrane warstwy lub grupy.
  3. Kliknij ikonę  obok warstwy lub grupy warstw. Jeśli zaznaczono wiele warstw/grup warstw, kliknij ikonę  obok dowolnej z zaznaczonych warstw.
  4. Wpisz nazwę nowego zasobu obrazu.
  5. Wybierz format obrazu (PNG 8 alfa, PNG 32, JPG lub SVG).
  6. (Opcjonalnie) Jeśli generujesz obraz w formacie JPG, możesz dostosować jego jakość.
  7. Kliknij przycisk Zapisz.
  8. Wygenerowany zasób znajduje się w panelu Zasoby. Zasoby są także dostępne w nowo utworzonym folderze obok pliku PSD w serwisie Zasoby Creative Cloud.

Uwaga:

Opcja Wyzeruj warstwy przywraca oryginalny stan widoczności warstw (taki, jaki określono w projekcie).

Ukrywanie warstwy lub grupy warstw

Aby ukryć lub pokazać warstwę lub grupę warstw, kliknij ikonę oka () obok odpowiedniej pozycji w panelu Warstwy.

Praca z kompozycjami warstw

Creative Cloud — Ekstrakcja umożliwia wyświetlanie różnych kompozycji warstw z programu Photoshop. Jeśli prześlesz do funkcji Ekstrakcja plik PSD zawierający kompozycje warstw, nad plikiem tym zostanie wyświetlone wyskakujące menu. Menu to zawiera wszystkie kompozycje warstw obecne w pliku PSD oraz pozycję Ostatni stan dokumentu. Ostatni stan dokumentu to stan, w jakim plik był w programie Photoshop tuż przed zapisaniem go i przesłaniem do chmury Creative Cloud. Niekoniecznie musi to być kompozycja warstw.

Praca z kompozycjami warstw w narzędziu Ekstrakcja

Udostępnianie plików

Plik PSD wyświetlany na zakładce Ekstrakcja można udostępnić za pomocą narzędzi usługi Creative Cloud. Użytkownicy, którym udostępnisz plik, będą mogli wyodrębniać z niego zasoby i pomiary nawet wtedy, gdy nie będą zalogowani w usłudze Creative Cloud.

Szczegółowe informacje zawiera artykuł Udostępnianie plików i folderów.

Twoja opinia

Jeśli masz dodatkowe pytania, chcesz zgłosić błąd lub przekazać opinię, napisz na forum funkcji Ekstrakcja dla plików PSD.

Często zadawane pytania

Czy usługa Ekstrakcja obsługuje znaczniki modułu Photoshop Generator?

Tak. Podczas wyodrębniania zasobu obrazu ustawienia są w najszerszym możliwym zakresie dostosowywane do znaczników modułu Generator określonych w nazwie odpowiedniej warstwy.

Czy można edytować plik PSD za pomocą usługi Ekstrakcja?

Nie. Usługa Ekstrakcja generuje dane tylko do odczytu.

Czy jakieś znaki są nieobsługiwane w nazwach plików PSD lub zasobów?

W nazwach plików PSD oraz nazwach plików zasobów nie są obsługiwane następujące znaki specjalne: |, ", ?, <, >, /, \, ;, * oraz :.

Kto może uzyskać dostęp do przekazanych przeze mnie plików PSD?

Wszystkie pliki przesłane do usługi Ekstrakcja są dostępne wyłącznie za pośrednictwem Twojego konta Creative Cloud.

Jeśli chcesz udostępnić plik PSD, możesz go upublicznić, a następnie udostępnić łącze. Jeśli podczas udostępniania została włączona opcja Ekstrakcja, to każdy użytkownik korzystający z tego łącza może wyświetlić Twój plik PSD w usłudze Ekstrakcja i wyodrębnić z niego zasoby.

Czy usługa Ekstrakcja obsługuje pliki PSD, w których jest używana przestrzeń kolorów CMYK?

Nie. Przed przesłaniem do usługi Ekstrakcja plików PSD z przestrzenią kolorów CMYK przekonwertuj je na przestrzeń kolorów RGB.

Czy są obsługiwane formaty plików inne niż PSD?

Nie. Aktualnie są obsługiwane tylko pliki PSD.

Czy istnieją jakieś ograniczenia dotyczące plików PSD obsługiwanych przez usługę Ekstrakcja?

Usługa Ekstrakcja została zaprojektowana do obsługi plików PSD utworzonych w programie Photoshop. Nie jest zalecane używanie tej usługi z plikami PSD większymi niż 2 GB lub zawierającymi ponad 1000 warstw.

Czym się różni usługa Ekstrakcja od modułu Adobe Generator for Photoshop CC?

Zarówno Generator, jak i Ekstrakcja to narzędzia ułatwiające zadania projektantów i programistów pracujących nad przekształcaniem kompozycji w kod. Moduł Generator służy do wyodrębniania zasobów graficznych w programie Photoshop CC, natomiast Ekstrakcja działa bezpośrednio w przeglądarce jako usługa chmury Creative Cloud. Usługa Ekstrakcja nie wymaga zainstalowanego lub uruchomionego programu Photoshop.

Ponadto Ekstrakcja umożliwia utworzenie pojedynczego zasobu na podstawie wielu warstw.

Czy muszę mieć subskrypcję Creative Cloud, aby korzystać z usługi Ekstrakcja?

Każdy użytkownik bezpłatnego lub płatnego planu Creative Cloud może przesłać plik PSD do serwisu Zasoby Creative Cloud i skorzystać z usługi Ekstrakcja.

Jeśli udostępnisz komuś łącze do usługi Ekstrakcja, to taka osoba może wyodrębniać zasoby i wymiary z pliku PSD bez zalogowania na koncie Creative Cloud.

Dlaczego na panelu Style w usłudze Ekstrakcja nie ma niektórych kolorów lub gradientów?

Na ogół wynika to z faktu, że takie kolory lub gradienty stanowią wypełnienie pikselowe, które nie jest obsługiwane przez usługę Ekstrakcja. Jeśli plik PSD używa takich wypełnień, to należy pobrać kolory za pomocą próbnika kolorów i dodać je jako próbki do panelu Style.

Czy istnieją jakieś ograniczenia dotyczące kodu CSS gradientów udostępnianego przez usługę Ekstrakcja?

Tak. Niektóre typy gradientów nie są możliwe do odwzorowania za pomocą kodu CSS, chyba że użyje się pewnych sztuczek. Usługa Ekstrakcja nie generuje obecnie prawidłowego kodu CSS dla gradientów skośnych, lustrzanych, romboidalnych i opartych na kształcie (Pęknięty kształt). Są jednak obsługiwane gradienty liniowe i radialne.

Dlaczego podgląd pliku PSD w usłudze Ekstrakcja wygląda inaczej, niż ten sam dokument w programie Photoshop?

Obraz renderowany w widoku Ekstrakcja może się różnić od zawartości w programie Photoshop. Jeśli zauważysz takie różnice, powiedz nam o tym!

Opisz całą sytuację i opublikuj wpis na naszym forum. Jeśli to możliwe, załącz obraz przedstawiający różnice. Postaramy się wtedy usunąć ten problem.

Czy można używać usługi Ekstrakcja na urządzeniach mobilnych?

Na urządzeniach mobilnych można obejrzeć podgląd pliku PSD i wyświetlić niektóre informacje o stylach, w tym kolory, czcionki i gradienty. Nie można natomiast wykonywać operacji na pliku PSD w taki sposób, jak na komputerze.

Czy można pobrać wszystkie zasoby naraz?

Usługa Ekstrakcja nie obsługuje obecnie pobierania wszystkich zasobów jednocześnie. Należy je wyodrębniać i pobierać jeden po drugim.

Czy można pobrać cały kod CSS projektu za jednym razem?

Usługa Ekstrakcja nie obsługuje obecnie pobierania całego kodu CSS dla projektu. Trzeba zaznaczać poszczególne elementy i kopiować ich style CSS do własnego kodu produkcyjnego.

Jeśli interesuje Cię taka funkcja, napisz na naszym forum i zaproponuj, w jaki sposób powinny być zorganizowane te dane wyjściowe CSS.

 

Mój plik PSD jest udostępniony, ale odbiorca nie widzi zakładki Ekstrakcja. Dlaczego?

Jeśli plik PSD został udostępniony przed datą wydania usługi Ekstrakcja (koniec sierpnia 2014 r.), to nie będzie miał aktywnej zakładki Ekstrakcja. Aby ją uaktywnić, wykonaj poniższe kroki:

Ta opcja spowoduje włączenie usługi Ekstrakcja bez zmiany udostępnionego publicznie adresu URL.

  1. Otwórz sekcję Opcje zaawansowane w oknie dialogowym Prześlij łącze.
  2. Upewnij się, że jest zaznaczona opcja Usługa Ekstrakcja dozwolona.

Jaka jest różnica między usługą Project Parfait a narzędziem Ekstrakcja?

Project Parfait to usługa, która została opublikowana przez firmę Adobe w wersji beta w celu zaprezentowania obiegów pracy dostępnych teraz w ramach narzędzia Ekstrakcja. Ekstrakcja ma te same funkcje, co Project Parfait, a także wiele innych możliwości. W związku z oficjalnym wprowadzeniu funkcji Project Parfait do oferty Creative Cloud możliwość korzystania z tej usługi do wyodrębniania informacji i zasobów z plików PSD zostanie wycofana.

Co się stanie z plikami PSD, które zostały przesłane do usługi Project Parfait?

Użytkownicy, którzy korzystali z funkcji Project Parfait, mogą pobrać opracowywane przez siebie pliki do końca 2014 r.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online