[odin68]

Перенос с ПираньяКлуба:
20.06.2008

Andre Thiel - 2008 - Анкета / Fragebogen - 2008

[Bild: 939e892299c1.jpg]

Имя

Андре Тиль

Твоя работа в Пиранья Байтс

Преимущественно художник 2D (графические интерфейсы пользователя, частицы, текстуры) и художник уровней (освещение и объектное программирование).

Возраст

33

Образование

Технический художник

Кем работал раньше?

Занимался приблизительно тем, что перечислено выше. Кроме того, занимался видеомонтажем и работал над спецэффектами в нескольких проектах.

В каких игровых проектах участвовал?

Gothic 3 (2006г.), Söldner: Marine Corps, Söldner: Secret Wars, Beam Breakers (2002), K. Hawk: Survival Instinct ... и еще несколько небольших проектов, которые и называть не стоит.

Любимая музыка?

Все, что имеет отношение к рок-музыке и при этом мелодично звучит. Могу выделить Foo Fighters и Pearl Jam.

Любимая игра?

В настоящее время World of Warcraft. NWN2 (скорее создавать моды, чем играть).

В чем ты особенно силен?

Креативность, открытость для всего нового, ну и общительность, я думаю.

Что ты терпеть не можешь?

Нетерпимость, теплый Red Bull

Чем ты увлекаешься, какие у тебя хобби?

Наряду с играми и графикой, люблю смотреть фильмы и читать… Слушать и сочинять музыку, летние фестивали с друзьями и ездить в отпуск (очень редко удается!).

Что бы ты хотел увидеть однажды в игре?

Наконец-то по настоящему интерактивный сюжет.

Боишься ли ты, что когда-нибудь твои идеи для игры могут иссякнуть?

Нет, скорее дело обстоит наоборот!


World of Risen

С остальными анкетами Пираний вы можете ознакомиться - ЗДЕСЬ

Перевод Aleks842

[odin68]

Туториал - Иконка в меню

Почему используются плоские иконки, а не настоящие 3D модели?

В таком безграничном инвентаре, который можно видеть в Ризен, в конце концов, сталкиваешься с ограничениями наглядности. Так как в ходе игры в инвентаре набирается до сотни объектов, важно, чтобы эти предметы были легко узнаваемы и все в целом выглядели нагляднее.

Так как преимущественно в РПГ бывает много предметов в одинаковой категории (например, оружие подразделяется на луки и мечи ), они должны соответственно отличаться друг от друга. При уменьшенном изображении в 3D при котором виден весь объект, очень часто происходит путаница, так как один лук очень похож на другой.
Поэтому мы решили изображать предметы в виде 2D значков-иконок и сфокусироваться на типичных признаках. Это может быть уникальная рукоятка меча или различные цвета зелий. Дополнительно у значков в отдельных категориях предметов должен быть фон определенного цвета. Например, инструменты изображены на сером фоне, а растения — на зеленом.

Создание значка, который размером всего 40х40 пикселей, разумеется, сопряжено с некоторыми проблемами. Слишком мало места, чтобы наглядно показать всю важную информацию. И если нужный значок не обладает действительно бросающимися в глаза признаками, нужно по крайней мере убедиться, что его легко распознать по его форме и цвету.

Время, которое необходимо для создания определенных значков, может сильно варьироваться. Так я например потратил на простую иконку метлы в Ризен почти столько же времени, как на всю категорию колец. Но особенно сложно бывает с довольно абстрактными значками. Как, например, изобразить заклинание «Шутка»?

В основном в Ризен используются два способа работы над значками.
Объекты, которые уже существуют как 3D модели, рендерятся с простым освещением. К этой группе относятся, прежде всего, оружие и броня. Другие значки, напротив, рисуются вручную. Возьмем, к примеру, значок малого целебного зелья: на нем хорошо демонстрируется первый способ.

[Bild: 392.jpg]

