Tworzenie szablonu w Photoshop – krok po kroku

Tworzenie szablonów w Photoshopie

Kreator może importować szablony z plików PSD. W rezultacie konwertuje je do wewnętrznego formatu .st opartego na JSON. W większości scenariuszy nie powinieneś bezpośrednio zajmować się plikami .st, więc prawdopodobnie łatwiej jest myśleć o nich bardziej jako o „otwieraniu” plików PSD w kreatorze.

Uwaga:

Wewnątrz kreatora nie ma wszystkich dostępnych funkcji PSD i odwrotnie, niektóre funkcje kreatora nie występują w Photoshopie. Podczas tworzenia szablonów PSD ważne jest, aby pamiętać o wszystkich możliwościach  i konwersjach kreatora. Często po otrzymaniu pliku PSD od grafika  będziesz musiał go edytować i przetworzyć przed importem do kreatora. Ten artykuł wyjaśnia, jak to zrobić.

Prawidłowe szablony PSD

Nie możesz dodać dowolnego pliku PSD do kreatora. Jakiego rodzaju pliki PSD można otworzyć?

Kreator działa z wielowarstwowymi plikami PSD zawierającymi obrazy, teksty, kształty i inteligentne warstwy. Format koloru powinien być RGB, CMYK lub Grayscale. Nie powinien zawierać skomplikowanych efektów warstw – należy je upraszczać gdy tylko jest to możliwe.

Warstwy z tekstem mogą zawierać następujące ustawienia czcionek:

– Nazwa i rozmiar czcionki
– Styl: pogrubienie, kursywa, faux pogrubienie, faux kursywa itp.
– Kolor
– Odstępy między wierszami i akapitami

I następujące ustawienia akapitu:

– Wyrównanie
– Wcięcie pierwszego wiersza, lewe i prawe
– Spacja przed i spacja po

Inne parametry są ignorowane.

Kreator obsługuje zarówno tekstowe warstwy punktowe, jak i akapitowe. Te warstwy tekstowe mogą być zorientowane pionowo lub poziomo. W tekście punktowym zawsze masz jedną pozycję, która określa położenie tekstu (w zależności od wybranego trybu wyrównania, który określa lewą, środkową lub prawą pozycję warstwy), podczas gdy tekst akapitowy określa granice. Jeśli tekst przekroczy to pole, zostanie przycięty.

Ważne jest, aby pamiętać, że jeśli użytkownik edytuje warstwę tekstu punktowego, można ją podzielić na wiele linii, naciskając klawisz Enter. Jeśli chcesz ograniczyć użytkownika do jednego wiersza tekstu, użyj warstw tekstu akapitowego (Paragraph Text Layer) o wysokości równej rozmiarowi czcionki.

Oprócz warstw tekstowych możesz dodawać ścieżki do tekstów zakrzywionych.

Teraz spróbujmy utworzyć szablon PSD zgodny z kreatorem.

Tutorial: Tworzenie szablonu w Photoshop

Wyobraźmy sobie, że chcemy stworzyć szablon dla wizytówki o wymiarach 90mm x 50mm. Składa się z trzech elementów: obrazu tła, wieloliniowego pola tekstowego i logo. Oczywiście bardziej skomplikowany szablon wizytówki składałby się z większej liczby elementów (takich jak oddzielne pola na nazwę firmy, nazwisko osoby itp.), Ale dla uproszczenia zacznijmy od pojedynczej warstwy tekstowej.

Po przygotowaniu tła i logo możemy przystąpić do tworzenia szablonu. Uruchamiamy Photoshop’a, a następnie:

1. Utwórz nowy dokument. Określ rozmiar 90 x 50 mm, oraz orientację pionową.
2. Otwórz obraz tła. W menu Plik (File) wybierz Otwórz (Open) i wybierz plik.
3. Dodaj Logo. Na przykład przeciągnij je z Eksploratora plików systemu Windows do Photoshopa.
4. Utwórz warstwę tekstową. Aby utworzyć warstwę tekstu punktowego, kliknij opcję Narzędzie Tekst w panelu Narzędzia (po lewej stronie litera T), a następnie kliknij miejsce, w którym chcesz umieścić tekst. Wpisz przykładowy tekst, aby użytkownicy wiedzieli, jakie dane mają wprowadzić (np. Imię i Nazwisko).

