1. ThemeForest

Oczywiście nie chodzi tu tylko o ThemeForest ale o cały Envato Marketplace. Na pierwszy rzut oka prosta, funkcjonalna grafika zaskakuje bogactwem szczegółów nie męcząc przy tym odbiorcy. Kwintesencja dobrego redesignu.

2. Lech

Pierwsza z trzech realizacji z rodzimego podwórka. Cieszy fakt, że moje ulubione piwo może się pochwalić powalającą realizacją z wykorzystaniem 3d  i… filmów Bagińskiego!

3. Walkman Story

Piękne kolory i fenomenalne animacje. Na dodatek wiele świetnych pomysłów na niebanalne przedstawienie produktu.

4. Fully Illustrated

Sposób prezentowania treści i miażdżące realizacje sprawiają, że ze strony po prostu nie chce się wychodzić! Bardzo ciemna, ale czysta szata graficzna nie męczy i nie odciąga oczu od powalających prac w portfolio.

5. Internet Dreams

Świetne javascriptowe rozwiązania sprawiają, że na stronie ciągle coś się dzieje. Strona zachwyca bogactwem szczegółów i jakością wykonania.

6. Private Banking – Deutsche Bank

Zaglądam za każdym razem, gdy myślę, że zrobiłem fajny projekt. Skutecznie sprowadza na ziemię:).

7. Kendra Perez

Świetny przykład wykorzystania Papervision3d. Bardzo fajna galeria zdjęć.

8. Mustang 2010

Bardzo rozbudowana flashowa stronka. Możemy stworzyć swój model Mustanga i pobrać go jako tapetę. Dodatkowo wiele świetnych filmów i zdjęć.

9. ilovecolors

Stylem przypominać może WebDesignerWall. Nazwa bloga doskonale oddaje to, co widzimy – mnóstwo kolorów, jednakże niezwykle umiejętnie dobranych.

10. Matt Mullenweg

Blog Matt’a Mullenweg’a od razu uderza przepiękną ilustracją. Reszta elementów strony doskonale pasuje do fenomenalnej góry.

1. Divante

2. EURA7

3. GoldenSubmarine

4. Infinity Group

5. Insignia

6. Netizens

7. Opcom

8. OS3 Multimedia

9. Pride&Glory Interactive

10. Quest Agency

11. SoInteractive

12. Studio Kreatywne Synergia

13. xoestudio

14. Agencja Interaktywna Zjednoczenie

15. K2 Internet SA

16. Artegence

17. Agencja Interaktywna  Zubi.pl

18. Blueberry

19. Herbatha

20. Cake

Sharikura to obiecująca biblioteka 3d stworzona przez Masayuki Kido. Więcej o nim dowiecie się na tej stronie. Niestety Sharikura  nie jest jeszcze udostępniona dla wszystkich, jednak poszczególne przykłady jej wykorzystania zapowiadają rewolucję w kwestii wydajności silników 3d dla Flash.

W serwisie możemy (oprócz przeglądania dorobku firmy Verbatim) konstruować swoje roboty z wszelkiego rodzaju pamięci masowych i walczyć z innymi podobnie poskładanymi “maszynami”. Pomysł świetny. Wykonanie również choć w przypadku niektórych konstrukcji razi “przenikanie” się ich części.

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.materials.WireframeMaterial;
 
var viewport:Viewport3D = new Viewport3D();
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
var render:BasicRenderEngine = new BasicRenderEngine();
 
addChild(viewport);
 
var objectMaterial:MaterialObject3D = null;
 
var frontMaterial:WireframeMaterial = new WireframeMaterial();
var backMaterial:WireframeMaterial = new WireframeMaterial();
var leftMaterial:WireframeMaterial = new WireframeMaterial();
var rightMaterial:WireframeMaterial = new WireframeMaterial();
var topMaterial:WireframeMaterial = new WireframeMaterial();
var bottomMaterial:WireframeMaterial = new WireframeMaterial();
 
