Tytuł: Atrakcyjna ikona Wiadomość wysłana przez: Ravicious on 19.01.2008, 14: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, 12: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, 13: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, 14: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, 14: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, 18: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, 18: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, 22: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, 21: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, 18: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, 18: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, 22: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, 21: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, 22: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, 03: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, 22: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, 12: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, 21: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, 22: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) |