1. Сперва нужно обдумать основные формы сосуда с зельем. Как можно видеть на рис 1., они сильно отличаются уже в самом начале, и к тому же отрендерены под разными углами. Но, прежде всего, следует обратить внимание на то, чтобы в модели не было слишком много деталей, так как по причине малых размеров конечного изображения эти детали в любом случае будут утеряны.

[Bild: 393.jpg]

2. Картинка масштабируется до желаемого размера значка. Все, что выходит за поля, впоследствии отсекается.

[Bild: 394.jpg]

3. Так как в Ризен у нас есть зелья разных цветов и форм, можно немного упростить себе работу и соответственно перекрасить сосуды. Это происходит в 2D редакторе, путем изменения баланса цвета. Так как пробка цвет не меняет, ее предварительно вырезают.

[Bild: 395.jpg]

4. И вот вы видите раскрашенный значок с присоединенной пробкой.
Чтобы объемно выделить детали и элементы на фоне, рекомендуется добавить различные слои тени.

[Bild: 396.jpg]

5. Чтобы изобразить отражения на стекле и одновременно еще сильнее выделить символ на фоне, добавляются слои бликов. Кроме того на рисунке видно, как затем подрисовывается светлая окантовка.

[Bild: 397.jpg]

6. Теперь идут дальнейшие детали, такие как дополнительные блики, чтобы стекло выглядело еще более объемным. Вместе с этим мы достигаем эффекта, при котором иконка немного «светится». Наконец добавляем несколько пузырьков, чтобы подчеркнуть, что речь идет о (бурлящей ) жидкости.

[Bild: 398.jpg]

7. Теперь значок обрезается и снабжается рамкой. Готово.

Другие примеры:

[Bild: 399.jpg]

8. Ром.
В принципе это тоже «бутылка», но тут нужны дополнительные детали. Например, ее можно распознать по этикетке. На ней видна крошечная пальма. В идеале эта маленькая деталь связана с формой и цветом бутылки и позволяет ее легко отыскать в инвентаре.

[Bild: 400.jpg]

9. Подкрадывание.
Это пример «абстрактного» значка. Первое что приходит на ум - показать изображение крадущихся ног. Но так как этот символ было запланировано использовать для способности «Спринт», я решил изобразить «прислушивающуюся\сидящую в засаде фигуру». Эту фигуру, как и сосуд для зелья, я сперва очень грубо смоделировал и затем отрендерил. В результате получилась уникальная иконка, которую можно всегда приписать способности.

[Bild: 401.jpg]

10. Варить зелья.
Наконец еще один пример трудоемкой иконки, которая состоит из достаточно большого количества слоев.

Надеюсь, этот маленький туториал(Making-Of) был интересен и понравился вам.

С наилучшими пожеланиями, Андре Тиль.

ИСТОЧНИК

[odin68]

13.07.2007

Hallöchen zusammen,
Dann will ich auch mal meinen ersten Post hier abliefern

Da ich ebenfalls durch unseren Ausflug inspiriert wurde, habe ich mich (in meiner Freizeit) mal dran gemacht die Stimmung dieses verwilderten Fleckchen Erdes einzufangen. Mit Hilfe von SpeedTree und 3D Max hab ich versucht, einen Flußlauf ähnlich hizubekommen, wie es ihn in Hombroich an allen Ecken und Enden zu sehen gab. Vor allem war es mein Anliegen, die Lichtverhälntisse glaubwürdig darzustellen.

[Bild: streerenderdsunny01dg8.th.jpg][Bild: streerenderdrainyep0.th.jpg][Bild: streerenderdsunny02tl7.th.jpg][Bild: streerenderdsunny03ph1.th.jpg][Bild: streerenderdnightcamppn0.th.jpg]

Man sieht also... wir haben uns nicht nur um das leckere Buffet im Restaurant gekümmert

MfG,
André T.

В этом посте Андре сообщает, что на каникулах в 2007 году они были озабочены не только вкусными закусками в ресторанах, но также акуммулировали впечатления от прогулок, которые вылились в эти художественные работы, которые он делал в свободное время с помощью SpeedTree и 3D Макса:

Spoiler:(zum lesen bitte Text markieren)

[Bild: streerenderdnightcamppn0.jpg]