var materialsList:MaterialsList = new MaterialsList();
materialsList.addMaterial(frontMaterial, "front");
materialsList.addMaterial(backMaterial, "back");
materialsList.addMaterial(leftMaterial, "left");
materialsList.addMaterial(rightMaterial, "right");
materialsList.addMaterial(topMaterial, "top");
materialsList.addMaterial(bottomMaterial, "bottom");
 
var myCube:Cube = new Cube(materialsList, 300, 500, 700, 2, 3, 8);
scene.addChild(myCube);
myCube.x = 700;
myCube.z = 1000;
 
var mySphere:Sphere = new Sphere(objectMaterial, 200, 50, 50);
scene.addChild(mySphere);
 
var myCone:Cone = new Cone(objectMaterial, 50, 50, 20);
scene.addChild(myCone);
myCone.x = -400;
myCone.z = -400;
 
var myCylinder:Cylinder = new Cylinder(objectMaterial, 50, 100, 20, 20, -1);
scene.addChild(myCylinder);
myCylinder.x = -150;
myCylinder.z = -600;
 
var myPlane:Plane = new Plane();
scene.addChild(myPlane);
myPlane.x = -300;
myPlane.z = 1400;
myPlane.y = 800;
 
render.renderScene(scene, camera, viewport);

Finalny efekt możesz uzyskać wklejając kod do pierwszej klatki w filmie o domyślnych rozmiarach. W rezultacie powinieneś otrzymać rozłożone na scenie następujące obiekty: płaszczyznę, stożek, cylinder, kulę i prostopadłościan.

W powyższym kodzie jest kilka linii odpowiedzialnych za rozmieszczanie obiektów na trójwymiarowej scenie. Gdyby ich nie było wszystkie obiekty znalazłyby się na środku filmu. Zauważyłeś coś niezwykłego ? W przypadku Papervision3D punkt o współrzędnych x i y równych 0 znajduje się na środku filmu, a nie w lewym górnym rogu, jak ma to miejsce w tradycyjnej flashce. W przypadku izometrii podajemy jeszcze jedną współrzędną – z. O ile x i y mają domyślnie wartości 0, to z ma wartość -1000. Jest to nic innego jak odległość od kamery (czyli Camera3D). Powyższe wartości domyślne “umieszczają”  obiekt na środku sceny (czyli Scene3D). Jeśli ustawisz współrzędną z na 10, oznacza to, że obiekt będzie się znajdował o 10 punktów dalej od kamery ze środka sceny.

Zacznijmy od zaimportowania potrzebnych klas:

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.materials.WireframeMaterial;

Do działania Papervision3D bezwzględnie wymaga klas:

• Scene3D
• Viewport3D
• Camera3D
• BasicRenderEngine

Scene3D tworzy naszą scenę, w której będziemy tworzyć obiekty. Camera3D inicjuje kamerę, czyli jakby nasze “oczy”. Viewport3D można rozumieć jako pośrednika między kamerą a obiektami na scenie. Ogranicza to co widzisz na zasadzie okna. Posiada takie parametry jak wysokość i szerokość, także można zmieniać zasięg widoczności na scenie. BasicRenderEngine to klasa renderująca utworzone obiekty. Gdy utworzysz już jakieś obiekty, określisz materiały, jakie je pokrywają, zdefiniujesz sposób ich animowania, wówczas możesz je renderować właśnie przy pomocy tej klasy (a dokładnie metody renderScene).

Kolejne linie kodu tworzą jakby “środowisko Papervision3d”.

var viewport:Viewport3D = new Viewport3D();
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
var render:BasicRenderEngine = new BasicRenderEngine();
 
addChild(viewport);

Następnie tworzymy obiekt przechowujący materiały dla tworzonych przez nas obiektów:

var objectMaterial:MaterialObject3D = null;

Tyle tytułem wstępu. Przejdźmy do tworzenia trójwymiarowych obiektów.

1. Plane

Plane (czyli płaszczyzna) jest najprostszym obiektem, jaki możesz utworzyć w Papervision3D (i w grafice trójwymiarowej w ogóle), co nie oznacza, że jest najmniej przydatny. Najprostszą płaszczyznę tworzymy wpisując następujący kod:

