Webbrelaterat - Design och resurser för webbdesigners » Tutorials http://webbrelaterat.se Grafiskdesign, webbdesign, resurser, tips, trender, inspiration, Photoshop, Wordpress Sun, 29 Aug 2010 11:07:46 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Hur man skapar olika bakgrunder på olika sidor i WordPress http://webbrelaterat.se/tutorials/hur-man-skapar-olika-bakgrunder-pa-olika-sidor-i-wordpress http://webbrelaterat.se/tutorials/hur-man-skapar-olika-bakgrunder-pa-olika-sidor-i-wordpress#comments Mon, 07 Dec 2009 12:02:57 +0000 Johan http://webbrelaterat.se/?p=4110 Har du nån gång funderat på att ha en annan bakgrund på dina sidor (pages) i WordPress och en annan på din förstasida. Nyligen gjorde jag en vanlig webbsida med WordPress som CMS och behövde precis vad jag nämnde nyss. Och med underbara WordPress finns det en lysande teknik hur du göra detta på ett enkelt och smidigt sätt. Så tänkte visa i detta exempel hur du har en skräddarsydd bakgrund på din första sida och en annan bakgrund på dina undersidor.

screen-1

Problemet

Som standard så anropar WP <?php get_header(); ?> på alla sina sidor. I vårat exempel vill vi ha en skräddarsydd bakgrund för förstasidan och en standard sida på resten av undersidorna. Det går självklart att göra med vanliga HTML men det vill vi inte – opraktiskt och osmidigt.

Så här ser det ut som standard i din header.php:

screen-2

Förstasidan och den är döpt till homepage.php:

screen-3

Lösningen

Vi kommer använda WP inbyggda “Conditional Tags”. Läs mer om Conditional Tags här.

Öppna din texteditor och lägg till header.php och din CSS fil från din tema mapp. Hitta
tagen <body> och ersätt den kod biten med den här.


<body id="<?php if (is_page_template ('homepage.php')){echo "home-bg";} ?>">

Eftersom att vi har skapat en specifik sida för förstasidan som vi döpte till homepage.php. Nya raden säger säger typ att: om detta är template hompage.php då ska vi echo (visa) ut stilen vi använder i CSS filen som heter #home-bg. Med #home-bg har vi lagt en skräddarsydd bakgrund som ska användas på förstasidan. Nu behöver vi en annan bakgrund för resten av sidorna och det gör vi genom att lägga in den direkt i body tagen i CSS filen.


body#home-bg	{
	background: url(style/images/bg.png) top center repeat-x;
	}

body {
	background: #fff url(style/images/page-bg.png) top center repeat-x;
	}

Använd flerfaldig bakgrunder på olika sidor

Du kanske vill ha fler olika bakgrunder beroende vart man är på sidan. Då skulle du kunna gör det på följande sätt. Som ovanför är is_page_template själva sidan och echo är stilen på sidan. Om ingen av följande sidor nämns så visas klassen #default.


<body id="<?php if (is_page_template('home.php')){
	echo "home";
	}
	elseif (is_page_template('contact.php')){
	echo "contact";
	}
	else {
	echo "default";
	}?>" >

Och din CSS kan se ut så här:


body#default {
	background:url(images/default-bg.jpg) top center no-repeat #000000;
}

body#home {
	background:url(images/home.png) top center no-repeat #000000;
}
body#contact {
	background:url(images/contact.png) top center no-repeat #000000;
}
]]> http://webbrelaterat.se/tutorials/hur-man-skapar-olika-bakgrunder-pa-olika-sidor-i-wordpress/feed 8 Adobe After Effect grunder och introduktion http://webbrelaterat.se/inspiration/adobe-after-effect-grunder-och-introduktion http://webbrelaterat.se/inspiration/adobe-after-effect-grunder-och-introduktion#comments Fri, 23 Oct 2009 10:41:26 +0000 Simon Ekholm Sastre http://webbrelaterat.se/?p=3764 Av Simon Ekholm Sastre