[Bild: streerenderdrainyep0.jpg]

[Bild: streerenderdsunny01dg8.jpg]

[Bild: streerenderdsunny02tl7.jpg]

[Bild: streerenderdsunny03ph1.jpg]

ИСТОЧНИК

[odin68]

Community-Tutorial: Erstellen von 2D-Grafik-Elementen 1/2

10.10.2007

ИСТОЧНИК

Hallo zusammen !

Nach den ausgezeichneten Tutorials meiner geschätzen Herrn Kollegen bin ich, Andre Thiel, nun an der Reihe. Ich dachte ich zeige euch mal, wie man mit einigen wenigen Techniken 2D Elemente erstellt, die ihr z.b. für das Erstellen von Buttons, Signaturen oder komplette Interfaceelemente einer Webpage anwenden könnt.
Die Vorgehensweise, die ich hier beschreiben will ist nicht zwingend an eine Software gebunden. Die von mir benutzen Funktionen sollte es so oder ähnlich in jeder gängigen 2D Software geben. Mein Kollege Quy war aber so nett dieses Tutorial für euch in Photoshop CS2 zu "übersetzen", da ich selber mit einer anderen Software arbeite. Diese Schritte sind jeweils mit einem Photoshop Symbol gekennzeichnet. Alles was ihr sonst noch dazu braucht sind zwei verschiedene Texturen eurer Wahl (z.b. von www.cgtextures.com)

Teil 1 : Standard Button
Die Basis ist immer die finale Form des Objektes, die er erstellen wollt. Bei einem Button ist das natürlich nicht sonderlich komplex.

a)
[Bild: tut01_Gfx_A.jpg]

Ich lege im ersten Schritt immer die Linienbreite fest und ob Ecken zum Beispiel abgerundet sein sollen. Aus diesen beiden Elementen erstelle ich dann alle weiteren Formen, die ich benötigen könnte. Der Vorteil davon ist, daß man nicht für jede weitere Form ein Rechteckt-Tool benutzen muß, mit dem es vor allem bei kleinen Elementen recht schwierig ist ohne Qualitätsverlust exakte Abmessungen zu zeichnen.
Wenn ihr allerdings einmal nur eine Grundform braucht, könnt ihr die Punkte a) und b) überspringen. Wichtig ist nur, daß ihr am Ende eine geschloßene Form auf dem Bildschirm habt.

[Bild: PS_Icon.jpg]
Mit dem 'Rounded Rectangle Tool' wird eine Form gezogen. Mit dem Attribut 'Radius' bestimmt man in Pixeln, wie stark die Ecken abgerundet werden soll. Nach einem Mausklick auf das Ebenen-Miniatursymbol im Ebenenfenster hat man die eben erstellte Form maskiert. Man erstellt eine neue Ebene und führt die Funktion 'Stroke'(unter dem Menüpunkt 'Edit' zu finden). Die erste Ebene kann man nun löschen. Der erstellte Rand wird nun z.B. mit dem Rectangular Marquee Tool alles markiert was man nicht braucht und mit entfernt. Fertig sind die Bauteile.

b)
[Bild: tut01_Gfx_B.jpg]

Aus der abgerundeten Ecke und der Linie baue ich mir die Grundform des Buttons zusammen.

c)
[Bild: tut01_Gfx_C.jpg]

Der leere Raum in der Mitte dient mir nun gleichzeitig als zweite Grundform. Mit Hilfe einer Zauberstabmaske schneide ich dieses Element aus und f ülle es in einer beliebigen Farbe. Somit ist der Rahmen und der "Inhalt" eines Buttons erstellt.

[Bild: PS_Icon.jpg]
Man klickt mit dem "Magic Wand / Zauberstab'" in die Mitte von der erstellten Umrandung. Es wird automatisch der Inhalt markiert (Wichtig ist, dass die Umrandung keine Lücken aufweist). Man erstellt eine neue Ebene und klickt auf 'Fill' (unter dem Menüpunkt 'Edit' zu finden).

d)
[Bild: tut01_Gfx_D.jpg]

