Jag håller på och går igenom min sida och tar i tu med saker som tidigare har varit ganska långt ner på priolistan. Nu har jag dock hunnit beta av en hel del saker på den vilket gör att jag kommit till menyelementet på http://www.flygfyren.nu.
Menyelementet ser helt enkelt grått och tråkigt ut. Man får en väldigt stel och strikt känsla. Att det blev som det blev beror väl helt enkelt på att det är lättare att göra raka linjer än fina kurviga element. :e
Det jag nu skulle vilja ha är lite förslag på hur jag kan förändra den designen och integrera den på ett snyggare sätt. Rita kludda gärna på den bifogade bilden. Annars går det bra om ni förklarar med text :)
Slåss du fortfarande med den gamla (nya) sidan? :)
Jag vill inte verka som en viktigpetter, men jag kunde inte låta bli.
Jag tyckte att en annan färg än grå på menyn skulle passa bättre. Dessutom så tycker jag att sidkanterna var för grova.. Ett förslag bara..
Slåss du fortfarande med den gamla (nya) sidan? :)
- Jag ger mig aldrig förrän jag känner att alla designelement fungerar tillsammans och sidan uppvisar en harmonisk och ren design! :)
Orient skrev:
Jag vill inte verka som en viktigpetter, men jag kunde inte låta bli. Jag tyckte att en annan färg än grå på menyn skulle passa bättre. Dessutom så tycker jag att sidkanterna var för grova.. Ett förslag bara..
Nej, du låter inte som en viktigpetter ;) Jag lyssnar och lär. Det förslag du har gjort nu tycker jag ser bra ut. Har du använt den "röda" färg som återfanns mellan länkarna i menyn? Finns det några andra färgkombinationer som kanske inte är fullt så färgstarka som detta alternativ men som går i samma färgskala som resten av färgerna på sidan?! :OO
Jag kanske borde testa och se hur den orangefärgade varianten ser ut på den skarpa sidan för att få en bättre uppfattning?! Tack för din kreativitet. Den uppskattas (y)
pimpN skrev:
hehe, underbart att flygfyren fortfarande är vid liv^^ sist jag besökte sidan för flera månader sedan var det logotypen som det jobbades på
tycker om Orients förslag.
Detta visar bara på att saker och ting måste mogna fram. Det är lätt har jag märkt att man faller för någon "flashig" sak på sidan, den kan gälla färg eller utformning, som efter några månader inte bidrar något till själva syftet med sidan utan det var helt och hållet "eye-candy"!
Har du använt den "röda" färg som återfanns mellan länkarna i menyn?
Jag utgick från #f60 som övergår till #fc0. (Gradient).
lillebror skrev:
Finns det några andra färgkombinationer som kanske inte är fullt så färgstarka som detta alternativ men som går i samma färgskala som resten av färgerna på sidan?!
Jag brukar för det mesta gå efter känslan. Men du kan ju alltid hålla dig till grått. Det passar även det. Se bifogat exempel. Iofs så har du ju något liknande, men här är det bara designen som skiljer sig.
Ett annat förslag är att använda sig av rollover effekt. Då kan man ha den orangea varianten (knappar) som kommer up när man "hovrar" över den gråa.
Du kan antingen använda javascript eller css för att åstadkomma detta. men det vet du säkert.
Jag beundrar din (positiva) envishet som du visar genom ditt arbete med sidan. Det är så man lär sig också.
Ett annat förslag är att använda sig av rollover effekt. Då kan man ha den orangea varianten (knappar) som kommer up när man "hovrar" över den gråa.
Jag tror detta skulle kunna bli riktigt snyggt. Sedan behöver jag blanda upp hela sidan så att den får lite färg och inte blir för strikt och grå! Skall göra ett förslag så återkommer jag!
Orient skrev:
Jag beundrar din (positiva) envishet som du visar genom ditt arbete med sidan. Det är så man lär sig också.
Så. Nu har jag suttit och laborerat lite med gradients i photoshop ikväll och tycker jag börjar få lite bättre känsla och kläm på vad man kan åstadkomma med denna teknik. Jag gjorde en gradient som jag blev hyffsat nöjd med och sedan bytte jag bara ut den gråa grundfärgen mot den röda. Vad tycks? Hur gör man sådana där snygga avgränsare som du hade gjort Orient!?
Jag är nog inne på att använda mig av en sorts roll-over-effekt i menyn. Vad är bästa sättet att lösa detta på?
Ska jag för varje sida som visas i menyn lagra en bild (sökväg) i databasen som läggs på menybakgrunden när menyn genereras eller hur löser jag detta bäst rent tekniskt, helst med hjälp av css? Det jag märkte nu är att menyn ser mycket bättre ut när man skriver texten i Photoshop än när man enbart använder sig av länktexten i menyn. Det är mer estetiskt tilltalande! Vad tycker ni?
Avskiljaren har jag gjort så här:
Med "pencil tool", en pixel tjock, samma färg som texten. Helt enkelt måla prickar med en pixels avstånd samt applicera en ljus skugga enligt bilden.
Det ser bra ut det du har åstadkommit. Men jag hade valt en ljusare orange färg istället för den vita. Hur gjorde du effekten? Det bästa sättet är att använda "layer styles". Först göra själva menyn av en grundfärg, vilken som. Sen högerklicka på lagret i lagerpaletten och välj "Blending options".. där kan du styla hur du vill. T.ex gradients. Se bifogad bild.
Ang rollover så brukar jag använda gamla dreamweaver inbygdda funktion för ändamålet. Sen har jag nu börjat med css-metoden.
Man gör menyn i form av en horizontell lista och styla den med css. med den här metoden lämpar det sig att använda vanlig länktext på en bakgrundsbild som ska föreställa knappen.
För att förhindra att det blir tomt under text i hovermomenten, eftersom det tar en viss tid för hoverbilden att laddas, kan du kolla här hur man gör.
Annars laddar man bilderna i cache minnet med "body onload" när man använder javascript modellen. Där har jag tidigare hittat och använt mig av ett mycket enklare script.
Så där...Nu har jag omarbetat menyn med inspiration från dig Orient! Insåg efter en stunds arbete att layerfunktionen och layer styles var mycket smidigt att arbeta med! :)
Synpunkter på menyn i nuvarande utförande? Om det är "Green light go" på denna så återstår att ordna till hover-effekten. Tänker mig då grått i standardutförande och sedan orangefärgat för hovereffekten, eller?
Wow! imponerande. Du fick verkligen grepp om det där.
Fast en liten detalj bara.. jag gillar inte skuggeffekten på själva texten. Det ser liksom svävande ut. Jag brukar inte gilla skugga på en mörk text. Det blir snyggare när det är ljus text. När det är mörk text så gör jag ofta som i mina tidigare exempel. En ljus skugga för få en känsla av att texten är inristad i knappen/bakgrunden.
Tänker mig då grått i standardutförande och sedan orangefärgat för hovereffekten, eller?
Sedan fick jag göra en lite kodmässig sak i PHP för att beroende på om man är inloggad eller ej så visas det olika många menyval. Jag gjorde en "spacer" i två olika längder så det löste sig fint!
jag gillar inte skuggeffekten på själva texten. Det ser liksom svävande ut. Jag brukar inte gilla skugga på en mörk text. Det blir snyggare när det är ljus text. När det är mörk text så gör jag ofta som i mina tidigare exempel. En ljus skugga för få en känsla av att texten är inristad i knappen/bakgrunden.
Vad använder du för inställningar då under layer style/drop shadow?
