Czasami mo\u017cesz nie tylko pozwoli\u0107 u\u017cytkownikowi na dodanie lub zmian\u0119 obrazu, ale tak\u017ce ograniczy\u0107 obraz o pole o okre\u015blonym rozmiarze. Gdy u\u017cytkownik zmienia rozmiar lub przesuwa taki obraz, nie wychodzi poza to pole, ale jest powi\u0119kszany i przycinany zgodnie z granicami symboli zast\u0119pczych.<\/p>\n
W tym temacie nauczysz si\u0119 wykonywa\u0107 nast\u0119puj\u0105ce czynno\u015bci, m.in.:<\/p>\n
- \n
- Utw\u00f3rz placeholdery obraz\u00f3w<\/li>\n
- Zastosuj dowolne kszta\u0142ty do placholder\u00f3w<\/li>\n
- Zach\u0119caj u\u017cytkownik\u00f3w do wybierania obraz\u00f3w do placeholder\u00f3w<\/li>\n
- Ustaw uprawnienia dla placeholder\u00f3w<\/li>\n
- Zdefiniuj tryb wstawiania obrazu<\/li>\n
- Po\u0142\u0105cz kilka placeholder\u00f3w maj\u0105cych ten sam obraz<\/li>\n
- Przekszta\u0142\u0107 placeholdery<\/li>\n
- Podaj obrazy dla placeholder\u00f3w<\/li>\n
- Przeci\u0105gnij i upu\u015b\u0107 zawarto\u015b\u0107<\/li>\n<\/ul>\n
<\/h2>\n
<\/p>\n
<\/p>\n
Oznaczanie warstwy jako placeholdera<\/strong><\/p>\n
<\/p>\n
Aby w\u0142\u0105czy\u0107 t\u0119 funkcj\u0119 i doda\u0107 symbol zast\u0119pczy do szablonu, nale\u017cy doda\u0107 obraz (w naszym przypadku logo IP) i doda\u0107 znacznik <PH><\/span> do jego nazwy w szablonie Photoshop<\/strong> lub InDesign<\/strong>. Po otwarciu tego szablonu w kreatorze wygl\u0105da to tak:<\/p>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/4-1024x437.png\")
<\/p>\nAby edytowa\u0107 obraz, mo\u017cesz klikn\u0105\u0107 Uchwyt na placeholderzy. Alternatywnie mo\u017cesz w\u0142\u0105czy\u0107 tryb automatycznej edycji. W tym trybie kreator ukrywa Uchwyt, a wystarczy klikn\u0105\u0107 placeholder, aby edytowa\u0107 jego obraz.<\/p>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/5-1024x373.png\")
<\/p>\nMo\u017cesz zmieni\u0107 rozmiar, przyci\u0105\u0107, obr\u00f3ci\u0107 lub przenie\u015b\u0107 obraz. Kliknij przycisk Gotowe<\/strong>, aby zako\u0144czy\u0107 edycj\u0119.<\/p>\n
Aby wybra\u0107 inny obraz z Galerii <\/strong>obraz\u00f3w, kliknij dwukrotnie symbol placeholdera.<\/p>\n
Mo\u017cesz tak\u017ce klikn\u0105\u0107 prawym przyciskiem myszy placeholder obrazu, a nast\u0119pnie klikn\u0105\u0107 Wybierz obraz<\/strong>, aby otworzy\u0107 Galeri\u0119 obraz\u00f3w.<\/p>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/6.png\")
<\/p>\n<\/p>\n
Tworzenie nieprostok\u0105tnych symboli zast\u0119pczych<\/strong><\/p>\n
<\/p>\n
Znacznik <PH><\/span> pozwala nie tylko ustawi\u0107 prostok\u0105tne placeholdery okre\u015blaj\u0105ce pozycj\u0119 i rozmiar wybranego obrazu na produkcie, ale tak\u017ce artystyczne placeholdery o dowolnych kszta\u0142tach. Aby zdefiniowa\u0107 takie placeholdery w programie Adobe Photoshop, u\u017cyj kszta\u0142t\u00f3w wektorowych, aby wyci\u0105\u0107 cz\u0119\u015b\u0107 obrazu w kreatorze (wi\u0119cej informacji znajduje si\u0119 w Rozdziale Placeholdery o nieregularnych kszta\u0142tach). W programie InDesign mo\u017cesz po prostu utworzy\u0107 ramk\u0119 obrazu o po\u017c\u0105danym kszta\u0142cie.<\/p>\n
<\/p>\n
Zach\u0119canie u\u017cytkownik\u00f3w do wybierania obraz\u00f3w do placeholder\u00f3w<\/strong><\/p>\n
<\/p>\n
Mo\u017cesz zdefiniowa\u0107 puste placeholdery w swoich szablonach. Te placeholdery wymagaj\u0105 od u\u017cytkownik\u00f3w wybrania obraz\u00f3w, zanim b\u0119d\u0105 mogli edytowa\u0107 lub wysy\u0142a\u0107 zawarto\u015b\u0107 placeholdera. Aby to w\u0142\u0105czy\u0107, dodaj zmodyfikowany znacznik <PH_empty><\/span> do nazwy warstwy obrazu. Kreator nie \u0142aduje obraz\u00f3w do takich placeholder\u00f3w, gdy edytor otwiera produkt na stronie. Zamiast tego placeholder jest wy\u015bwietlany jako pusty z jasnoszar\u0105 ramk\u0105 i przyciskiem Wybierz obraz.<\/p>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/7-1024x393.png\")
<\/p>\nZamiast pokazywa\u0107 pusty placeholder, mo\u017cesz umie\u015bci\u0107 obraz zach\u0119caj\u0105cy u\u017cytkownik\u00f3w do wybrania dla niego obraz\u00f3w. Mo\u017ce to by\u0107 na przyk\u0142ad dodanie obrazu lub podw\u00f3jne klikni\u0119cie, aby doda\u0107 wiadomo\u015b\u0107 graficzn\u0105. Znacznik <PH_stub><\/span> pozwala wdro\u017cy\u0107 to podej\u015bcie. Kreator wy\u015bwietla ten obraz, ale nie do\u0142\u0105cza go do wyj\u015bcia wysokiej rozdzielczo\u015bci.<\/p>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/8-1024x387.png\")
<\/p>\nO ile u\u017cytkownik nie wybierze obrazu, ani znak placeholdera, ani napis zach\u0119caj\u0105cy nie pojawi\u0105 si\u0119 na wyj\u015bciu wysokiej rozdzielczo\u015bci.<\/p>\n
<\/p>\n
Konfigurowanie funkcji manipulacji symbolami zast\u0119pczymi<\/strong><\/p>\n
<\/p>\n
Opr\u00f3cz znacznika <PH><\/span> mo\u017cesz ustawi\u0107 jeden lub wi\u0119cej znacznik\u00f3w ograniczaj\u0105cych mo\u017cliwo\u015bci interakcji mi\u0119dzy u\u017cytkownikami a placeholderami:<\/p>\n
<PSSB_f><\/span> – usuwa przycisk Wybierz obraz.<\/p>\n
<PAEC_f><\/span> – zabrania manipulowania zawarto\u015bci\u0105 placeholdera.<\/p>\n
<MAMH_f><\/span> – zabrania przesuwania placeholdera w poziomie.<\/p>\n
<MAMV_f><\/span> – zabrania przesuwania placeholdera w pionie.<\/p>\n
<MAR_f><\/span> – nie zezwala na obracanie.<\/p>\n
<MRC><\/span> – nie zezwala na zmian\u0119 rozmiaru.<\/p>\n
Na przyk\u0142ad po\u0142\u0105cz znacznik <PH><\/span> z <MAMH_f><MAMV_f><MAR_f> <MRC><\/span>, aby zablokowa\u0107 element. Zapewnia to, \u017ce u\u017cytkownik nie b\u0119dzie m\u00f3g\u0142 przenosi\u0107, obraca\u0107 ani zmienia\u0107 rozmiaru placeholdera. Mo\u017cesz tak\u017ce u\u017cy\u0107 <PAEC><\/span>, aby kontrolowa\u0107, czy u\u017cytkownik ma manipulowa\u0107 obrazem w placeholderze i czy zast\u0105pi\u0107 obraz.<\/p>\n
<\/p>\n
Definiowanie trybu wstawiania obrazu<\/strong><\/p>\n
<\/p>\n
Znacznik <PHRM><\/span> umo\u017cliwia okre\u015blenie sposobu zmiany rozmiaru obraz\u00f3w, gdy u\u017cytkownicy wstawi\u0105 je do placeholdera obrazu. Obrazy mo\u017cna proporcjonalnie zmieni\u0107, aby dopasowa\u0107 do placeholdera lub zachowa\u0107 oryginalny rozmiar. Ten znacznik stoi razem z <PH><\/span>. Mo\u017cesz okre\u015bli\u0107 tryb dopasowania, wype\u0142nienia lub orygina\u0142u:<\/p>\n
- \n
- <PH> <PHRM_fit><\/span> powoduje, \u017ce rozmiar obrazu jest r\u00f3wny lub mniejszy ni\u017c rozmiar placeholdera.<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/9.png\")
<\/p>\n- \n
- <PH> <PHRM_fill><\/span> powoduje, \u017ce rozmiar obrazu jest r\u00f3wny lub wi\u0119kszy ni\u017c rozmiar symbolu zast\u0119pczego.<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/10.png\")
<\/span><\/p>\n![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/11.png\")
<\/p>\n- \n
- <PH> <PHRM_original>\u00a0<\/span>powoduje, \u017ce oryginalny obraz pozostaje niezmieniony i jest umieszczony na \u015brodku placeholdera.<\/li>\n
- Aby wyr\u00f3wna\u0107 zawarto\u015b\u0107 placeholdera obrazu w poziomie i w pionie, mo\u017cesz u\u017cy\u0107 znacznik\u00f3w <PCHA><\/span> i <PCVA><\/span>.<\/li>\n<\/ul>\n
<\/h2>\n
<\/p>\n
U\u017cywanie tego samego obrazu w kilku placeholderach<\/strong><\/p>\n
<\/p>\n
Kreator umo\u017cliwia zape\u0142nianie wielu placeholder\u00f3w t\u0105 sam\u0105 zawarto\u015bci\u0105 jednocze\u015bnie. Aby u\u017cy\u0107 tej funkcji i po\u0142\u0105czy\u0107 placeholdery ze sob\u0105, u\u017cyj znacznika <PLID> w \u017c\u0105danych warstwach. W ten spos\u00f3b warstwy zawieraj\u0105ce wsp\u00f3lny obraz s\u0105 oznaczane za pomoc\u0105 <PH> <PLID_id>. Taka grupa placeholder\u00f3w jest po\u0142\u0105czona z nazw\u0105 identyfikatora, co umo\u017cliwia utworzenie wielu grup w ramach jednego szablonu (z r\u00f3\u017cnymi identyfikatorami). Wszystkie symbole zast\u0119pcze obrazu zawarte w grupie s\u0105 wy\u015bwietlane w Inspektorze obiekt\u00f3w. Gdy u\u017cytkownik zmienia obraz w jednym symbolu zast\u0119pczym w grupie, jest on zmieniany we wszystkich po\u0142\u0105czonych symbolach zast\u0119pczych.<\/p>\n
Powiedzmy, \u017ce masz ulotk\u0119, a w niej obraz, kt\u00f3ry pojawia sie w kilku miejscach. Je\u015bli zaznaczysz takie placeholdery obrazu tagiem <PLID_id> w szablonie, zostan\u0105 one po\u0142\u0105czone na podstawie tego identyfikatora. Gdy tylko u\u017cytkownik zast\u0105pi obraz, nowy obraz zostanie zastosowany do wszystkich powi\u0105zanych placeholder\u00f3w. Pami\u0119taj, \u017ce aktualizowany jest tylko sam obraz, ale transformacje wykonane przez u\u017cytkownika s\u0105 nadal stosowane. Tak wi\u0119c, je\u015bli masz pierwszy obraz w grupie w pe\u0142nym rozmiarze bez transformacji, a drugi obr\u00f3cony o 90 stopni i zmniejszony o 50%, zmiana obrazu w pierwszej warstwie spowoduje aktualizacj\u0119 w drugiej warstwie i jest wci\u0105\u017c obracane i zmniejszane.<\/p>\n
<\/p>\n
Dodawanie transformowanych placeholder\u00f3w<\/strong><\/p>\n
<\/p>\n
Kreator obs\u0142uguje przekszta\u0142cenia placeholder\u00f3w obrazu, takich jak skalowanie, t\u0142umaczenie i obracanie. Aby u\u017cy\u0107 ich w szablonach Photoshop, przekonwertuj warstwy obrazu na obiekty inteligentne, kt\u00f3re s\u0105 specjalnymi warstwami, kt\u00f3re pozwalaj\u0105 zastosowa\u0107 transformacje geometryczne do obiekt\u00f3w. Zauwa\u017c, \u017ce w takim przypadku znacznik <PH> nale\u017cy doda\u0107 do obiektu inteligentnego.<\/p>\n
Na przyk\u0142ad poni\u017cszy obraz pokazuje dwa po\u0142\u0105czone placeholdery. Obr\u00f3cony placeholder to obiekt inteligentny. Gdy u\u017cytkownik przesy\u0142a obraz do jednego z placeholder\u00f3w, oba otrzymuj\u0105 t\u0119 sam\u0105 tre\u015b\u0107, ale drugi obraz jest obracany o 90 stopni i zmniejszany o 20%.<\/p>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/12.png\")
<\/p>\nW przypadku element\u00f3w projektu zdefiniowanych w grupie warstw, takich jak placeholdery z ramkami lub placeholdery inne ni\u017c prostok\u0105tne, do wszystkich warstw nale\u017cy zastosowa\u0107 t\u0119 sam\u0105 transformacj\u0119. Je\u015bli taka grupa zawiera warstwy rastrowe, przekonwertuj je na obiekty inteligentne. Kszta\u0142ty zachowuj\u0105 transformacje bez przekszta\u0142cania ich w inteligentne obiekty. Na przyk\u0142ad, je\u015bli chcesz obr\u00f3ci\u0107 placeholder o 90 stopni, musisz przekonwertowa\u0107 warstwy rastrowe na obiekty inteligentne i zastosowa\u0107 obr\u00f3t o 90 stopni do wszystkich warstw w grupie placeholder\u00f3w. Je\u015bli k\u0105ty si\u0119 r\u00f3\u017cni\u0105, to analiza szablonu PSD powoduje b\u0142\u0105d.<\/p>\n
Wi\u0119cej informacji na temat inteligentnych obiekt\u00f3w mo\u017cna znale\u017a\u0107 w temacie Korzystanie z inteligentnych obiekt\u00f3w w szablonach PSD.<\/p>\n
<\/p>\n
Przeci\u0105gnij i upu\u015b\u0107 zawarto\u015b\u0107 placeholdera<\/strong><\/p>\n
<\/p>\n
Aby zamieni\u0107 zawarto\u015b\u0107 placeholder\u00f3w w kreatorze, wystarczy przeci\u0105gn\u0105\u0107 i upu\u015bci\u0107 obrazy. Aby w\u0142\u0105czy\u0107 tryb przeci\u0105gania i upuszczania, wy\u0142\u0105cz poziome i pionowe ruchy placeholder\u00f3w, u\u017cywaj\u0105c nast\u0119puj\u0105cych znacznik\u00f3w: <PH><MAMH_f> <MAMV_f><\/span>. Aby wy\u0142\u0105czy\u0107 tryb przeci\u0105gania i upuszczania, gdy potrzebujesz tej kombinacji znacznik\u00f3w, dodaj znacznik <MADND_f><\/span>.<\/p>\n
Podczas przeci\u0105gania obrazu kreator wyr\u00f3\u017cnia placeholdery, w kt\u00f3rych mo\u017cna upu\u015bci\u0107 ten obraz, za pomoc\u0105 ikon wymiany lub umieszczania, w zale\u017cno\u015bci od tego, czy maj\u0105 tre\u015b\u0107. Na poni\u017cszym zrzucie ekranu mo\u017cesz zamieni\u0107 obraz na drugi placeholder lub przenie\u015b\u0107 obraz na trzeci (pusty) placeholder. Czwarty placeholder:<\/p>\n
![\"\"](\"http:\/\/help.iwareprint.pl\/wp-content\/uploads\/2020\/08\/13.png\")
<\/p>\nMo\u017cesz usun\u0105\u0107 zawarto\u015b\u0107 placeholder\u00f3w, przesuwaj\u0105c j\u0105 z obszaru roboczego.<\/p>\n
Je\u015bli Tw\u00f3j projekt zawiera po\u0142\u0105czone placeholdery, zostan\u0105 one wyczyszczone lub wype\u0142nione jednocze\u015bnie.<\/p>\n
Uwaga:<\/strong> je\u015bli zdefiniujesz placeholder za pomoc\u0105 znacznik\u00f3w <AT><\/span> lub <IASF><\/span> ograniczaj\u0105cych kart\u0119 galerii lub folder, mo\u017cesz zamienia\u0107 obrazy tylko mi\u0119dzy placeholderami, kt\u00f3re maj\u0105 takie same ograniczenia.<\/p>\n","protected":false},"parent":0,"menu_order":1002,"template":"single-helpdesk.php","kategorie":[15],"class_list":["post-2016","wizard","type-wizard","status-publish","hentry","kategorie-psd-idml"],"acf":[],"_links":{"self":[{"href":"https:\/\/iwareprint.pl\/help\/wp-json\/wp\/v2\/wizard\/2016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iwareprint.pl\/help\/wp-json\/wp\/v2\/wizard"}],"about":[{"href":"https:\/\/iwareprint.pl\/help\/wp-json\/wp\/v2\/types\/wizard"}],"wp:attachment":[{"href":"https:\/\/iwareprint.pl\/help\/wp-json\/wp\/v2\/media?parent=2016"}],"wp:term":[{"taxonomy":"kategorie","embeddable":true,"href":"https:\/\/iwareprint.pl\/help\/wp-json\/wp\/v2\/kategorie?post=2016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Aby wyr\u00f3wna\u0107 zawarto\u015b\u0107 placeholdera obrazu w poziomie i w pionie, mo\u017cesz u\u017cy\u0107 znacznik\u00f3w <PCHA><\/span> i <PCVA><\/span>.<\/li>\n<\/ul>\n
- <PH> <PHRM_original>\u00a0<\/span>powoduje, \u017ce oryginalny obraz pozostaje niezmieniony i jest umieszczony na \u015brodku placeholdera.<\/li>\n
- <PH> <PHRM_fill><\/span> powoduje, \u017ce rozmiar obrazu jest r\u00f3wny lub wi\u0119kszy ni\u017c rozmiar symbolu zast\u0119pczego.<\/li>\n<\/ul>\n
- <PH> <PHRM_fit><\/span> powoduje, \u017ce rozmiar obrazu jest r\u00f3wny lub mniejszy ni\u017c rozmiar placeholdera.<\/li>\n<\/ul>\n