Für jedes dieser beiden Elemente wähle ich mir nun ein Material aus. In diesem Fall nehme ich diese beiden Texturen.

e)
[Bild: tut01_Gfx_E.jpg]

Nun erstelle ich aus dem Rahmen eine Maske und schneide diese als neue Ebene aus.

[Bild: PS_Icon.jpg]
Wie in a) erhalte ich einem Mausklick auf das Ebenen-Miniatursymbol im Ebenenfenster die Maskierung für die Umrandung. Ich kopiere den Inhalt auf das Material (separates Bild). Ich markiere auf der neuen Arbeitsdatei wieder die Umandung und gehe anschließend auf die Ebene mit dem Material und kopiere mir den Inhalt der Maskierung und füge ihn auf unserer Hauptarbeitsdatei. Fertig ist die Umrandung mit dem gewünschten Material.

f)
[Bild: tut01_Gfx_F.jpg]

Das Selbe mache ich nun mit der "Inhaltsform".

g)
[Bild: tut01_Gfx_G.jpg]

Legt man diese beide nun passend übereinander (mit Alignment zentrieren z.b.), sieht das Ergebnis so aus.

[Bild: PS_Icon.jpg]
Mit dem 'Move Tool' verschiebe ich die einzelnen Ebenen. Es wird automatisch an anderen Ebenen ausgerichtet.

h)
[Bild: tut01_Gfx_H.jpg]

Nun kommt der spaßigere Teil. Ich persönlich arbeite gerne mit tiefengebenden Effekten wie Schatten oder Relief-Effekten.
Ich wende nun auf jedes der beiden Elemente einen Relief-Effekt an. Hier kann man schön herrumspielen um verschiedene Tiefen
darzustellen.

[Bild: PS_Icon.jpg]
Im Ebenenfenster gelange ich durch einen Doppelklick rechts neben dem Ebenen-Miniatursymbol in ein weiteres Menü. Ich aktiviere den Unterpunkt "Bevel and Emboss" und habe einen dreidimensionalen Effekt. Wer will kann die einzelnen Attributen ausprobieren und sich seinen gewünschten Effekt erstellen.

i)
[Bild: tut01_Gfx_I.jpg]

Nun erstelle ich für den Rahmen einen Schatten. Als Alternative zu den standardmäßigen Funktionen für Schatten in den handelsüblichen
2D Programmen, kann man auch ein Duplikat des Elementes erstellen, es mit Schwarz füllen und dannach optional einen
Weichzeichner benutzen.

[Bild: PS_Icon.jpg]
Ich maskiere wieder die Umrandung, erstelle eine neue Ebene und benutze wieder die Funktion "Fill" (mit schwarzer Farbe). Ich verwende nun den "Gaussian Blur" (unter dem Menüpunkt "Filter" zu finden) mit einem Radius von etwa 5 Pixeln.

j)
[Bild: tut01_Gfx_J.jpg]

Nun solltet ihr drei verschiedene Ebenen haben, die ihr in dieser Reihenfolge in den Ebenen aneinander ausrichtet.

k)
[Bild: tut01_Gfx_K.jpg]

Nun kann man noch etwas Feintuning betreiben und z.b. den unteren Bereich noch etwas abdunkeln um zusätzliche Tiefe zu erzeugen, oder die Farben noch nachträglich zu ändern. Fehlt eigentlich nur noch ein Text für den Button. Bei diesem könnt ihr übrigens die gleiche Technik benutzen. Nur dient hier der Basisfont als Vorgabe für die Form.

[Bild: PS_Icon.jpg]
Ich verschmelze alle Ebenen mit dem Befehl 'Flatten Image' zusammen und verdunkelt den unteren bereich manuell mit dem 'Burn Tool'.

Weiter zu Teil 2: Interface Design

[odin68]

Community-Tutorial: Erstellen von 2D-Grafik-Elementen 2/2

10.10.2007

ИСТОЧНИК

Nachdem ihr nun die Basisfunktionen dieser Technik kennt, will ich euch noch kurz an zwei Beispielen zeigen, wie ihr sie für andere Elemente benutzen könnt. Zum Beispiel für ein Interface einer Webpage oder für ein simples Logo.

