Polskie Forum Użytkowników GIMP-a

Tutoriale => Inkscape => Wątek zaczęty przez: Ravicious on 19.01.2008, 13:52:09



Tytuł: Atrakcyjna ikona
Wiadomość wysłana przez: Ravicious on 19.01.2008, 13:52:09
Atrakcyjna ikona
Tutorial

Opracowanie: rav
Oryginał: Inkscape-tastic icons (http://www.starfishwebconsulting.co.uk/tasty_icons)
Poziom trudności: łatwy

(http://www.gimpuj.info/gallery/1039_19_01_08_2_31_28_3.png)




Tutorial opisuje jak w prosty sposób zrobić elegancką ikonkę. Tutorial jest na licencji Uznanie autorstwa-Na tych samych warunkach 3.0 Unported (http://creativecommons.org/licenses/by-sa/3.0/deed.pl), a jego autorami są osoby z Starfish web consulting (http://www.starfishwebconsulting.co.uk/about).

Tutorial napisany w wersji Inkscape 0.45 . W innych wersjach nazwy narzędzi i pojęć mogą się różnić.



[lp] Zaczynamy

[lp] 1. Otwórz nowy obraz - Plik -> Nowy -> icon_64x64. Narysuj dowolny okrąg - klawisz [F3]. Za pomocą toolbara zmień jego rozmiary na 64x64 px, a wartości X i Y na 0.

Toolbar
(http://www.gimpuj.info/gallery/1039_19_01_08_2_30_25_0.png) (http://www.gimpuj.info/)

(http://www.gimpuj.info/gallery/1039_19_01_08_2_30_25_1.png) (http://www.gimpuj.info/)


[lp] 2. Za pomocą klawiszy [Shift] + [Ctrl] + [F] otwórz okno Wypełnienie i kontur. Przejdź do zakładki Kontur i upewnij się, że jest on wyłączony (powinna być wybrana opcja Bez rysowania). Następnie wybierz kolor dla swojej ikony. Możesz to zrobić na różne sposoby: wybrać zakładkę Wypełnienie w oknie Wypełnienie i kontur lub wybrać kolor z paska u dołu okna Inkscape. Proponuję kliknąć na małą strzałkę tuż przy prawej granicy okna Inkscape i z listy wybrać gamę kolorów Tango Icon Theme Palatte, a następnie wybrać odpowiadający nam kolor.

(http://www.gimpuj.info/gallery/1039_19_01_08_2_30_25_2.png)



[lp] 3. Pamiętasz punkt 1.? Przypomnij sobie, jak precyzyjnie zmieniać rozmiar figury. Utwórz okrąg o wymiarach 58x58 px i umieść go na pozycji 3 - zarówno dla X jaki i Y. Naciśnij [Shift] + [Ctrl] + [F] i daj okręgowi biały kontur oraz wypełnienie, przejdź do zakładki Styl konturu i ustal jego szerokość na 2px.

(http://www.gimpuj.info/gallery/1039_19_01_08_2_30_25_3.png)


[lp] 4. Jako wypełnienie białego okręgu wybierz Gradient koncentryczny. Wartości gradientu powinny ustawić się same, ale "gdyby coś poszło nie tak", to gradient powinien być na początku cały biały, a na końcu całkowicie przezroczysty. Za pomocą narzędzia do Modyfikowania i tworzenia gradientów (skrót: [Ctrl] + [F1]) przeciągnij środek gradientu poza granice obrazu, tak jak jest to ukazane poniżej (Gradient koncentryczny to kółka).

(http://www.gimpuj.info/gallery/1039_19_01_08_2_30_25_4.png)


[lp] 5. Czas na zmodyfikowanie konturu (ciągle pracuj na tym drugim, mniejszym okręgu). Jako rodzaj konturu wybierz Gradient liniowy i oba punkty gradientu przeciągnij naprzeciwko siebie, poza granice obrazu, tak jak na screenie poniżej (Gradient liniowy to kwadraciki).

(http://www.gimpuj.info/gallery/1039_19_01_08_2_30_25_4.png)



[lp] 6. Ten punkt możesz, aczkolwiek nie musisz wykonać. Stwórz okrąg o wymiarach 53x53 px i duplikuj go (skrót: [Ctrl] + [D]), nie powinien on mieć konturu. Ustaw je mniej więcej w takiej pozycji jak na zdjęciu i zaznacz klawiszami: najpierw wybierz jeden z nich, przytrzymaj [Shift] i wybierz drugi.  Teraz wybierz Ścieżka -> Różnica (skrót: [Ctrl] + [-]). Powstała figurę umieść na okręgu (możesz ją ewentualnie obrócić), jako wypełnienie wybierz kolor biały, a Master Opacity ustaw na 40%.

(http://www.gimpuj.info/gallery/1039_19_01_08_2_31_28_0.png)

(http://www.gimpuj.info/gallery/1039_19_01_08_2_31_28_1.png)


[lp] 7. Wypadałoby umieścić coś w środku ;) Może to być tekst lub jakiś kształt. Za pomocą narzędzia do tworzenia obiektów tekstowych (skrót: [F8]) stworzyłem literkę R, krój czcionki to Arial Rounded MT Bold, a rozmiar to 50. Następnie za pomocą opcji Obiekt > Wyrównaj i rozłóż... wycentrowałem obiekt względem strony.

(http://www.gimpuj.info/gallery/1039_19_01_08_2_31_28_2.png)

I tak oto stworzyliśmy wspaniałą ikonkę :)

(http://www.gimpuj.info/gallery/1039_19_01_08_2_31_28_3.png)


[lp] Koniec



Ikonę można oczywiście skalować do pożądanych rozmiarów (gdy jest duża nie wygląda najlepiej ;) )
Nie podoba ci się kolor ikony? Wystarczy wybrać największy okrąg i zmienić jego kolor.
Podgląd ikony w różnych rozmiarach możesz zobaczyć w oknie Widok > Icon Preview.
Więcej ikon w mojej galerii (http://www.gimpuj.info/index.php?action=gallery;su=user;cat=1237;u=1039).




Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Grolak on 06.04.2008, 11:28:36
Super ikonka, już ją zrobiłem i pięknie wygląda. Mam tylko pytanie: gdzie jest ten Toolbar? Bo ja robiłem na oko. I jeszcze jedno: jak zrobić aby obraz został zapisany w .png? Gdzieś w jakimś BVA było to poruszane ale nie znalazłem.


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Calii on 06.04.2008, 12:14:10
Aby obraz byl .png nalezy wejsc w menu Plik -> Eksportuj do bitmapy i wtedy masz kilka opcji [eksportowanie zaznaczenia, calego obrazka etc.]
Toolbar to inaczej dla mnie pasek narzędziowy tudzież belka z opcjami, więc można tą nazwę wykorzystać. Gdy używasz narzędzia [strzalka czarna, pierwsza na liscie; skrót F1] pokazują się takie opcje na owej belce. Gdzie? Pod główną belką menu Inkscape'a. Nie do przeoczenia :)


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: edziuK on 06.04.2008, 13:26:26
Dla początkującego np. takiego jak ja, zbyt wiele niejasności, ale jakoś się udało.

(http://www.gimpuj.info/gallery/6760_06_04_08_2_22_27.png)



Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Calii on 06.04.2008, 13:50:37
Możecie opisać owe nieścisłości i niepewne kroki? Będzie nam łatwiej uzupełnić ten tutorial


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Ravicious on 06.04.2008, 17:02:27
@Grolak

Brakuje mi tutaj literki lub czegoś w tym stylu ;)

@edziu_kosiara

Bardzo dobra ikonka! :)

I przyłączam się do prośby Calii.


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: edziuK on 06.04.2008, 17:29:38
No więc tak:
W punkcie 4 kontur jest już ''pociągnięty'' gradientem a przecież jak to zrobić opisuje dopiero punkt 5. W punkcie 6 trzeba odbić poziomo, lecz nie jest napisane jak.


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Ravicious on 06.04.2008, 21:40:26
Pamiętaj edziu, że Inkscape zapamiętuje ostatnio wybrane opcje, także gradient mogłeś mieć już ustawiony. Postaram się to sprawdzić.


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: $argon on 18.04.2008, 20:19:30
Nie wiem dlaczego inni piszą, że niezrozumiały tutek :-[. Dzisiaj postanowiłem nauczyć się obsługi inkscape, weszłem i było parę filmików po minucie pierwszego mi się znudziło <lol> W gimpie uczyłem się podstaw z sygn, więc po ściągnięciu włączam pierwszy lepszy tut i robię oto moja praca  :)
(http://www.gimpuj.info/replacement.png)
Ikona do utorrenta bo mi się oryginalna nie podobała


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Tuptuś on 17.05.2008, 17:55:44
Moja pierwsza praca w Inkscape :D Robiłem pół godziny, ale chyba nawet średnio wyszła :) Poza tym robiłem w Inkscape 0.46, więc kilka skrótów było pomieszanych.
Ikonka do mojego programu: (http://www.gimpuj.info/replacement.png)

Edziu, bardzo ładna ikonka :)


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Radzio6791 on 15.06.2008, 17:21:12
Mój 1 tutorial :
(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: mx2 on 26.06.2008, 21:45:13
moja ikonka ;]
(http://www.gimpuj.info/gallery/1370_26_06_08_10_43_02.png) (http://www.gimpuj.info/)
(radzio ty chyba to w gimpie robiłeś a nie w inku??)


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: fixer_33 on 29.09.2008, 20:53:41
No w końcu coś w inkscape mi wyszło.

(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Gaj0ryn on 18.10.2008, 21:45:58
Jak wam się podoba moja ikona ??

Także zrobiona na GIMPIE (2.6)

(http://www.gimpuj.info/gallery/11489_18_10_08_10_44_41.PNG)


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Roztargniona on 10.02.2010, 02:45:52
Moja ikonka
(http://www.gimpuj.info/gallery/36774_10_02_10_2_33_25.png) (http://www.gimpuj.info/)
Niestety u mnie na pulpicie ma postrzępione krawędzie. I nie wiem jak zrobić by były ładne (zamieniłam z .png na .ico w Gimpie).


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: marcin199518 on 24.02.2010, 21:41:50
moja ikonka :D
(http://www.gimpuj.info/gallery/34777_24_02_10_9_41_03.png)


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: xy0urn3ux on 16.04.2010, 11:55:24
Kiedy daje .ico to jest to strasznie rozszarpane. Wie ktoś co z tym zrobić?

Oto moja praca: (http://www.gimpuj.info/replacement.png) (http://img190.imageshack.us/i/asdml.png/)


Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: Naccon on 03.02.2011, 20:29:48
Super.Mam Inkscape 1 dzien a i tak wszystko zrozumialem.
oto moje dzielo
(http://www.gimpuj.info/replacement.png) (http://img684.imageshack.us/i/path8119.png/)



Tytuł: Odp: Atrakcyjna ikona
Wiadomość wysłana przez: nioqustudio on 08.04.2012, 21:38:31
Moja ;p A do tego robiłem to w gimpie ;f

(http://www.gimpuj.info/gallery/73586_08_04_12_9_25_03.png)