Lekcja 5: Podstawy rysunku BBCode poziom IIO.K. Więc już wiemy, że dobrym wyborem, aby wykorzystanie znaku 2pt █ ASCII dla naszych obrazów BBCode. Ale jak ładnie nim rysować?
Cierpliwość i odrobina artystycznego zmysłu doprowadzą nas do celu
Musisz to ćwiczyć i eksperymentować, aby to w końcu to poczuć.
W aktualnej wersji przeglądarek Chrome/Mozilla/Safari sugeruję wykorzystanie
2px Monospace font podczas rysowania za pomocą BBCode.
Jak wspomniano w
lekcji 10.
Ćwiczenie: Wybrane znaki ASCII do naszego rysunku BBCode: ░ oraz █
Step 1) Narysuj kwadrat wykorzystując znak ASCI █. Pamiętaj o maksymalnej wysokości. (
Lekcja 2).
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
Krok 2) Narysuj krzyż wykorzystując znaki ASCII ░ .
█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████
Krok 3) Narysuj krzyż i kółka znakiem ASCII ░.
█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████
Krok 4) Zaokrąglij obramowanie znakami ASCII ░.
░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░
Kod przykładu :[b]Krok 1)[/b] Narysuj prostokąt znakami ASCII █. Pamiętaj o maksymalnej wysokości. ([url=https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187]Lekcja 2[/url]).
[quote][size=2pt]█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████[/size][/quote]
[b]Krok 2) [/b]Zaokrąglij obramowanie znakami ASCII ░.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]
[b]Krok 3) [/b]Narysuj krzyż i kółka znakiem ASCII ░.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]
[b]Krok 4)[/b] Zaokrąglij obramowanie znakami ASCII ░.
[quote][size=2pt]░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░[/size][/quote]
Lekcja 6: KoloryAby zmienić kolor BBCode, elementy projektu sygnatury wystarczy dodać atrybut koloru.
Wartość atrybutu koloru może mieć postać
nazw kolorów jak "Black, White, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, Lime Green"
albo postać kolorów w
formie szesnastkowej i
skróconej formie szesnastkowej która pomoże zaoszczędzić kilka znaków . (limity znaków sygnatur nie są duże więc oszczędzaj tyle znaków ile tylko Ci się uda
)
Skróty szesnastkowe na przykładach: Forma.szesnastkowa
| ........Skrótowa.forma .szesnastkowa........
|
#000000
| #000
|
#ffffff
| #fff
|
#77CC33
| #7C3
|
#33CC99
| #3C9
|
Występuje także '
przezroczysty' atrybut koloru w BBCode który jest bardzo przydatny w obrazach BBCode.
Ten tekst jest widoczny
ALE TEN NIE A ten jest widoczny
Ten tekst jest widoczny [color=transparent]ALE TEN NIE[/color] A ten jest widoczny
Lekcja 7: Kolory - GradientyAby stworzyć gradient dla twojego tekstu lub obrazu BBCode można zaoszczędzić sporo czasu wykorzystując
'Text Color Fader' - gradient generator
Kiedy miałem mniej doświadczenia z BBCodes, robiłem gradienty ręcznie. W edytorach graficznych rysowałem kwadraty z tłami gradientowymi, a następnie ręcznie i po umieszczeniu linii pomocniczych w tej samej odległości od siebie byłem w stanie odebrać potrzebne kolory za pomocą selektora kolorów. Ale potem znalazłem bardzo dobry generator gradientu
http://patorjk.com/text-color-fader/To moje ulubione narzędzie do tworzenia dobrych gradientów i możesz ustawić „Kod wyjściowy” na „Standardowy kod forum”.
Interfejs użytkownika
http://patorjk.com/text-color-fader jest bardzo prosty. Napisz wiadomość, wybierz liczbę kolorów i ustaw kod wyjściowy na „Standardowy kod forum”. Naciśnij „'generate color faded text” i gotowe
(prawie).
PRzykład:Lesson 7: something about gradients xD
[color=#9600ff]L[/color][color=#9c07f2]e[/color][color=#a10de4]s[/color][color=#a714d7]s[/color][color=#ac1bc9]o[/color][color=#b221bc]n[/color] [color=#bd2fa1]7[/color][color=#c23594]:[/color] [color=#cd4379]s[/color][color=#d34a6b]o[/color][color=#d8505e]m[/color][color=#de5751]e[/color][color=#e35e43]t[/color][color=#e96436]h[/color][color=#ee6b28]i[/color][color=#f4721b]n[/color][color=#f9780d]g[/color] [color=#f9780e]a[/color][color=#f3711c]b[/color][color=#ed6a2b]o[/color][color=#e86339]u[/color][color=#e25c47]t[/color] [color=#d64e63]g[/color][color=#d04771]r[/color][color=#ca3f80]a[/color][color=#c5388e]d[/color][color=#bf319c]i[/color][color=#b92aaa]e[/color][color=#b323b8]n[/color][color=#ad1cc6]t[/color][color=#a715d4]s[/color] [color=#9c07f1]x[/color][color=#9600ff]D[/color]
W porządku, teraz wiemy, jak szybko wygenerować tekst z kolorem gradientu, ale jak użyć tego samego generatora do generowania gradientów dla obrazów BBCode? To trochę bardziej skomplikowane, ponieważ zależy to od naszych potrzeb. Różne wzory = różne potrzeby.
Zacznijmy od prostego przykładu.
Przykład: ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████
████████ ████████ ████████ ████████
| ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████
████████ ████████ ████████ ████████
|
[table]
[tr]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
[/td]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
[/td]
[/tr]
[/table]
Mamy dwa ciemne wykrzykniki i chcemy je pomalować kolorem gradientowym.
W naszym przykładzie każdy wykrzyknik zawiera 17 linii znaków █ ASCII o rozmiarze 2pt.
Aby wygenerować heksadecymalne wartości dla naszych gradientów otwórz
http://patorjk.com/text-color-fader/jako "wiadomość" wpisz:
12345678901234567
Możesz napisać coś innego tylko o tym, że długość wiadomości musi wynosić 17 znaków. Ponieważ potrzebujemy 17 kolorów dla 17 linii.
Wybierz kolory (ustawię 2 kolory, # 0040ff i # bd0021) i naciśnij „generate color faded text”. Dodaj znacznik koloru do każdej linii rysunku BBCode i skopiuj wygenerowane kolory do obrazu BBCode jako nowe wartości kolorów.
Spróbuj pomalować drugi wykrzyknik „do tyłu”.
Wyniki ćwiczenia: ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████
████████ ████████ ████████ ████████
| ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████
████████ ████████ ████████ ████████
|
[table]
[tr]
[td]
[size=2pt]
[color=#0040ff]████████
[color=#0c3cf1]████████
[color=#1838e3]████████
[color=#2334d5]████████
[color=#2f30c8]████████
[color=#3b2cba]████████
[color=#4728ac]████████
[color=#53249e]████████
[color=#5f2090]████████
[color=#6a1c82]████████
[color=#761874]████████
[color=#821466]████████
[color=#8e1059]████████
[color=#9a0c4b]████████
[color=#a5083d]████████
[color=#b1042f]████████
[color=#bd0021]████████
[/td]
[td]
[size=2pt]
[color=#bd0021]████████
[color=#b1042f]████████
[color=#a5083d]████████
[color=#9a0c4b]████████
[color=#8e1059]████████
[color=#821466]████████
[color=#761874]████████
[color=#6a1c82]████████
[color=#5f2090]████████
[color=#53249e]████████
[color=#4728ac]████████
[color=#3b2cba]████████
[color=#2f30c8]████████
[color=#2334d5]████████
[color=#1838e3]████████
[color=#0c3cf1]████████
[color=#0040ff]████████
[/td]
[/tr]
[/table]
Tips & Tricks (3): oszczędzanie znaków (I)Podczas pracy nad sygnaturą BBCode
nie musimy zamykać znacznika koloru przed dodaniem kolejnego znacznika koloru [/ b]. To może oszczędzić wiele znaków.
Nie musimy zamykać wielu tagów, takich jak [/ b], [/ size], [/ font] i innych. Więcej porad wkrótce
Lekcja 8: Podstawy rysunku BBCode poziom IIIZnamy już najważniejsze zagadnienia dotyczące sygnatur BBCode. Czas stworzyć prostą sygnaturę dla Serior / Hero / Legendary Members.
Powiedzmy, że chcemy stworzyć sygnaturę, która będzie wyglądała tak:
░░░░░░░▄▄▄▄▄▄ ░░░░▄██████████▄ ░░░██████████████ ░░██████░▐▌░██████ ░█████░░░░░░░▀█████ ██████▄▄░░▄▄░░██████ ████████░░▀▀░▄██████ ████████░░▄▄▄░░█████ ██████▀▀░░▀▀▀░░█████ ░█████░░░░░░░░█████ ░░██████░▐▌░██████ ░░░██████████████ ░░░░▀██████████▀ ░░░░░░░▀▀▀▀▀▀ ░░░▀▀▀████████▀▀▀
| We ♥ Bitcoin
|
Nie napiszę tutouriala krok po kroku, ale zamiast tego załączam film, w którym przedstawiłem cały proces tworzenia. Podwoiłem prędkość klipu, w rzeczywistości zajęło mi to 18,5 minuty, a dzięki podwojeniu prędkości skróciłem wideo do 9 minut 12 sekund. (oryginalny film zamieszczony przez twórcę poradnika)
Lekcja 8 video tutorial: https://youtu.be/McKHrx1tBK0Gdy chcemy odtworzyć obraz / logo za pomocą BBCode, dobrze jest przygotować i uploadować oryginalny plik obrazu, abyśmy mogli na bieżąco weryfikować rezultaty naszej pracy z oryginałem
Lekcja 8 logo Bitcoin: https://i.imgur.com/gPmC4Xi.pngTo uproszczone logo Bitcoin - dostosowałem kąt nachylenia, aby wyglądało lepiej w BBCode. Znaki ASCII 2pt nie są idealne dla rysunków BBCode, ale chociaż rozmiar 2pt jest najbardziej kompatybilny, co już wiemy z
Lekcji 4.
W aktualnej wersji przeglądarek Chrome/Mozilla/Safari sugeruję wykorzystanie
2px Monospace font podczas rysowania za pomocą BBCode.
Jak wspomniano w
lekcji 10.
Lekcja 8 kod sygnatury BBCode:[center][table]
[tr]
[td]
[size=2pt][color=#f90][color=transparent]░░░░░░░[/color]▄▄▄▄▄▄
[color=transparent]░░░░[/color]▄██████████▄
[color=transparent]░░░[/color]██████████████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░[/color]▀█████
██████▄▄[color=transparent]░░[/color]▄▄[color=transparent]░░[/color]██████
████████[color=transparent]░░[/color]▀▀[color=transparent]░[/color]▄██████
████████[color=transparent]░░[/color]▄▄▄[color=transparent]░░[/color]█████
██████▀▀[color=transparent]░░[/color]▀▀▀[color=transparent]░░[/color]█████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░░[/color]█████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░░░[/color]██████████████
[color=transparent]░░░░[/color]▀██████████▀
[color=transparent]░░░░░░░[/color]▀▀▀▀▀▀
[color=transparent]░░░[/color][color=#e1e1e1]▀[color=#d3d3d2]▀[color=#c6c4c3]▀[color=#b8b6b4]█[color=#aaa8a5]█[color=#9c9a96]█[color=#8f8b87]█[color=#817d78]█[color=#918e8a]█[color=#a19e9b]█[color=#b1afad]█[color=#c1c0be]▀[color=#d1d0d0]▀[color=#e1e1e1]▀
[/td]
[td]
[size=25pt][b][i][color=#f90]We [color=red]♥[/color] Bitcoin[/b][/size]
[/td]
[/tr]
[/table][/center]
Dzisiaj pierwsze 8 lekcji - kolejne wkrótce....