var myPlane:Plane = new Plane();
scene.addChild(myPlane);

Powyższy kod tworzy najprostszą płaszczyznę przypominającą 2 trójkąty prostokątne połączone przeciwprostokątnymi. Utworzony obiekt wstawiam na scenę w drugiej linii kodu. Podobnie musimy postępować z pozostałymi obiektami. Więcej wiadomości o klasie Plane dowiesz się pod tym linkiem.

2. Cube

W tym przypadku cube oznacza również ogólnie prostopadłościan.

var frontMaterial:WireframeMaterial = new WireframeMaterial();
var backMaterial:WireframeMaterial = new WireframeMaterial();
var leftMaterial:WireframeMaterial = new WireframeMaterial();
var rightMaterial:WireframeMaterial = new WireframeMaterial();
var topMaterial:WireframeMaterial = new WireframeMaterial();
var bottomMaterial:WireframeMaterial = new WireframeMaterial();
 
var materialsList:MaterialsList = new MaterialsList();
materialsList.addMaterial(frontMaterial, "front");
materialsList.addMaterial(backMaterial, "back");
materialsList.addMaterial(leftMaterial, "left");
materialsList.addMaterial(rightMaterial, "right");
materialsList.addMaterial(topMaterial, "top");
materialsList.addMaterial(bottomMaterial, "bottom");
 
var myCube:Cube = new Cube(materialsList, 300, 500, 700, 2, 3, 8);
scene.addChild(myCube);

Do utworzenia prostopadłościanu potrzebujemy listy materiałów (MaterlialsList). Pierwsze 6 zmiennych tworzy nowe egzemplarze klasy WireframeMaterial dla poszczególnych ścian. Następnie tworzony jest egzemplarz klasy MaterialsList do którego w kolejnych sześciu liniach dodawane są kolejne materiały. Zmienna myCube tworzy nowy prostopadłościan. Kolejne parametry to:

• lista materiałów
• szerokość
• głębokość
• wysokość
• ilość segmentów na szerokość
• ilość segmentów na głębokość
• ilość segmentów na wysokość
• ściany wewnętrzne (ściany widoczne od środka)
• ściany wykluczone (ściany, które nie będą utworzone)

Więcej informacji o prostopadłościanach możesz przeczytać pod tym linkiem.

3. Cylinder

Cylinder tworzymy przy pomocy następującego kodu:

var myCylinder:Cylinder = new Cylinder(objectMaterial, 50, 100, 20, 20, -1);
scene.addChild(myCylinder);

Poszczególne parametry zainicjowanej klasy Cylinder to:

• materiał
• promień
• wysokość
• liczba segmentów pionowo
• liczba segmentów poziomo
• promień u góry cylindra
• parametr wskazujący czy górna ściana cylindra ma zostać utworzona
• parametr wskazujący czy dolna ściana cylindra ma zostać utworzona

Więcej informacji o klasie Cylinder dowiesz się pod tym adresem.

4. Cone

Stożek tworzymy podobnie do cylindra:

var myCone:Cone = new Cone(objectMaterial, 50, 50, 20);
scene.addChild(myCone);

Przykładowe parametry podawane przy tworzeniu egzemplarza klasy Cone to kolejno:

• materiał
• promień
• wysokość
• ilość segmentów w pionie
• ilość segmentów w poziomie

Więcej o klasie Cone dowiesz się pod tym linkiem.

5. Sphere

Kulę tworzy następujący kod:

var sphere:Sphere = new Sphere();
scene.addChild(sphere);

Powyższy kod tworzy kulę z domyślnymi parametrami. Można je ustawić podobnie jak w przypadku pozostałych obiektów tutaj opisywanych. Poszczególne parametry dla tworzenia egzemplarza klasy Sphere to:

• materiał
• promień
• ilość segmentów w pionie
• ilość segmentów w poziomie

Więcej o klasie Sphere dowiesz się pod tym linkiem.

Gdy na scenie utworzyłeś już wszystkie obiekty, wówczas możesz je renderować dodając w ostatniej linii następujący kod:

