Z tego tutoriala dowiesz się jak zrobić 1 pixelowe linie jako tło do strony lub dowolnych elementów. W części 2 znajdziesz informacje jak zrobić grubsze linie, a w 3 gotowe PATTERNy do pobrania.

• Skośne linie cz.1
• Skośne linie cz.2 - grube linie
• Skośne linie cz.3 - gotowe PATTERNy + opis jak zainstalować.

Tutorial jest napisany krok po kroku dla początkujących osób, które nie miały styczności z programami Adobe Photoshop i Image Ready.

Najpierw jak zrobić linie 1 pixelowe i zapisać je jako wzór PATTERN

1. Utwórz nowy dokument o wymiarach 4px na 4px (czym zrobisz większy tym linie będą rzadziej) bez tła.

2. Teraz powieksz całość do 1600% - narzędziem ZOOM TOOL lub wpisz na dole dokumentu 1600%

3. Wybierz narzedziem Pencil TOOL i narysuj 1 pixelową linie tak jak na poniższym obrazku.

4. Zdefiniuj jako PATTERN w tym celu wybierz EDIT - > DEFINE PATTERN... , nazwij dowolnie i kliknij OK.

5. Aby wykorzystać zrobiony przed chwilą wzór utwórz nowy dokument (CTRL+N) np. 800x600px, wybierz PAINT BUCKET TOOL następnie na menu narzędziowym wybierz PATTERNS i wybierz swój wzorek tak jak na obrazku:

Zrób nową warstwę w okienku (Layers - warstwy), kliknij na projekcie aby cały pokryć liniami.

6. Jak widzisz linie są czarne. Jak je najszyciej przekolorować? Zrób jeszcze jedną wartwę i pokoloruj ją na np. zielony. Teraz trzymając ALT najedź kursorem między warstwę z liniami i kolorem (pokażą Ci się dwa kółeczka) i klknij. Linie powinny Ci się przekolorwać oraz koło warstwy pokazać strzałeczka tak jak na obrazku poniżej.

7. Masz już tło, teraz trzeba je zapisać tak aby jak najmniej zajmowało i ładnie się powielało czyli wytnij z niego mały kwadrat rozmiaru 4x4px (takiego jak zrobiłeś Pattern z liniami). Użyj narzędzia CROP TOOL , powiększ jak najbardziej i zaznacz przytrzymując SHIFT 4 pixele.

Kliknij dwa razy na zaznaczenie lub naciśnij ENTER.

8. Eksportowanie do GIF - wybierz FILE - SAVE FOR WEB, ustaw jak na obrazku i zapisz np jako bg.gif

Twoje tło jest gotowe, możesz je ustawić jako tło strony.

Przykład kodu CSS:

body{
background-image:url(url-obrazka/bg.gif);
}

Na tym się kończy pierwsza część tutoriala.

• Skośne linie cz.1
• Skośne linie cz.2 - grube linie
• Skośne linie cz.3 - gotowe PATTERNy + opis jak zainstalować.

Autor: Daniel Perec
D.Perec@d4u.pl