ugrás a tartalomhoz

Játék képekkel

Don Oden · 2009. Dec. 12. (Szo), 12.23
Sziasztok!
Az imént egy olyan problémába ütköztem ahol egy png képre - aminek vannak áttetsző elemei - kéne rátennem egy maszkot. Maszk, mint photoshopban, egy oylan elem, ami csak ott jelenik meg, ahol a szülő nem áttetsző.
A lényeg, hogy a második réget sokkal nagyobb az eredeti png-nél és ha csak úgy ráteszem, akkor nem jön jól össze a dolog, mert az egészet lefedi. Úgyhogy valami hasonló megoldáson gondolkozok.
Van esetleg valakinek valami ötlete erre?
Előre is köszönöm válaszotokat!
‹ 2 kérdés 1 topic (PHP+MySQL - DateTime, Smarty's lassulás) Szöveg kiíratása képekkel, betűnként ›
 ■
1

Nem látom

Thomas · 2009. Dec. 12. (Szo), 13.13
El tudod küldeni az oldal linkjét? Így vakon nem áll össze a dolog..
2

Az az igazság :)

Don Oden · 2009. Dec. 12. (Szo), 14.39
Az a szitu hogy ez csak a fejemben van meg eddig :) Úgyhogy nem tudok linket küldeni.
A png-s móka amúgy egy webshop-hoz kell ahol a megrendelő saját maga állíthatja össze az ingjeit. Választhat gombokat, gallért, szövetet, stb... namost amikor kiválasztja az anyagot, azt szeretné látni is hogy kb hogy mutat az ingen.
Az ing elemekre van bontva. Gallér, ujj, egyéb. Elemekhez illően forgatom a pattern-t hogy minnél élethűbb legyen az illusztráció. Ez ugye működik, de végül nem csak az pl. az ujjra kerül a pattern hanem mindenhova ahol van kép, még ha az nem is látható egyébként ing ujj. Ami logikus mert nem adtam semmilyen feltételt, ami alapjáj csak oda kerül pattern ahol nincs transparens.

Na valahogy így. kicsit összeszedetlen vagyok
3

Flash, Canvas

Poetro · 2009. Dec. 12. (Szo), 15.04
A fentiek valamelyikével lehetne megcsinálni, mivel maga a HTML nem támogat semmilyen maszkolást.
4

JavaScript és php

Don Oden · 2009. Dec. 12. (Szo), 15.26
Igaz, meglehetne oldani flash-sel is, de az a baj hogy csak a fenti kettő áll rendelkezésemre.
Amúgy nem feltétlenül kell maszkolni, mert nincsenek elhalványodások azon a területen ahol pattern kerül az alap képre. a lényeg hogy a pattern, csak ott jelenjen meg, ahol az "alatta" lévő kép nem transzparens.
5

beégetett elhelyezés?

ironwill · 2009. Dec. 12. (Szo), 16.29
Szia!

Elmondom, hogy én hogyan csinálnám, de az elképzelésemnek több előfeltétele is van..

Először is én úgy csinálnám, hogy egy ing, vagy tetszőleges ruha darab, egy div háttere.

pl.:
<style>
  .ing1 {background: url(images/ingek/ing1.png)} //vagy ami a kep kiterjesztese
  .ing2 {background: url(images/ingek/ing2.png)} //vagy ami a kep kiterjesztese
  .ing3 {background: url(images/ingek/ing3.png)} //vagy ami a kep kiterjesztese
.
.
.
  .ing622 {background: url(images/ingek/ing622.png)} //vagy ami a kep kiterjesztese

  .gomb1 {background: url(images/gombok/gomb1.png)}
  .gomb2 {background: url(images/gombok/gomb2.png)}
</style>

<div class="ing1">
  <div class="gomb1"></div>
<div>
<div class="ing2">
  <div class="gomb1"></div>
<div>
<div class="ing3">
  <div class="gomb1"></div>
<div>
.
.
.
<div class="ing622">
  <div class="gomb1"></div>
<div>
A div-ek class-át meg tudod változtani és akkor mondjuk más gomb jelenik meg az ing fölötti.

És akkor most jönnének az előfeltételek:
1. a gombokat fixen rögzíted egy képen.. nem egyesével teszed fel, így nem kell a pozícionálgatással foglalkozni --->>
2. minden inget ugyan úgy kellene fotózni, hogy mindenhol ugyan ott látszódjanak a gombok a felső képen (minden képen ugyan úgy kerüljenek egymás fölé a képek)
Ez azon kívül, hogy meg könnyíti a munkád, azon kívül egy fajta összeszedettséget kölcsönöz a kinézetnek. (Amúgy, ha különböző színű ingek vannak, akkor azokat nem kell újra fényképezni, csak paintshop-pal, photoshop-pal megváltoztatod a színét, és nincs vele macera)

A belső div nem kötelező, azt javascripttel tudod generálni. Ami praktikus ebben, hogy ha több rétegnyi képet akarsz, akkor csak annyi a dolgod, hogy egy újabb belső div-et generálsz, aminek beállítod a hátterét arra, amit meg akarsz jeleniíteni..

Remélem jól értettem a problémát és tudtam segíteni!
Sok sikert hozzá!

üdv, Gábor
6

ööö

Don Oden · 2009. Dec. 12. (Szo), 17.41
Hát, igen. Izé :) Maga az hogy az egyes elemekez hogy vagdosom össze már megvan, de köszi. Ez amúgy azért nem jó, mert nem csak íszínek, de minták is vannak és ha minden igaz akkor kb 70 minta van kezdésnek, aminek száma folyton bővül és nem igazán jó móka minden kockás meg csíkos ingre rápingálni a mintát. Emellett egy idő után írtó sok, egyébként felsleges adat készül, külön minden egyes mintázathoz a 10 különféle gallér és a 4 különböző ing-ujj befestése. gondolj bele, most 70 minta után az már 700 gallér és 280 ing ujj, 70 ing alap és 210 gombokkal ellátott sáv. Szerintem kicsit macerás lenne és nem is valami csodás, ha már meg lehet oldani php-vel :) (a kárdás már csak az hogy hogyan)

Mindegy. Azért köszi
7

Ilusztráció

janoszen · 2009. Dec. 13. (V), 19.56
Azt azért oda kellene írni ilyen műveleteknél, hogy a kép illusztráció.

Egyébként PHP GD libraryvel tudsz maszkokat kezelni meg minden finomság, csak az sok energia. Szerintem, a mintázatot még transzformálni is tudod bizonyos mértékig, de erre lehetséges, hogy inkább valami OpenGL-es programot kellene írni, azzal kicsit jobban menne.