Nauka programowana (projektowania) grafiki na stronach www?Jak to sie robi?

Odpowiedz Nowy wątek
2019-04-21 12:29
0

Witajcie,
interesuje mnie tworzenie grafiki na strony www.
Jakich jezykow programowania trzeba sie nauczyc by samemu tworzyc grafike www? Pomijam juz HTML, CSS i programy typu Adobe.

Pokaż pozostałe 7 komentarzy
to przykład fotografiki - ostatnio robi się ich coraz więcej - ale może się wycofam, bo przecież kto by chciał płacić za udostępnienie szablonów do robienia grafiki i kto by tego szukał, pisze się przecież od razu do grafika ... - Ł Mar (born-kes) 2019-05-04 21:03
Dodam bo mi się przypomniało, facebook blokuje (ogranicza) jeśli jest za dużo tekstu na grafice - można to obsłużyć i się tym wyróżnić - Ł Mar (born-kes) 2019-05-10 14:49
@Ł Mar (born-kes) "tekstu na grafice" – Facebook skanuje grafiki pod kątem tekstu? Które grafiki? - Silv 2019-05-10 16:49
@Ł Mar (born-kes) dzięki, no wiem, że pewnie łatwo było znaleźć... Trochę mnie uspokoiło, skoro już to wiem. :) - Silv 2019-05-10 22:35

Pozostało 580 znaków

2019-04-21 12:52
1

Ja się kompletnie na grafice nie znam, ale mnie zawsze się wydawało, że mało to ma wspólnego z programowaniem, a prawie wszystko z gotowymi rozwiązaniami, tj. z oprogramowaniem do tworzenia grafiki typu właśnie programy firmy Adobe czy Gimp.


edytowany 3x, ostatnio: Silv, 2019-04-21 15:11

Pozostało 580 znaków

2019-04-21 13:18
0
Kubs napisał(a):

Pomijam juz HTML, CSS i programy typu Adobe.

Naucz się najpierw tego, a potem sie zobaczy ;)


Pozostało 580 znaków

2019-04-21 13:44
0

:) A gdybys mogl dodac kiedy uzyc canvas, kiedy svg, a kiedy program graficzny np. illustrator?

Pozostało 580 znaków

2019-04-21 15:14
1

Co do ostatniego pytania - tak z grubsza różnica jest taka, że canvas służy do rysowania na stronie, obrazek jest tworzony dynamicznie, zgodnie z aktualnymi potrzebami, natomiast w przypadku osadzanie gotowej grafiki, czy to rastrowej, czy wektorowej, umieszczasz na stronie plik, który co najwyżej możesz sobie skalowac, ale nie zmieniasz jego treści.


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
SVG chyba mozna jeszcze manipulowac. W koncu to kod :p - stivens 2019-04-21 15:15
No można, ale to się mija z celem. Moim zdaniem - albo osadzasz svg, albo rysilujesz na canvas - cerrato 2019-04-21 15:22
Dziękuje :) - Kubs 2019-04-22 13:19
Niekoniecznie. SVG może być tylko sposobem na wyświetlanie prymitywów (ścieżki, kółka, linie, tekst itp.) w celu zrobienia czegoś dynamicznego, np. dynamicznego wykresu. Nawet React wspiera SVG. Popularne jest też D3, czy parę innych bibliotek. - LukeJL 2019-04-24 19:53

Pozostało 580 znaków

2019-04-24 15:08
1

Jak grafika w webie to webgl/threejs/blender, chyba @LukeJL sie w to bawi

Dzięki bardzo. To może @LukeJL pomoże :) - Kubs 2019-04-24 15:15

Pozostało 580 znaków

2019-04-24 18:49
1
cerrato napisał(a):

Co do ostatniego pytania - tak z grubsza różnica jest taka, że canvas służy do rysowania na stronie, obrazek jest tworzony dynamicznie, zgodnie z aktualnymi potrzebami, natomiast w przypadku osadzanie gotowej grafiki, czy to rastrowej, czy wektorowej, umieszczasz na stronie plik, który co najwyżej możesz sobie skalowac, ale nie zmieniasz jego treści.

Moim zdaniem właśnie odwrotnie:

  • SVG, to wektorówka. Chcesz przesunąć w niej obiekt, to zmieniasz jego współrzędne.
  • Canvas, to takie - nomen omen - płótno. Jak chcesz coś pozmieniać, to musisz przerysować od nowa. Będzie przydatne, jak chcesz operować na poszczególnych pikselach.

Pozostało 580 znaków

2019-04-24 20:21

Witajcie,
interesuje mnie tworzenie grafiki na strony www.
Jakich jezykow programowania trzeba sie nauczyc by samemu tworzyc grafike www? Pomijam juz HTML, CSS i programy typu Adobe.

Co to znaczy grafika www?
Konkretnie?

Jeśli chcesz mieć rysunek kotka czy pieska, to tutaj lepiej się nie bawić w mozolne programowanie grafiki, tylko otworzyć wybrany program graficzny, a następnie stworzyć zwierzę wizualnie, a na końcu eksportować zwierzaka do formatu, który można osadzić na stronie (np. .jpg, .png, .svg).