Om du är sugen på att lära dig AE men inte riktigt vet var du ska börja så är Videocopilot.net sidan för dig. Även om du har tidigare erfarenhet i programmet finns det mycket att hämta från denna utsökta hemsida. Andrew Kramer som är grundaren till Videocopilot är snart uppe i 100 gratis videotutorials och förutom det så är forumet en guldgruva med tips och inspiration för filmskapare.

Om du är nybörjare ska du börja med att gå igenom basträningen

Som nybörjare kan jag rekommendera dig att tänka på:

  • I början bör du alltid följa en tutorial in i minsta detalj, det är så man lär sig. Det är när du gått igenom och är klar som du kan börja om och experimentera.
  • Innan du börjar med ett projekt, kolla igenom vilka comp settings du ska ha. Du vill inte missa grunderna om vilka inställningar som gäller. Det var mitt första stora misstag när jag började med AE. Samma sak gäller kamerainställningar.

AECompset

  • Lär dig vad skillnaden mellan NTCS och PAL är. Här är en kort och enkel förklaring
  • De bästa alternativen för rendering hittar du här

Vart ska jag ladda upp min video för bästa kvallitet och publicitet?

Jag rekommenderar starkt Vimeo.com istället för Youtube. Detta förstås om det handlar om en kortfilm eller liknande. Om du filmat en kort sekvens med mobilen är Vimeo inte rätt plats att ladda upp den på.

Vimeoupload

Anledningen till att Vimeo är så bra beror på att commynityt är grundat av och för filmskapare och det finns därför inte så mycket skräpfilmer så som på Youtube. Vimeo har bra prestanda på videovisning och communityt har ett bra system där de populära eller utvalda filmerna lyfts fram efter användarnas önskan. Det är där jag hänger, haka på?!

AE
]]> http://webbrelaterat.se/inspiration/adobe-after-effect-grunder-och-introduktion/feed 1 Hur man skapar nästlande kommentarer till ditt WordPress tema http://webbrelaterat.se/tutorials/hur-man-aktivera-nastlande-kommentarer-i-aldre-wordpress-teman http://webbrelaterat.se/tutorials/hur-man-aktivera-nastlande-kommentarer-i-aldre-wordpress-teman#comments Wed, 21 Oct 2009 12:25:10 +0000 Johan http://webbrelaterat.se/?p=3761 Innan versionen 2.7 av WordPress var man tvungen att använda Brian’s Threaded Comments för att komma åt konversationer i kommentarerna.

En av dom fantastiska egenskaperna med nya versionen 2.7 och uppåt är just att den här funktionen med nästlade kommentarer och sidor navigering för kommentarer om man har hundra kommentarer kan det vara jobbigt och skrolla långt. Om man har ett äldre tema så fattas det ett par rader kod för komma åt denna funktion och jag ska visa vad du behöver göra för att komma igång med funktionen.

Aktivera nya funktionen

Första vi behöver göra är att aktivera funktionen och det gör du genom Settings – Discussion – där ska du se lite nya funktioner. Under Other comment settings så bockar du av Enable threaded (nested) comments. Du kan välja hur djupt konversationerna ska gå men jag rekommenderar att ha max 5 – annars blir det för djupt.

image1

Nya koden i comments.php

Alla kod här är bara exempel kod. Jag kommer inte lära ut hur du designar upp dina kommentarer i detta fall. Okej då kör vi, den nya koden i comments.php är förenklad jämför med den äldre varianten. Vi börjar med en liten kod snutt som ska vara i toppen i comments.php.


<?php

// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');

if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
?>

Sedan har vi den nya kommentar loopen som ser ut så här:


<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>

<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php else : // this is displayed if there are no comments so far ?>

<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->

<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>

<?php endif; ?>
<?php endif; ?>

Aktivera Javaskripten

För att stödja den nya nästlade kommentar funktionen behöver vi aktivera den nya inbyggda Javaskripten. Öppna header.php och leta efter linjen < ?php wp_head(); ?> – direkt före den så lägger du in följande kod:


<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' );?>
image2

Designa dina kommentarer

Som det är uppsatt nu är allt standard men du kanske vill designa dina kommentarer själv. I comments.php så ser du följande:


<ol class="commentlist">
< ?php wp_list_comments(); ?>
</ol>

Ersätt det med:


<ol class="commentlist">
	<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
</ol>