W rezultacie powinieneś dostać coś takiego:

Zarządzanie zachowaniem elementów projektu

Możesz zarządzać zachowaniem szablonu, na przykład blokując pozycję tła (uniemożliwiając jej przesunięcie lub usunięcie przez użytkownika), ale umożliwiając edycję ciągu tekstowego. Formatowanie w Photoshopie nie jest wystarczająco elastyczne. Dlatego używamy systemu tak zwanych znaczników – specjalnych symboli, które dodajesz do nazwy warstwy, używanych przez kreator do zarządzania uprawnieniami dla każdego elementu. Szczegółowe informacje na temat składni markerów i ich pełną listę można znaleźć w temacie (osobna instrukcja) Obsługiwane markery.

Tak więc, jako ostatni krok tego samouczka, skonfigurujmy szablon tak, aby nie pozwalał na zmianę tła i położenia tekstu. To ćwiczenie daje wyobrażenie o tym, jak pracować z markerami.

Aby zaznaczyć tło jako nieedytowalny obraz, kliknij dwukrotnie odpowiednią nazwę warstwy w Photoshopie i dodaj do niej <LC> <OID_f>. Nie ma różnicy w jakiej pozycji umieszczasz znacznik – na początku nazwy, na końcu lub gdzieś w środku. Co więcej, możesz zostawić tylko znacznik, jeśli chcesz.

Możesz zablokować pozycję tekstu w podobny sposób. Kliknij dwukrotnie nazwę warstwy tekstowej i dodaj znaczniki <MAMH_f> i <MAMV_f> , aby uniemożliwić przenoszenie tekstu w poziomie i w pionie.

W rezultacie lista nazw warstw wygląda następująco:

Teraz, jeśli prześlesz zmodyfikowany szablon na serwer, zobaczysz, że tło znika z listy edytowalnych obiektów, a pozycja tekstu jest ustalona.

Dodanie stworzonego szablonu PSD do systemu iP

W rezultacie stworzonego projektu, podczas wgrywania szablonu do kreatora powinien zostać wyświetlony następujący widok:

Szczegółowa instrukcja techniczna jak dodać stworzony szablon w programie Adobe Photoshop do Kreatora w Panelu Administracyjnym systemu iwarePRINT opisana została w instrukcji Technicznej

Instrukcja_techniczna_SYSTEM_M.KREATOR_23_06_20.PDF

Przygotowywanie szablonów bazowych dla klienta z istniejących plików PSD (Photoshop)

Łatwo jest zachować zgodność plików PSD z kreatorem, gdy tworzysz je od zera. Co jednak, jeśli masz już kilka plików PSD utworzonych przez projektanta, zanim zdadzą sobie sprawę ze współpracy systemów? Jeśli załadujesz te pliki do kreatora, mogą nie wyglądać tak, jak byś się spodziewał.

Oto lista najczęstszych problemów z plikami PSD i wskazówki, jak je rozwiązać.

Nie można otworzyć pliku PSD

Przyczyn może być kilka, ale najprawdopodobniej ma to związek z nietypową przestrzenią kolorów lub dodatkowymi kanałami. Kreator działa z obrazami RGB, CMYK lub Grayscale, a głębia kolorów powinna wynosić 8 bitów na kanał.

Rozwiązanie: Konwertuj obraz na RGB lub CMYK i usuń wszystkie dodatkowe kanały. Jeśli nadal masz problemy z ładowaniem tego pliku, prześlij go do naszego zespołu technicznego za pomocą ‘ticketa’ lub drogą mailową.

Niewidoczne warstwy są widoczne

Kreator ignoruje widoczną flagę warstwy.