render.renderScene(scene, camera, viewport);

Na początku przydałaby się sama biblioteka. W tym celu odwiedzamy stronę http://code.google.com/p/papervision3d. Po prawej stronie w boxie “Featured downloads” znajdują sie linki do 2 plików (swc i zip). Nas interesuje ten drugi. W archiwum znajduje się katalog “org” i tylko on będzie nam potrzebny.

Utwórz teraz nowy plik Flash (AS3). Musi się on znajdować w tym samym katalogu, co “org”. W pierwszej klatce dodaj następujący kod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.objects.primitives.Plane;
 
var myViewport:Viewport3D = new Viewport3D();
var myScene:Scene3D = new Scene3D();
var myCamera:Camera3D = new Camera3D();
var myRenderer:BasicRenderEngine = new BasicRenderEngine();
var myPlane:Plane = new Plane();
 
addChild(myViewport);
myScene.addChild(myPlane);
myRenderer.renderScene(myScene, myCamera, myViewport);

Po naciśnięciu Ctrl + Enter wynik powinien być taki jak poniżej:

Wkrótce postaram się napisać o kształtach i pokrywaniu ich materiałami.

Na początku utwórz plik XML z następującą zawartością:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

< ?xml version="1.0" encoding="utf-8"?>
<images wname="banner.jpg" wwidth="600" wheight="107">
	<image name="14" width="600" height="400" desc="Obrazek 1" />
	<image name="gwozdz" width="600" height="400" desc="Obrazek 2" />
	<image name="hala" width="650" height="268" desc="Obrazek 3" />
	<image name="houseslandscape" width="850" height="562" desc="Obrazek 4" />
	<image name="khamlandscape" width="850" height="562" desc="Obrazek 5" />
	<image name="kwiat1" width="600" height="400" desc="Obrazek 6" />
	<image name="kwiat2" width="650" height="410" desc="Obrazek 7" />
	<image name="kwiat3" width="600" height="399" desc="Obrazek 8" />
	<image name="kwiat4" width="600" height="399" desc="Obrazek 9" />
	<image name="mlecz" width="650" height="433" desc="Obrazek 10" />
	<image name="moviehouse" width="850" height="562" desc="Obrazek 11" />
	<image name="pejzaz1" width="850" height="562" desc="Obrazek 12" />
	<image name="rece" width="700" height="400" desc="Obrazek 13" />
	<image name="0203042L" width="600" height="399" desc="Obrazek 14" />
	<image name="0203069L" width="600" height="399" desc="Obrazek 15" />
	<image name="0211022L" width="600" height="399" desc="Obrazek 16" />
	<image name="0281011L" width="600" height="399" desc="Obrazek 17" />
	<image name="0281021L" width="600" height="399" desc="Obrazek 18" />
	<image name="0281025L" width="600" height="399" desc="Obrazek 19" />
</images>

Plk XML musi się znajdować w tym samym katalogu, co plik SWF. Poniżej znajduje się cały kod ActionScript, który opiszę później.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("example.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, getXMLData);
function getXMLData(myEvent:Event):void {
	var myXML:XML = new XML(myEvent.target.data);
	galeria_mc.imgContainer_mc.addChild(imageLoader);
	imagesCount = myXML.image.length() - 1;
	for (var i:Number = 0; i < = myXML.image.length() - 1; i++) {
		trace(myXML.image.@name[i]);
		trace(imageWidth[i] = myXML.image.@width[i]);
		trace(imageHeight[i] = myXML.image.@height[i]);
		trace(imageDesc[i] = myXML.image.@desc[i]);
	}
}

Pierwsza linia tworzy nowy obiekt URLLoader. następnie za pomocą metody load obiekt wczytuje plik example.xml.

1
2

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("example.xml"));

Następnie tworzymy obiekt nasłuchujący, który uruchamia funkcję getXMLData, gdy tylko plik zostanie załadowany w całości.

myXMLLoader.addEventListener(Event.COMPLETE, getXMLData);

