Jak przekonwertować projekt programu Photoshop do kodu CSS w mniej niż minutę

css- photoshop

Od czasu pojawienia się wersji CS6 firma Adobe zaimplementowała w programie Photoshop bardzo przydatną opcję do układania i opracowywania projektów internetowych. Operacja jest bardzo łatwe a przede wszystkim szybko. Dzięki aplikacji będziemy mogli generować kaskadowe arkusze stylów, przyjmując jako odniesienie nasz kształt i warstwy tekstu. Procedura jest tak prosta, jak opracowanie naszej makiety, skopiowanie wersji kodu naszych elementów i wklejenie jej na naszym arkuszu.

Jest to bardzo dobra opcja, zwłaszcza że pozwala nam obserwować ewolucję naszego projektu pod względem wizualnym iw czasie rzeczywistym. Oto kilka wskazówek dotyczących korzystania z tej opcji i uzyskiwania pliku maksymalna wydajność:

Staraj się być precyzyjny

Aby uzyskać profesjonalny efekt, warto wziąć pod uwagę wymiary i proporcje swojej witryny. Ustaw wartości Szerokość i Wysokość projektowanego szablonu i zastosuj je do swojej makiety. Podczas kopiowania kodu CSS umieścimy każdy element, biorąc za odniesienie odległość w pikselach między każdym elementem a krawędziami płótna. Weź również pod uwagę rozmiary i przyczyny hierarchiczne, które zamierzasz uwzględnić w swoim projekcie, w tym wyrównanie każdego elementu i odstępy między nimi, aby zapewnić maksymalną czytelność dla użytkowników.

Korzystanie z przewodników i reguł interfejsu pomoże Ci zbudować zgrabny, czysty szablon z idealnie dopasowanymi wszystkimi elementami.

internetowy photoshop

Skonfiguruj wszystkie cechy każdego elementu

Możliwość kopiowania kodu CSS daje nam możliwość bardzo precyzyjnego zaprojektowania naszej strony poprzez wykorzystanie warstw formularza i tekstu. Zawartość każdej warstwy zostanie skopiowana do Schowka i możemy ją szybko wkleić do naszego arkusza stylów. Z warstw kształtów przechwyć wartości następujących ustawień:

  • tamaño
  • Stanowisko
  • Kolor obrysu
  • Kolor wypełnienia (w tym gradienty)
  • Cień

Z warstw tekstowych możemy pobrać następujące wartości:

  • Rodzina czcionek
  • Rozmiar czcionki
  • Grubość czcionki
  • Wysokość linii
  • Podkreślony
  • Przekreślenie
  • Napisany u góry
  • Indeks
  • Wyrównanie tekstu

Pamiętaj o tym i ustaw każdą z tych wartości, aby zapewnić styl, którego szukasz.

Pracuj z grupami warstw

Ta funkcja tłumaczy naszą pracę zorganizowaną według dwóch typów zajęć, po jednej dla każdej grupy, która łączy warstwy kształtów lub tekstu, oraz klasy dla każdej warstwy jednego z tych typów. Każda klasa grupy będzie reprezentować nadrzędny element DIV, który będzie zawierał podrzędne elementy DIV i który będzie odpowiadał warstwom wstawionym w każdej grupie. W ten sposób górne i lewe wartości kontenerów podrzędnych zostaną ustawione w odniesieniu do kontenera nadrzędnego. Należy pamiętać, że ta opcja nie jest dostępna w przypadku obiektów inteligentnych i nie będzie miała zastosowania do więcej niż jednej warstwy jednocześnie, chyba że zostaną zgrupowane.

Kroki do konwersji

Po wykonaniu makiety, spersonalizowaniu każdego elementu i pogrupowaniu ich według grup, wystarczy wykonać następujące czynności:

 

  • Przejdź do panelu warstw i wybierz jedną z dwóch opcji:
    • Kliknij prawym przyciskiem myszy kształt lub warstwę tekstową albo grupę warstw i wybierz Skopiuj CSS w menu kontekstowym.
    • Zaznacz kształty, warstwę tekstową lub grupę warstw, a następnie wybierz opcję Skopiuj CSS w menu panelu Warstwy.
  • Wklej kod do dokumentu arkusza stylów i zastosuj go na swoich stronach za pomocą html5.

    CSS-Photoshop1

    CSS-Photoshop2


Treść artykułu jest zgodna z naszymi zasadami etyka redakcyjna. Aby zgłosić błąd, kliknij tutaj.

Bądź pierwszym który skomentuje

Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany.

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.