Teil 2 : Interface Design

a)
[Bild: tut02_Gfx_A.jpg]

Wieder beginne ich mit den kleinsten Elementen. Hier lege ich die Linienbreite und den Standardradius für den Rahmen fest.

b)
[Bild: tut02_Gfx_B.jpg]

Durch duplizieren und verschieben, sowie das Rotieren um 90 Grad des Eckenelementes baue ich mir die finale Form zusammen. Um die Breite der Buttons festzulegen, passe ich schonmal Texte ein, so wie sie später auch auf den Buttongrafiken zu sehen sein sollen.

c)
[Bild: tut02_Gfx_C.jpg]

Im Ergebnis sieht man nun schon die drei Formen, aus denen der Header letztendlich bestehen wird: Der Rahmen (weiß), die Buttons (blau) und der grafische Content (rot). Für Letzeren könnt ihr ein Bild eurer Wahl und es ausschneiden oder ihr macht gleich etwas Eigenes.


d)
[Bild: tut02_Gfx_D.jpg]

Zusätzlich zum grafischen Content benutze ich diese beiden Texturen. Für den Rahmen wähle ich eine Metaltextur, für die Buttons im Kontrast eine Pergamenttextur. Wie in Tutorial 1 schneide ich nun die einzelnen Elemente aus und fülle sie mit den entsprechenden Texturen.


e)
[Bild: tut02_Gfx_E.jpg]

Hier sieht man die einzelnen Elemente recht deutlich. Dem Rahmenobjekt habe ich zusätzlich noch einen Schatten spendiert.


f)
[Bild: tut02_Gfx_F.jpg]

Noch etwas polieren und das finale Ergebnis sieht dann so aus. Natürlich kann man erheblich größeren Aufwand betreiben (z.b. kann man für die Buttons Tutorial 1 anwenden und zusätzlich noch Mouseovers erstellen). Aber ich denke um die Technik zu verdeutlichen sollte es reichen.




Teil 3 : Ein simples Logo

a)
[Bild: tut03_Gfx_A.jpg]

Mit dieser Technik könnt ihr ebenfalls sehr schnell ein simples Logo erstellen. Sucht euch einen Font eurer Wahl (z.b. von www.fontriver.com). Habt ihr diesen erstellt, nehmt ihr das Logo und macht eine breitere Variante daraus (z.b. mit der Funktion "Stroke" in Photoshop). Färbt diese dann mit der "Fill-Funktion" zur besseren Unterscheidung anders ein.



b)
[Bild: tut03_Gfx_B.jpg]

Wenn ihr nun die beiden Logos übereinander legt, sollte das Ergebnis ungefähr so aussehen. Das "dicke" Logo dient in dem Fall als Outline.
Sucht euch nun wieder zwei passende Texturen und füllt die Logos entsprechend.


c)
[Bild: tut03_Gfx_C.jpg]

Nach ein paar Minuten arbeit könnte das finale Logo dann so aussehen. Natürlich kann man wiedermal mehr Arbeit investieren, aber ich denke es ist deutlich geworden, was ich vermitteln wollte. Und außerdem haben wir ja noch ein Spiel fertig zu machen.... :-)

Ich hoffe das Tutorial hat euch gefallen und ihr konntet etwas Praktisches lernen !
Es würde mich freuen, wenn ihr die Ergebnisse eurer Arbeit im Forum posten würdet.

MfG,
André Thiel
Piranha Bytes

[odin68]

3min.de 03/2011

Второе видео от 3min.de/Bubble Universe - Дизайн локаций (с русскими субтитрами)

Текст субтитров: Voland, Elind
Монтаж: Digan

Обсуждение на форуме

В этом видео Бьёрн Панкрац и Андре Тиль рассказывают о движке и дизайне локаций. В частности они касаются общих подходов к построению локаций, теней и погоды. Все это сопровождается демонстрацией в различных редакторах, которыми они пользуются при разработке.

[Video]