Pierwsza linia funkcji getXMLData tworzy nowy egzemplarz klasy XML. Dzięki użyciu parametru myEvent.target.data dane z pliku XML są przypisywane do egzemplarza klasy XML.

var myXML:XML = new XML(myEvent.target.data);

Przyjrzyjmy się teraz linii

imagesCount = myXML.image.length() - 1;

Image nie jest tutaj właściwością, a nazwą tagu XML. Oznacza to, że odwołanie się do konkretnych tagów odbywa się tak samo jak w przypadku pisania ścieżek do plików filmowych. Natomiast samo myXML jest odwołaniem się do tagu images przykładowego pliku XML czyli tagu o najwyższym poziomie w hierarchii pliku. Metoda length zlicza wszystkie wystąpienia tagu image w obrębie tagu images.

Pętla

1
2
3
4
5
6

for (var i:Number = 0; i < = myXML.image.length() - 1; i++) {
	trace(myXML.image.@name[i] + " | ");
	trace(myXML.image.@width[i] + " | ");
	trace(myXML.image.@height[i] + " | ");
	trace(myXML.image.@desc[i] + " | ");
}

pobiera każdy atrybut z każdego tagu image i wyświetla jego zawartość w panelu "output". Jak widać dostęp do atrybutów tagów otrzymujemy poprzedzając nazwę atrybutu znakiem "@". Dostęp do konkretnego tagu i jego atrybutów jest analogiczny jak w przypadku tablic, stąd [i] po każdym odniesieniu do atrybutu w pętli.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("pic.jpg"));
 
function preloadProgress(myEvent:ProgressEvent):void {
	var loaded:int = (myEvent.bytesLoaded / myEvent.bytesTotal) * 100;
	container_mc.percentLoaded_txt.visible = true;
	container_mc.percentLoaded_txt.text = loaded + "%";
}
function preloadComplete(myEvent:Event):void {
	container_mc.percentLoaded_txt.visible = false;
	container_mc.addChild(imageLoader);
	imageLoader.x = -(stage.stageWidth / 2);
	imageLoader.y = -(stage.stageHeight / 2);
}
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadProgress);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, preloadComplete);

W nowym pliku Flasha (scena w przykładzie ma rozmiar 400×300, ale oczywiście może on być dowolny) utwórz dwie warstwy. Dolną nazwij “container” a górną “as”.

Utwórz teraz nowy klip filmowy i przeciągnij go na scenę do warstwy “container”. Instancji klipu nadaj nazwę “container_mc”.

Otwórz klip filmowy i na środku utwórz pole tekstowe o dowolnych właściwościach tekstu. Nadaj jego instancji nazwę “percentLoaded_txt”.

Przejdź teraz do warstwy “as”. Otwórz panel akcji (F9) i wpisz poniższy kod:

var imageLoader:Loader = new Loader();

W ten sposób tworzysz nowy egzemplarz klasy Loader. Obiekt imageLoader będzie przetrzymywał załadowany obraz.

Wpisz teraz

imageLoader.load(new URLRequest("pic.jpg"));

Powyższy kod ładuje za pomocą metody load zewnętrzny obraz. Do pobierania zewnętrznej zawartości konieczne jest utworzenie nowego obiektu URLLoader, którego parametrem będzie ścieżka do pliku, który chcemy załadować.

Do działania preloadera potrzebna jest obsługa dwóch zdarzeń:
- ProgressEvent.PROGRESS,
- Event.COMPLETE.

Zajmijmy się teraz obsługą pierwszego z wymienionych.

1
2
3
4
5

function preloadProgress(myEvent:ProgressEvent):void {
	var loaded:int = (myEvent.bytesLoaded / myEvent.bytesTotal) * 100;
	container_mc.percentLoaded_txt.visible = true;
	container_mc.percentLoaded_txt.text = loaded + "%";
}

Powyższa funkcja jako parametr ma przekazane zdarzenie ładowania zawartości (ProgressEvent).
Zmienna loaded jest liczbą całkowitą ponieważ będzie przedstawiać procent załadowanych bajtów. W tym celu trzeba podzielić liczbę bajtów już załadowanych do całkowitej wielkości wczytywanego pliku (myEvent.bytesLoaded / myEvent.bytesTotal) i otrzymany ułamek pomnożyć przez 100.