Nu kanske du tänker vart är mina kommentarer nånstans. Vi vill ju se HTML koden för att designa. Öppna functions.php eller skapa en i din tema mapp.

Lägga till följande kod i botten på dokumentet:


<?php
function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php echo get_avatar($comment,$size='36',$default='<path_to_url>' ); ?>

<?php printf(__('<cite class="fn">%s</cite>  <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>

<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars(get_comment_link( $comment->comment_ID )) ?>">
<?php printf(__('%1$s at %2$s'), get_comment_date(),get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

<?php comment_text() ?>
<?php if($args['max_depth']!=$depth) { ?>
<div class="reply">
<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
<?php } ?>
</div>
<?php
}
?>

Också så MÅSTE din kommentar formulär i comments.php ha < div id="respond"> runtom sig. Javascripten kommer ha fokus på den när användare svarar på andra kommentarer.

Även Cancel knappen kan du styra som ser ut så här:

<div id="cancel-comment-reply">
	<small>< ?php cancel_comment_reply_link() ?></small></div>
</div>

I nya funktionen så finns det mängder med nya klasser och ID’s som du kan använda dig av. Här kommer en ganska lång lista på vad du kan använda:

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Sammanfattning

Den här genomgången gick bara igenom hur man får nästlade kommentar funktionen att funka med äldre teman. Sen kan du designa upp den efter dina behov och krav. Har du frågor eller kommentarer så var inte rädd att hojta till.

]]> http://webbrelaterat.se/tutorials/hur-man-aktivera-nastlande-kommentarer-i-aldre-wordpress-teman/feed 6 15 video tutorials om vad du kan göra i Photoshop CS4 http://webbrelaterat.se/tutorials/15-video-tutorials-om-vad-du-kan-gora-i-photoshop-cs4 http://webbrelaterat.se/tutorials/15-video-tutorials-om-vad-du-kan-gora-i-photoshop-cs4#comments Tue, 13 Oct 2009 10:16:54 +0000 Johan http://webbrelaterat.se/?p=3671 Jag har inte Photoshop CS4 själv men kan tänka mig vilka häftiga grejer man kan göra när man ser dom här videos. En av stora egenskaperna CS4 har är 3D funktionen – som är väldigt användbar då trenden lutar åt mer organiska, realistiska och 3D på webbdesign sidan. Även ett nytt sätt att hantera bilder – du kan sätta ut punkter på en bild och från punkterna kan du dra, stretcha, förminska, förstora bilden. Jag rekommenderar inte att installera Photoshop CS4 om man har en något sämre dator – CS4 drar mycket minne och mycket kraft från processorn. Även ett hyfsat grafikkort är nödvändigt. Om man inte uppfyller dessa krav så får men ett Photoshop som går i snigelfart.

The Hue/Saturation dialog

Besök sidan

Create a colored eye

Besök sidan

3D Polaroid Montage in Photoshop

Besök sidan

How to Create a Panorama in Photoshop CS4

Besök sidan

Combine Two 3D Objects and Simulate a Realistic Shadow

Besök sidan

Use Batch Processing Actions

Besök sidan

Photoshop CS4: Kuler

Besök sidan

Harry Potter Text

Besök sidan

Photoshop CS4: Droplets

Besök sidan

Photoshop CS4 Zooming and Panning

Besök sidan

Photoshop CS4 new retouching tools how to

Besök sidan

Adobe Photoshop CS4 Extended Depth of Field Tutorial/Demo

Adobe Photoshop CS4 Extended Depth of Field Tutorial/Demo from Scott Bourne on Vimeo.

Besök sidan

Using the New Layer Palette in Photoshop CS4

Besök sidan

Photoshop CS4 New Features: Content Aware Scaling

Besök sidan

Adobe Photoshop CS4: 3D Capabilities

