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

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.

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.

0
Kubs napisał(a):

Pomijam juz HTML, CSS i programy typu Adobe.

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

0

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

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.

1

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

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.
1

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.

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.

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?q=3d+graphics+website&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiF-7mzsOnhAhX18KYKHWUYALUQ_AUIDigB&biw=1707&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-essentials-2nd-edition-j-david-eisenberg-amelia-bellamy-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?

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.

0

@LukeJL: A jak pracować na pojedynczych pikselach? To też jest ciekawe. I co proponujesz dalej po podstawach JS,HTML,CSS?

0

@LukeJL: A jak pracować na pojedynczych pikselach? To też jest ciekawe.

to sobie zobacz w dokumentacji (szczerze mówiąc wspomnianą rzecz z fraktalem zrobiłem ostatnio na divach, bo mi się nie chciało patrzeć do dokumentacji i przypominać sobie jak to się ustawiało te piksele na canvasie)
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

I co proponujesz dalej po podstawach JS,HTML,CSS?

To zależy, w którą stronę dalej chcesz iść.

0

To zależy, w którą stronę dalej chcesz iść.

Szczerze Ci powiem, że nie wiem. Jakie jeszcze ciekawe opcje są poza tworzeniem grafiki na potrzeby gier lub stron internetowych? Ogólnie interesuje mnie grafika przestrzenna 3D - głębia, realizm, jej praktyczność.

0
Kubs napisał(a):

To zależy, w którą stronę dalej chcesz iść.

Szczerze Ci powiem, że nie wiem. Jakie jeszcze ciekawe opcje są poza tworzeniem grafiki na potrzeby gier lub stron internetowych? Ogólnie interesuje mnie grafika przestrzenna 3D - głębia, realizm, jej praktyczność.

VRML ? ;)

0

HTML, CSS, VRML, SVG, canvas, three.js...pełno tego, już się gubię w tym wszystkim. Co można konkretnego osiągnąć biorąc pod uwagę każdy z nich osobno?

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