06. maj 2002 - 23:33Der er
63 kommentarer og 1 løsning
Photoshop - transparancy med gif filer
Jeg har et MEGET irriterende problem: Jeg har lavet et billede i photoshop som skal fungere som baggrund for nogle knapper på min hjemmeside. Det skal være halvt gennemsigtigt (meget vigtigt), og det er det også når jeg arbejder med det som .psd dokument (jeg kan i hvert fald se terningerne i baggrunden igennem billedet). Men når jeg gemmer det som .gif eller .png og derefter åbner dette i photoshop, ja så har det mistet sin transparancy. Og jeg HAR valgt transparant når jeg gemmer det i gif format.
PLZ hjælp mig hurtigt, jeg har siddet i over en time nu og er ved at gå amok... :-(
Du misforstår transparant funktionen i dette tilfælde. En gif-fil kan have områder der er helt gennemsigtige men ikke halvt (delvist) gennemsigtige. Så det kan ikke lade sig gøre på den måde du gerne vil.
Du vil kunne opnå resultatet med 2 andre teknikker, Enten ved at bygge hele din side op i et .swf program f.eks Adobe LiveMotion eller Flash. Eller ved at bruge .svg (skalerbar vektor grafik).
Eller ved at ligge dine knapper i dokumentet og så lave din forgrund halv transparent ved at stille opacity på laget. Det transparency gør er at lave baggrunden transparent ikke de elementer du har i dit dokument :)
godt være jeg misforstod dit problem. Du vil lave en baggrund som er halv transparent hvor du vil ligge nogle knapper på. Du laver baggrunden halv transparent ved at justere det ved hjælp at opacity som du finder i din layer menu. For at kunne se gennem det skal du så godt nok gemme det som gif transparentcy for at kunne kigge igennem. Tror jeg har misforstået, hvis det er muligt ville det være fedt hvis du kunne ligge et billede på nettet så vi kunne se din ide :)
Hvis du ønsker den effekt, så opret et nyt dokument i størrelsen 2x1 pixel og farv den ene del af billedet(f.eks sort). Vælg så hele billedet, og definer det som et Pattern og fill det så i et nyt layer i det oprindelige billede.
Du skal muligvis lege lidt med opacity på det nye layer.
Derefter kan du gemme billedet som en "halvgennemsigtig gif"-fil.
ok, prøv at kig her (bruger bare denne side til at teste de ting jeg kreerer): http://www.id.cbs.dk/~also00ab/ undskyld, men jeg kan ikke huske hvordan man laver links herinde. Hvis du går ind på siden vil du for neden kunne se nogle halvstore firkantede kasser (lige over de små knapper). Det grå område i midten af disse kasser vil jeg gerne have transparant, og det kan jeg jo sagtens når jeg arbejder med billedet som psd-dokument men når jeg gemmer det som .Gif fil så forsvinder det gennemsigtige!!! æv, æv og æv :-)
Det kan ikke lade sig gøre at lave en gif eller png delvist gennemsigtigt så man kan lægge dette billede over noget andet på en html side og se en baggrund skinne igennem. Du kan godt bygge det hele op som et billede hvor det du skal se nedenunder ligger i et lag i Photoshop og i et lag ovenover laver du det der skal være delvist gennemsigtigt. Laget med det der skal være delvist gennemsigtigt giver du den opacitet du vil have, så lægat nedenuden skinner igennem. Derefter gemme det hele som en gif. Så vil du kunne se laget under delvist. Men åbner du giffen igen i Photoshop har du "kun" et lag og kan altså ikke bare skifte det underliggende ud med noget andet. Så hvis det er fordi du skal bruge det med forskellige illustrationer der skinner igennem skal du lave hvert billede for sig.
spe--> hvis du ser på de kasser jeg henviser til i mit sidste svar, så er det meningen at man skal kunne se mit baggrundsmønster skinne igennem det nu grå område. Kan det virkelig ikke lade sig gøre???
må bøje mig spe har ret :) øv øvøv ;) Du kan gøre det som spe siger ligge det hele i dit dokumnet og så stille opacityen på den grå flade. Hvor du så har lagt det nedenunder som skal ses gennem den halv transparente grå flade
Nej det kan ikke lade sig gøre på den måde du gerne vil. Du bliver nød til at lave hele illustrationen færdig i Photoshop så dit baggrundsmønster ligger i et lag under den grå kasse og laget med den grå kasse har en passende opacity.
Du vil kunne gøre det hvis du har f.eks Illustrator 9 eller 10. her kan du lave din gråkasse med en opacity og gemme som .svg (skalerbar vektorgrafik). Dette kræver så dog at folk har indstalleret den plug-in i deres browser, der tillader at at se .svg
Men jeg kom faktisk frem til et resultat der kan bruges foreløbigt vha. Prodic's forslag, det kan i selv se her http://www.id.cbs.dk/~also00ab/ de firkanter jeg har kæmpet med ligger som nævnt nederst på siden så kan I selv bedømme. Nu skal jeg bare have gjort noget rammerne på dem så de bliver lidt forkromede og tydligere at se! Prodic kan du ikke lige svare så får du nogle point!
halv løsning = halv point :-), men hvis der er en der nemt kan forklare hvordan jeg ligger 2 billeder oven i hinanden på min hjemmesider (hvad html koden skal være) så får vedkommende resten af pointene. Den firknat jeg nu har fået lavet skal der nemlig placeres nogle knapper (links) ovenpå, men jeg er total html newbie og kan ikke rigtig se mig ud af det! Jeg bør nok oprette et nyt spørgsmål men jeg prøver lige her alligevel, I virker jo ret kompetente :-)
Hmmm... Synes nu godt det "rigtige" svar på dit egentlige spøgsmål at det ikke kan lade sig gøre måske nok var et par point værd :-). At du så kan bruge en "nødløsning" er fint og at du giver de fleste point til prodic.
Kumasan-> Det du kan gøre med dit billede er, at smide grafikken ind som baggrund i nogle tabel-celler, og så indsætte billeder(linksne) ind i selve cellerne. Så kommer det til at ligge ovenpå hinanden,og du kan linke på billederne som ikke er i baggrunden.
Hvem skal have de overskydende 15 point jeg fik mig til-lusket?
Hvis du ikke har så megen erfaring med html kan du måske bruge nogle tips/tutorials fra f.eks www.html.dk Men det du skal have fat i for at lægge flere billeder oveni hinanden er #layer eller #pos. Så søg eventuelt på dette på www.html.dk (ved dog ikke om der er tutoriales til dette der)
hmm, #layer eller #pos, det lyder sgu godt nok kompliceret. Jeg har været inde på www.html.dk og lede men de har vist ikke noget der kan hjælpe i den retning!
For lige at uddybe prodics foreslag...så skal du have din baggrund som baggrundsbillede, din grå kasse som baggrund i en tabel (en celle) og så dine links som indhold i tabelen (cellen)
Du behøver heller ikke #layer eller #pos hvis du "kun" skal lægge 3 billeder oveni hinanden på den måde som jeg beskrev, så kan du fint bruge prodic´s løsning.
background="ditbillede.gif" hvor du så difinere hight="" og width="" hvis de er større end dit billede gentager den så billedet så husk at definere dem med samme værdier som dit billede er
Kumasan->baggrundsbilledet i tabellen kan du lave sådan her : <table width="180" border="1" cellspacing="2" cellpadding="0" background="(EmptyReference!)">
og så bare indsætte stien til dit billede hvor der nu står EmptyReference.
td er én celle i tabelen Du kan bruge egenskaben background="ditbillede.gif" både i <TABLE background="ditbillede.gif> og i <TD background="ditbillede.gif> td er én celle i tabelen
I første tilfælde ligger billedet som baggrund i hele tabelen i andet tilfælde kun i den ene celle.
Enig med prodic i at #layer eller #pos ikke altid er uproblematisk men det er baggrundsbilleder i tabeler eller celler heller ikke. Forskellige browsere fortolker det lidt forskelligt og går du ikke kun efter at windows IE brugere skal se det rigtigt skal begge dele testes i flere browsere på både mac og pc for at du er sikker på det ses korrekt af alle.
skal du gå efter at alle browsere, styresystemer skal se det skal du kode efter w3c standarter som måske nok er lidt for meget at forlange, da du så bliver nød til at bruge css til at definere dine billeder. Men er du frisk på det skulle du besøge www.w3school.org og www.w3c.org Men det er ikke noget du behøver at tænke på nu hvis du ikke lige har overskud til at prøve dig af med det :)
jubii nu begynder det at ligne noget, tjek engang!!!http://www.id.cbs.dk/~also00ab/ , Nu skal jeg bare have mindsket afstanden mellem knapperne (og have dem redesignet), men det må jo være noget med cell-spacing!!??
Din tabel er 500 pixels høj og de 3 celler deler så højden mellem sig selvom du har sat dem til 30 pixel. Prøv at give de 2 første celler højden 30 og den sidste ingen højde.
Hvad er problemet? Skal du have de 3 celler til at fylde 500 pixels i højden eller hvad? Jeg formodede, at du skulle indsætte de resterende knapper i tilsvarende celler og derved opnå en samlet højde på de 500 pixels, men jeg kan da have misforstået noget.
det er nok bare mig der ikke udtrykker mig klart nok!
lad os sige jeg kun vil have 4 celler/knapper "ovenpå" firkanten, men ikke vil have det store mellemrum imellem knapperne. Således at de er samlet tæt op af hinanden inde i midten eksempelvis! Ligenu er jeg ved at løse problemet ved at fylde flere og flere celler på, men til en anden gang kunne det være rart at vide hvordan man gør!
Ligenu er den øverste og nederste knap også placeret lige op ad kanten på firkanten (rammen på tabellen), det er heller ikke særligt pænt :-( der skulle gerne være et par mm mellemrum!
Du kan ved at indsætte 2 ekstra celler i henholdvis toppen og bunden styre placeringen af de 4 knapper ved at angive højden på de 2 ekstra celler. Mellemrummet i mellem knapperne kan du styre ved at angive et par pixels ekstra i de enkelte celler til knapperne.
Det handler bare om at regne lidt frem og tilbage :)
Tror det ville være lettere hvis du blot laver en tabel med én celle Eller rettere en række <TR> <TD><a href="http://www.imdb.com "><img src="imdb%20copy.gif" width="150" height="30" border="0" cellspacing="0" alt="Internet movie database"></a> <P> <a href="http://www.apple.com/trailers "><img src="apple%20copy.gif" width="150" height="30" border="0" cellspacing="0" alt="Movietrailers from Apple"></a> <P> <a href="http://www.eksperten.dk "><img src="eksperten.gif" width="150" height="30" border="0" cellspacing="0" alt="Få hjælp med dine IT problemer"></a> <TD> <TR>
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