Besök sidan

]]> http://webbrelaterat.se/tutorials/15-video-tutorials-om-vad-du-kan-gora-i-photoshop-cs4/feed 0 Hur man gör en 3D känsla i Photoshop och CSS http://webbrelaterat.se/tutorials/hur-man-gor-en-3d-kansla-i-photoshop-och-css http://webbrelaterat.se/tutorials/hur-man-gor-en-3d-kansla-i-photoshop-och-css#comments Mon, 15 Jun 2009 09:17:42 +0000 Johan http://webbrelaterat.se/?p=3266 Det var egentligen meningen att vi skulle fortsätta med webbdesign trenderna idag men det kommer ett litet mellanstick här. Fredrik Forsmo är en ung programmerare som skickade mig en tutorial på hur man skapar 3D känsla i Photoshop och sedan hur man inplanterar det in i CSS och HTML. Glöm inte besök Fredrik på hans blogg där han pratar om ämnet C# och .NET.

SE DEMO HÄR

Steg 1 – Skapa en bakgrunds bild i Adobe Photoshop

Först så skapar vi en ny bild i Photoshop som är 1021×115. Glöm inte att välja transparant bakgrund. Sedan behöver vi skapa en till bild som är 900×50. Den ska vi använda som mall för att veta vad 900px är på våran andra bild.

07

På den första bilden så tar vi och makerar ungefär 3/4 av bilden på längden som vi sedan fyller med en färg, i guiden så väljer vi en blå nyans. Vi använder även ‘Gardient Overlay’ för våran blå färg, dvs att vi använder två olika blå färger. En där uppe som är lite ljusare och en där nere som är lite mörkare. Men det är inget måste.

04
06

Sen så tar vi och skapar två vita linjer som är 1px stor som vi placerar uppe och nere på den rektangen vi just färlagt. Se bild nedan.

01

Nu så ska vi ta våran andra bild och göra helt vit, som vi sedan kopierar in till våran första bild. Notera att den blir placerad i mitten, så allt vi behöver göra är att dra ner den till kanten mot den blåa. Lägg gärna det vita lagret under det blåa lagret.

02

Vi använder svart bakgrundsfärg för att visa det vita. Sen ska vi göra våra hörn, som skapar 3D känslan. Utrymmet på sidan av den vita rekangen ska vi göra två trianglar, en på vardera sida.

Vi använder ‘Polygonal Lasso Tool’ verktyget till detta.

05

Vi drar en linje bredvid den vita kanten sedan vidare vid den blåa linjen sen snett imellan den vita och den blåa kanten vi just dragigt. Se bild nedan. Glömt inte att göra detta på båda sidorna, sedan kan du placera lagrena under både den vita och den blåa. Det blir lättare att färglägga triangeln.

03

Steg 2 – Används bild med css

När bilden slutligen är klar, så sparar vi den som png som vi ska använda med css. Nu kan vi skapa index.html och style.css. Glöm inte att länka in style.css till våran html fil. Nedan kan du hela stylesheeten via använder.

Öppna ett nytt css document och kopiera följande kod..

body{background:#555;}
#wrapper{margin:0 auto; width:1022px;}
#content{width:940px; background:#ece9e9;margin:18px 0px 0px 31px; float:left; height:500px;}
#content{color:#222222; padding:10px;}
#content h2{color:#222}
#bg{background:url('bgd2.png') no-repeat scroll 0 0; float:left; width: 1022px; height:115px;}
#bg h1{color:#fff;    font-size:20px;    font-family:Verdana; font-weight:normal; padding:10px;}

Sedan har vi HTML koden som ska in i ett nytt HTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hur man gör en 3D känsla i 2D av Fredrik Forsmo</title>
</head>

<body>

<div id="wrapper">
<div id="bg">
<h1>Rubrik</h1>
<div id="content">
<h2>Rubrik 2</h2>
<p>Din text här</p>
</div>
</div>
</div>

</body>
</html>

Sammanfattning

Visar hur man skapar en enkel bandrolls effekt i din webbdesign. Du kan även experimentera och göra olika typer av banderoller. Guiden är mest för att visa ett sätt att skapa just den här typen av effekt.

]]> http://webbrelaterat.se/tutorials/hur-man-gor-en-3d-kansla-i-photoshop-och-css/feed 1 Handplockade Photoshop tutorials som du borde se http://webbrelaterat.se/tutorials/handplockade-photoshop-tutorials-som-du-borde-se http://webbrelaterat.se/tutorials/handplockade-photoshop-tutorials-som-du-borde-se#comments Fri, 08 May 2009 12:01:08 +0000 Johan http://webbrelaterat.se/?p=2930 Det här är några tutorials som jag har gått igenom i veckan och tyckte dom var verkligen av bästa kvalité om du vill bli ännu bättre med Photoshop. Det räcker med att du gör 2-3 tutorials i veckan för att bli ett strå vassare. Senaste tiden finns det många bra Photoshop artister där ut som lär dig mer och bättre vad 2år på en högskola skulle göra. Hoppas du gillade dom som jag gjorde.