Ale z drugiej strony - jeśli chcesz mieć zaledwie prosty efekt - np. zaokrąglony przycisk, gradient, figura geometryczna, to odwrotnie - łatwiej to zrobić w HTML/CSS (ew. zamiast HTML można wklepać ręcznie te parę linijek SVG). Jest to bardziej elegancko i łatwiej coś zmienić, np. kolor gradientu prosto w CSS niż w edytorze graficznym.

Jeśli potrzebne są dodatkowe parametry - np. kółko, które będzie podążało za kursorem, to tutaj musisz dodatkowo użyć JavaScript, żeby ręcznie ustawić parametry elementów HTML czy SVG albo style CSS (możesz wykorzystać takie biblioteki jak React, czy D3, które pomogą ci zsynchronizować wejście(dane) z wyjściem(końcowym wyglądem)).

JSa też możesz użyć, jak chcesz zrobić, co łatwiej wygenerować komputerowo niż ręcznie. Np. fraktale. Tutaj łatwiej jest zakodować "przepis", sposób wykonywania obliczeń, a potem to wyświetlić na ekranie. Pytanie tylko jak wyświetlać? Jakkolwiek. Jednak ja ostatnio próbowałem wygenerować fraktal za pomocą divów (gdzie każdy div miał wymiary 1x1 pikseli). Efekt był taki, że generował tego fraktala z ileś sekund. Przypuszczam, że wygenerowanie tego na Canvas byłoby szybsze.

Canvas natomiast to taki prostokąt do malowania, działa na pikselach, więc rzeczy, w których masz różne efekty na poziomie pojedynczych pikseli łatwiej się generuje.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Jest również coś takiego jak WebGL, czyli Canvas ale przyśpieszony sprzętowo. Tutaj można nawet 3D robić. Jednak pisanie w czystym WebGL nie jest zbyt wygodne, więc powstały biblioteki takie jak Three.js

No i we wszystkich tych sposobach można animować rzeczy, albo można też osadzać gotowe obrazki, zdjęcia itp. tworząc większą całość z elementów zrobionych wcześniej w programie graficznym.


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);
edytowany 2x, ostatnio: LukeJL, 2019-04-24 20:23

Pozostało 580 znaków

2019-04-24 20:41
2

Jeszcze tak sobie myślę, że (jeżeli tego jeszcze nie wiesz), to zorientuj się jak działają i do czego służą poszczególne formaty: .jpg, .png, .svg, żeby nie walić wszystkiego w jpg-ach.


Dobrze, dziękuje :) - Kubs 2019-04-24 20:57

Pozostało 580 znaków

2019-04-24 20:57
0

@LukeJL: Dziękuję, to jest naprawdę wartościowy post. Co do pytania o konkretną grafikę np. na początek taką:

https://www.google.com/search[...];bih=821#imgrc=WACsZ7Cobq8rYM:

chociaż myślę, że może problemem być określenie konkretnego celu do jakiego chcę dążyć. Może ten cel pojawi się z czasem, gdy poznawał będę inne aspekty grafiki.

Ogólnie dobrze czuje się z Illustratorem i skoro mówisz o SVG to może rozwijać te umiejętności właśnie w ten sposób. Patrzę na książkę:

https://helion.pl/ksiazki/svg[...]amy-royds,e_2ga1.htm#format/e

może warto ją przeczytać jako kolejny etap nauki?

Mógłbyś wypunktować mi etapy wg. których powinienem rozwijać umiejętności graficzne? Trochę chyba stanąłem w miejscu. A może jakaś książka/strona z niezbyt trudnymi zadaniami do wykonania na początek?

Dziękuję, to jest naprawdę wartościowy post. Spoko :) - LukeJL 2019-04-24 21:04
na zadanie domowe sprobuj przepisac ten kod na Three.js https://pastebin.com/rBT2AJqe. Zamiast niskopoziomowych pikselow mozesz stosowac np roznokolorowe kwadraty dzieki czemu twoj mandelbrot bedzie taki troche 3d :) - lambdadziara 2019-04-25 16:00
@lambdadziara jest coś takiego jak Mandelbulb i jest to Mandelbrot w 4 wymiarach czy coś takiego, ale wygląda naprawdę dziwnie: https://en.wikipedia.org/wiki/Mandelbulb - LukeJL 2019-04-25 18:24

Pozostało 580 znaków

2019-04-24 21:04
0

Jeśli chodzi o 3D to fajna jest biblioteka Three.js (która opakowuje ci WebGL w coś bardziej wygodnego w obsłudze).

Modele 3D można w Blenderze robić (ale można cokolwiek w 3D umieścić, nawet płaskie obrazki jako teksturę czy coś).

Poza tym dzisiaj możesz też robić proste transformacje 3D za pomocą zwykłego CSSa.


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);
edytowany 1x, ostatnio: LukeJL, 2019-04-24 21:04

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0