Właściwość visible dla pola tekstowego ustaw na true, żeby pole tekstowe z procentami było widoczne. Za pomocą właściwości text przypisz wyjściową zawartość do pola tekstowego, czyli załadowany procent danych i znak “%”.

Przejdźmy teraz do funkcji reagującej na zdarzenie ukończenia pobierania zewnętrznego pliku

1
2
3
4
5
6

function preloadComplete(myEvent:Event):void {
	container_mc.percentLoaded_txt.visible = false;
	container_mc.addChild(imageLoader);
	imageLoader.x = -(stage.stageWidth / 2);
	imageLoader.y = -(stage.stageHeight / 2);
}

Pierwsza linia funkcji ukrywa pole tekstowe ustawiając właściwość visible na false. W kolejnej linii przy pomocy metody addChild do klipu filmowego przechowującego załadowaną zawartość dodawany jest załadowany obrazek.

Ostatnie dwie linie ustawiają obraz na środku sceny. Pamiętaj że ten kod zadziała tylko wtedy, gdy masz obraz o takich samych wymiarach jak scena. W przypadku innych wymiarów należy inaczej zdefiniować własności x i y.

Ostatnie dwie linie odbierają dwa omówione wyżej zdarzenia tworząc 2 obiekty nasłuchujące

1
2

imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadProgress);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, preloadComplete);

Do obiektu Loader dodajemy obiekty nasłuchujące dwa poszczególne zdarzenia ProgressEvent.PROGRESS i Event.COMPLETE, które obsługiwane są przez odpowiednie funkcje preloadProgress oraz preloadComplete

1. Napisz coś na scenie. Dla oszczędności czasu niech to nie będzie długi napis . Pamiętaj, żeby ustawić tekst na statyczny.

2. Dwukrotnie naciśnij Ctrl+B (mając zaznaczony tekst) żeby najpierw rozdzielić napis na pojedyncze litery, a następnie przekonwertować go na wektory.

3. W pierwszej klatce wymaż gumką niewielką część końca ostatniej litery napisu. przejdź do kolejnej klatki. Naciśnij F6 i wymarz kolejny kawałek litery. Niestety musisz tak postępować aż wymażesz cały napis.

4. Zaznacz wszystkie klatki. Możesz to zrobić klikając na pierwszą a następnie z wciśniętym klawiszem Shift ostatnią. Kliknij na którejś z zaznaczonych klatek prawym przyciskiem myszy i wybierz polecenie Reverse Frames. Ponownie kliknij prawym przyciskiem myszy na którąkolwiek z zaznaczonych klatek i wybierz Shape Tween.

5. Przetestuj animację naciskając Ctrl + Enter.

1
2
3
4

#mydiv {
line-height: 1px;
overflow: hidden;
}

Otrzymujemy  w ten sposób DIV-a o wysokości 1px, który działa pod IE6.

2. Następnie klikamy na Edit (Edytuj) a następnie Define pattern… (Zdefiniuj wzorek…). Nadajemy jakąkolwiek nazwę i klikamy OK.

3. Tworzymy nowy plik i rysujemy w nim jakiś kształt. Zaznaczamy warstwie (Ctrl + klik na warstwie w panelu Layers (Warstwy)).

4. Tworzymy nową warstwę i wybieramy wiadro z farbą. W opcjach narzędzia zmieniamy wypełnienie na wzór, po czym wybieramy ten, który przed chwilą utworzyliśmy.

5. Po wyborze klikamy wiadrem z farbą na nową warstwę. Tym sposobem wypełniamy uprzednio utworzony kształt wzorkiem.

6. Klikamy dwukrotnie na warstwie ze wzorkiem, aby przejść do opcji mieszania i ustawiamy opcje jak poniżej:

7. Ustawiamy krycie na 75%. Powinniście otrzymać taki efekt (wzór jest nałożony na warstwę pokrytą gradientem):