Fake 3D in Photoshop

152-58-final

Slow motion bullet shot effect

bullet-shot-effect_step47_492e88a0b6e67

Fragmented golden phone

golden_medium

How to Create a Richly Ornate Typographic Illustration

final_small

Create a Glossy Volt Icon in Photoshop

final-result-small

Lighting a Giant Elephant

491235_9f9f

Interweaving Photo Strips

photoshop-tutorial-image36

Create an Out of Bounds Fantasy Illustration

final

Iron Man View Interface Effect in Photoshop

2957345845_89c5b8914a_b

Making of Chaos

finalimage

Space Explosion Photoshop Tutorial

earth
]]> http://webbrelaterat.se/tutorials/handplockade-photoshop-tutorials-som-du-borde-se/feed 0 Hur man gör en Apple liknande meny i Photoshop http://webbrelaterat.se/tutorials/hur-man-gor-en-apple-liknande-meny-i-photoshop http://webbrelaterat.se/tutorials/hur-man-gor-en-apple-liknande-meny-i-photoshop#comments Fri, 13 Mar 2009 09:12:16 +0000 Johan http://webbrelaterat.se/?p=2308 Ska visa ett enkelt litet trick. Trendsättarna Apple och Adobe gjort en liten sak på sin font i sin meny så det ser ut som att texten ser intryckt i bakgrunden. Gå till Apple och ta en titt på deras meny. Det är iallafall är det lilla tricket jag tänkte visa här hur man gör.

Vad vi ska göra

final

Steg 1

Öppna ett nytt dokument och sätt bred på 1100px och höjd på 600px och vit bakgrund. Skönt och ha lite yta när man jobbar.

step_one

Steg 2

Gör ett nytt lager, Layer – New- Layer. Välj en ljus grå färg ifrån din Color Picker, jag använde #c3c2bb. Välj sedan Rounded Rectangle Tool och sätt Radius på 4px, den ger så vi får runda hörn. Gå sen till Rounded Rectangle Options och sätt Fixed Width på 960px och 40px på Hight. Gå till dokumentet och tryck så får du upp våran bakgrund till menyn.

step_two

Steg 3

Öppna Layer Style Options, Layer – Layer Style – Blending Styles eller dubbel tryck på lagret. Och gör följande..

step_three
step_three_2
step_three_3

Steg 4

Välj text-verktyget och ta en mörkare grå färg, jag använde #3c3b3e och skriva vad som passar in i din meny. Hoppa över dock det sista ordet/alternativet du har tänkt att använda i menyn. Den måste vi skräddarsy efter hover effekten vi ska använda. Efter du har skrivit vad som passar dig gör du en dubblett av text lagret och ge den vit färg. Markera text lagret med vit färg och lägg det under/bakom det gråa text lagret. Det är nu själva effekten kommer som är egentligen ett väldigt enkelt trick, tryck på pil tangenten neråt en gång. Dra ner genomskinligheten något på det vita text lagret, Opacity runt 70%.

step_four

Steg 5

Öppna ett nytt lager. Markera meny-lagret och håll in Ctrl så du ser att meny blir markerat. Tryck på det nya lagret och välj Pencil Tool i verktygsfältet. Välj 1px i storlek och svart färg. Med markören fortfarande markerat runt menyn håller du in Shift (för att få en rak linje) och dra ett streck bara uppifrån och ner. Gör exakt samma med vit lager på fast på ett nytt lager. Nu ska du ha två streck på två lager, ett svart och ett vit.

step_five2