Rozwiązanie: Zdecydowanie zaleca się usunięcie wszystkich nieużywanych warstw, aby zmniejszyć rozmiar pliku PSD i zwiększyć wydajność, ale jeśli uważasz, że warstwa musi być przechowywana w szablonie, możesz użyć znaczników <VNP> i <VNS>.

Opcje warstwy są ignorowane

Kreator ignoruje opcje warstw, takie jak Zablokuj, Wypełnij, Krycie itp.

Rozwiązanie: Należy unikać korzystania z tych opcji. Spróbuj spłaszczyć warstwy z takimi opcjami w warstwie obrazu. Możesz także utworzyć kanał alfa za pomocą maski warstwy. Aby to zrobić, kliknij prawym przyciskiem myszy maskę na karcie Warstwy, a następnie kliknij Zastosuj maskę warstwy.

Bez efektów wizualnych

Kreator nie może odczytać informacji o efektach wizualnych (blask, satyna itp.).

Rozwiązanie dla stałych warstw: zamień efekty wizualne w osobne warstwy obrazu. Aby to zrobić, kliknij prawym przyciskiem myszy w widoku Warstwy, a następnie kliknij polecenie Utwórz warstwę.

Warstwy dopasowania, efektu i wypełnienia są ignorowane

Kreator obsługuje warstwy rastrowe (kształty graficzne), kształty wektorowe, obiekty inteligentne i warstwy tekstowe.

Rozwiązanie: Zastosuj lub spłaszcz wszystkie te warstwy przed otwarciem szablonu w kreatorze.

Niektóre ustawienia czcionek / akapitów nie są stosowane

Kreator czyta tylko następujące parametry czcionki:

Nazwa i rozmiar czcionki

Styl: pogrubienie, kursywa, faux pogrubienie, faux kursywa itp.

Kolor

Śledzenie (odstępy między znakami) i prowadzenie (odstępy między liniami bazowymi)

I następujące ustawienia akapitu:

Wyrównanie

Wcięcie pierwszego wiersza, lewe i prawe

Spacja przed i spacja po.

Szablon ładuje się zbyt wolno

Dzieje się tak, jeśli szablon ma wiele warstw, zwłaszcza warstw obrazu. Dobrym pomysłem jest optymalizacja szablonów przed zaimportowaniem ich do kreatora.

Rozwiązanie: Po pierwsze, zaleca się scalenie wszystkich nieedytowalnych warstw razem. Na przykład, jeśli utworzysz szablon dla pracowników określonej korporacji, możesz połączyć tło, nazwę firmy i logo razem. Jeśli niektóre nieedytowalne warstwy powinny mieć wyższą kolejność niż warstwy edytowalne, możesz scalić je w osobną warstwę, ale ogólną zasadą jest minimalizowanie liczby warstw, ponieważ są one ładowane jako osobny obraz.

Niewidoczne warstwy należy usunąć, a przynajmniej ustawić odpowiednie markery.

Na koniec sprawdź warstwy obrazu i sprawdź, czy są większe niż widoczny obszar. Jeśli widoczne jest tylko 10% warstwy, nie ma potrzeby ładowania całej warstwy. Przytnij niepotrzebną część.

Jeśli chodzi o warstwy tekstowe, rozważ użycie pojedynczej wielowierszowej warstwy tekstowej (Tekst punktowy) zamiast wielu pojedynczych linii. W większości przypadków wypełnienie pojedynczego bloku tekstu jest bardziej przyjazne dla użytkownika, a kreator może szybciej przetwarzać te pola. Jednak zignoruj tę radę, jeśli naprawdę chcesz podzielić warstwy, na przykład, jeśli wstępnie wypełnisz niektóre pola z bazy danych.

Potrzebujesz pomocy z szablonem? Prześlij nam go

Jeśli plik PSD nadal wyświetla się nieprawidłowo, możesz skontaktować się z naszym zespołem technicznym i wysłać do nas zapakowany szablon. Zobaczymy na czym polega problem i zaproponujemy rozwiązanie.