Dra ihop strecken så du har dem bredvid varandra, vit till höger och svart till vänster. Zooma in om det behövs. Dra ner Opacity till 25% på det svarta lagret och 30% på det vita eller gör efter vad du tycker ser bra ut. Markera båda lagren genom att håll in Ctrl. Höger klicka och välj Merge Layers. Gör några dubbletter och placera ut dem efter dina behov.

step_five

Steg 6

Välj text-verktyget och vit färg. Skriv in ditt sista alternativ i menyn. Kopiera text lagret, välj svart färg på det kopierade lagret och dra så det ligger under det vit. Tryck på pil tangenten och tryck en gång fast uppåt denna gång. Dra ner Opacity till ca: 70%. Välj Rectangular Marquee Tool och ha Style på Normal. Dra så du täcker mellan avdelare och fyll med samma mörkare grå som förut, #3c3b3e. Höger klicka och välj Free Transform om du behöver justera in så det passar. Dra ner Opacity till ca: 70%.

step_six

Slutresultatet och sammanfattning

Beroende på dina kunskaper så var det två saker som var bra. Få texten se intryck ut och avdelarna. Det blev lite svengelska också, det får ni ursäkta.

step_seven

Klicka för att förstora.

]]> http://webbrelaterat.se/tutorials/hur-man-gor-en-apple-liknande-meny-i-photoshop/feed 2 20 photoshop tutorials som förbättrar din design teknik http://webbrelaterat.se/tutorials/20-photoshop-tutorials-som-forbattrar-din-design-teknik http://webbrelaterat.se/tutorials/20-photoshop-tutorials-som-forbattrar-din-design-teknik#comments Wed, 18 Feb 2009 11:57:38 +0000 Johan http://webbrelaterat.se/?p=1953 Ju fler Photoshop tutorials du gör, ju skickligare blir du på att hantera Photoshop självklart. Det finns olika typer av design stilar man kan lära sig. Du kan bli bättre på och skapa gränssnitt mellan det visuella och människan. Du kan vara bättre på och skapa webbsidor än och göra affischer. Du kan vara proffs på att manipulera bilder i Photoshop osv. Tänkte idag ska jag lista 20 tutorials som lär oss att designa i Photoshop, för mig så det grunden till och lära dig resten vad som kan göras i Photoshop.

Expressive lighting effects

7

Creating Energy Spheres in Photoshop

2415911525_e32b2768f1

Create Your Own Planets

tutorialsimplestep6

Stylish fire lines

fire-lines1

Evolution… Or Revolution

8te6putendj3nam940cs

Storm Effect

2_a2_081120234111

Striking Text Effect Using Glows and Blends

two

Magic lighting effect in photoshop

magiceffect_thumb

Creating fireballs and explosions

image_final

Fiery Photoshop Space Explosion Tutorial

screenshot2_sm

3D Retro Strip Design

curvefinal

A Retro Wallpaper/Poster

retro_poster_final

Really cool Eclipse Effect in Photoshop

conclusion

Trendy Geometric Lines Design

sg-poster-sm

Dynamic Recessed Watercolor Typography in Photoshop

conclusion1

Design an Epic Fantasy Scene with Photoshop

step27-curves2

Create a Furious Pink Panther Poster

pos-2

Create sci-fi poster art

space_digitalarts

Orange – Design your life

design_your_life

How to Create a Digital Illustration Using Birds

final
]]> http://webbrelaterat.se/tutorials/20-photoshop-tutorials-som-forbattrar-din-design-teknik/feed 0 Dagliga tips #02: jQuery tutorials, javaskript inspiration, resurser om CSS3 http://webbrelaterat.se/inspiration/dagliga-tips-02-jquery-tutorials-javaskript-inspiration-resurser-om-css3 http://webbrelaterat.se/inspiration/dagliga-tips-02-jquery-tutorials-javaskript-inspiration-resurser-om-css3#comments Thu, 29 Jan 2009 16:03:33 +0000 Johan http://webbrelaterat.se/?p=1714 Intressant det är med jQuery, jag hittade en bra länk till 13 animerade jQuery tekniker. Javaskript inspiration kanske ger dig nya idér. 100 Photoshop brushes kan vara bra och ha lättillgängligt. Gillar du CSS så bör du definitivt ta en titt på 20 Useful Resources for Learning about CSS3.

1. 50 Websites that make amazing use of javascript

buildinternet1

2. 13 Excellent jQuery Animation Techniques

incg

3. 20 Useful Resources for Learning about CSS3

sixrevisions

4. Building a jQuery-Powered Tag-Cloud

nettuts

5. 100 Awesome High Resolution Photoshop Brushes

photoshoproadmap
]]> http://webbrelaterat.se/inspiration/dagliga-tips-02-jquery-tutorials-javaskript-inspiration-resurser-om-css3/feed 0 20 superbra artiklar, guider, inspiration och tips om loggor och profiler http://webbrelaterat.se/inspiration/30-super-bra-resurser-om-loggor-och-profiler http://webbrelaterat.se/inspiration/30-super-bra-resurser-om-loggor-och-profiler#comments Tue, 27 Jan 2009 08:32:14 +0000 Johan http://webbrelaterat.se/?p=1598 Jag driver en Facebook grupp som heter Business Cards & Logo Branding Design, som var meningen att jag skulle samla resurser kring ämnet och samtidigt dela med mig med dem. Här hittar du artiklar, tutorials, inspirations gallerier och tips och tricks, ungefär allt du behöver för att lära dig och kunna skapa egna loggor och företags profiler. Jag kommer bara lista länkarna i en lång lista och samt ge en liten beskrivning om länken.

Brand New

Brand New ger åsikter om företags loggor och profiler.

brand_new

How NOT To Design A Logo: Webdesigner Depot

Bloggen beskriver varför du bör köpa en profil/identitet som är kostsam och från en riktig designer och inte en enkelt massproducerad logga för en hundring. Värt att ta en koll på.

webdesignerdepot

Business Card Design Project Walkthrough: Spoon Graphics

Går igenom processen hur du skapar och exporterar ett lyckat visitkort. Mer en guide/tutorial.

spoongraphics

Logo Faves

Logo Faves scannar igenom hundratals portföljer varje dag från talangfulla designers där ute för att ge dig den bästa inspirationen.

logofaves

35 Stunning Black and White Logos: Siah Design

En samling av grymma svart och vit loggor.

siahdesign

50 Stunning Examples of a great redesign: My Top Picks

Otroligt inspirerande loggor som är omgjorda till dagens moderna krav. Vilket ska vara en hemsk svår uppgift att utföra.

function

40 Excellent Logo Designs

Penflare har samlat sina bästa utvalda loggor för inspiration.

penflare

40+ Logos Submitted By The Designers Themselves

Här har designers själv varit med och bidragit med deras favorit logga.

designcubicle

Logo design process of Scroll magazine

Berömde Veerle från Veerle Blog beskriver hennes tankar och process när hon skapade logga till tidningen Scroll.

veerleblog

Photoshop Business Card Tutorial

En hyfsat bra tutorial hur du göra schysta visitkort.

luxa

Logo creaton process – inspirational sketching

En till artikel om process till en lyckad logga. Varför det är viktigt att du skissar och gör noggranna undersökningar innan du hoppar in och designar.

1stwebdesigner

70 Typography Logos

Dom här typografiska loggorna är rätt grymma och unika.

kreativegarden

50+ Kick Ass Logos for Inspiration

fuelyourcreativity

Cardboard And Torn Paper Business Card

Photoshop tutorial hur man får till en kartong liknande effekt.

pshero

The Logo Design Process of TOP Logo Designers

En till liten artikel om processen om hur du ska gå till vägar när du skapar en logga. Bra att små läsa alla artiklar så pusslar man ihop dem godbitarna man tycker är bra. Länkarna till artiklarna är värda återbesök också.

justcreativedesign

BzZz, Create a Fly Logo Design

Hur du skapar en logga i Adobe Illustrator. Det finns 2 delar i den serien.

aiburn

Faveup

En mycket bra galleria för loggor.

faveup

What makes a good business card?

David Airey beskriver hans erfarenheter vad som är ett lyckat visitkort.

davidairey

Design a Logo – The Ultimate Guide

youthedesigner

How To Choose A Logo Designer

smashingmagazine
]]> http://webbrelaterat.se/inspiration/30-super-bra-resurser-om-loggor-och-profiler/feed 0