آموزش قالب سایت

با افزایش وبلاگها و سایتها و پیشرفت تکنولوژی داشتن یک سایت یا وبلاگ زیبا و کاربردی برای تمامی افراد الزامیست . امروزه تعداد قالبهای طراحی شده آماده زیاد است و این امر ضروریست که قالب را برای خود اختصاصی کنید ، در این پست آموزش تغییر هدر انواع قالب و اختصاصی کردن قالب را در اختیار شما قرار می دهیم . [...]

متاسفانه به دلیل تنوع در طراحی ها این امر کمی پیچیده می شود که اگر کمی با CSS و HTML آشنایی داشته باشید بسیار به شما کمک می کند اما سعی می کنیم این آموزش را به صورت آسان و صریح برای شما قرار دهیم .

امروزه هدر سایتها اکثرا از عکسهایی استفاده می شود که این عکسها به دو صورت در کد HTML قالب فراخوانی می شوند :

۱- به صورت کد نمایشی عکس HTML در تگ همان table : در این روش عکس هدر را توسط کدی شبیه به کد زیر در قالب و در قسمتهایه اول قالب فراخوانی می کنند ( در TABLE هدر )

در این کد width=”1005″ به معنی این است که طول این عکس ۱۰۰۵ پیکسل است و height=”344″ به این معنی است که عرض آن ۳۴۴ پیکسل است .

* دقت کنید که حتما عکسی را که می خواهید جایگزین هدر فعلی قالب بکنید ، حتما در همان اندازه هدر اصلی قالب باشد وگرنه ممکن است قالب به هم ریخته شود

در این نوع فقط کافیست عکس خود را با ساز هدر قالب طراحی کنید و در فضایی آپلود کنید و لینک آن را جایگزین لینک فعلی هدر بکنید .

2- فراخوانی از طریق فایل CSS ( جانبی / داخلی ) : اکثرا در قالبها از این روش استفاده می شود ، به دلیل اینکه سرعت بیشتری نسبت به روش قبل دارد و امروزه می توان گفت بیش از ۹۵% طراحی ها از این طریق انجام میشود . در این روش کار یکم سخت تر می شود ، برای شروع شما باید ابتدا فایل CSS را که در قالب فراخوانی شده است پیدا کنید . برای اینکار بین دو تگ و به دنبال کدی شبیه کد زیر بگردید :

جای style.css لینک فایل CSS قرار دارد . دقت کنید که فقط از این طریق می توان فایل CSS را در قالب فراخوانی کرد و همیشه پسوند آن css. می باشد .

ممکن است که در قالب بیش از یک فایل CSS باشد که در این صورت ابتدا به دنبال فایلی بنام style بگردید و اگر پیدا نکردید بقیه فایلهای CSS را باز کنید و دنبال تگ هدر بگردید .

بعد از پیدا کردن فایل CSS ، لینک آنرا در مرورگر خود باز کنید . یک صفحه کد برای شما نمایش داده می شود ، آنرا SAVE کنید و در کامپیوتر خود با ویرایشگر مناسبی باز کنید ( مثلا notepad ) ، حال یکسری کد دارید که به توضیح آنها می پردازیم .

در اینجا نیز با توجه به طرحهای مختلف ممکن است مختلف باشد اما در کل شما برای تغییر هدر کافیست به دنبال کدی شبیه زیر بگردید :

.header {
background: url(‘images/header.jpg’) transparent no-repeat scroll center top;
height: 344px;
width: 1005px;
position: relative;
font-size: 18px;
}

در بیشتر قالبها به اسم header ، header Image ، …. می باشد . شما از اسم آن می توانید آنرا در بیشتر قالبها شناسایی کنید . ممکن است کدهای درون آن نیز کمی بیشتر یا کمتر باشد یا تفاوتی دیگر داشته باشد اما در کل یک لینک عکس دارد با آندازه طولی و عرضی آن . حال مانند قبل عمل می کنیم و عکسی را که طراحی کردیم با سایز هدر اصلی قالب را آپلود می کنیم و در کد بالا در قسمت images/header.jpg قرار می دهیم و SAVE می کنیم . حال باید فایل CSS خود را آپلود کنیم و جایگزین فایل زیر درون قالب خود کنیم :

فایل جدید را جایگزین style.css می کنیم و قالب خود را save می کنیم . هدر جدید ما آماده است و می توانیم از آن استفاده کنیم .

نکاتی که باید دقت شود :

۱- حتما سایز عکسی که طراحی می کنیم با سایز هدر اصلی قالب مطابقت داشته باشد وگرنه ممکن است قالب به هم ریخته شود .

۲- ممکن است در فایل CSS ب جای header. از مقادیری دیگری استفاده شود . ( اما در کل اسمی از header نیز در آن به کار می رود ، البته بستگی به طراح دارد )

۳- ممکن است فایل CSS بخش header. دارای تعداد بشتری دستور باشد که شما فقط لیمک عکس را تغییر می دهید و به دیگر کدها دست نمی زنید .

۴- در اکثر قالبهای امروزی به خصوص قالبهای ارایه شده رایگان از روش دوم (فراخوانی از طریق فایل CSS ) استفاد می شود .

۵- برای آپلود نیز می توانید از سایتهای فضای رایگان استفاده کنید .

۶- به قسمتهای مختلف آموزش دقت کنید و مو به مو انجام دهید تا موفق باشید .

این آموزشم به پایان رسید امیدوارم مفید واقع بشه .

کیوان ا

آموزش طراحی قالب سایت در فتوشاپ از ابتدا

نویسنده: سامان | تاریخ ارسال: ۱۳۹۰/۰۸/۰۹

آیا آرزو دارید که خودتان یک وب سایت زیبا و مورد پسندتان را طراحی کنید ، اما نمی دانید چگونه؟ باید صادقانه عرض کنم که چند سال پیش همین موضوع برای خودم رخ داده بود که همیشه دوست داشتم طرح های مورد علاقه خودم را طراحی و بسازم! اما ناراحت نباشید چون امروز قصد دارم آموزش ابتدایی که همان طراحی قالب در فتوشاپ است را آموزش دهم ! نترسید چون در این آموزش نیازی به یک فوق حرفه ای بودن در فتوشاپ نیست بلکه با کمی مهارت و تلاش و توجه به جزئیات به امید خدا آن را فرا خواهید گرفت.

من این آموزش را روان و راحت و در سطح مبتدی نوشته ام تا کار نیز برای مبتدیان آسانتر شود! شما از طریق این آموزش جزئیات ریز و درشت که باعث زیباتر شدن وب سایت و قالب شما خواهد شد را یاد می گیرید. پس با یاد خدا شروع کنید!

تصویر نهایی آموزش را می بینید که با یادگیری این آموزش قالبتان به این شکل می شود! ( برای دیدن دمو این قالب به اینجا بروید )

طرح نهایی قالب

1- برای امروز آموزش طراحی قالب در فتوشاب بر مبنای 960 Grid System را برای شما تدارک دیده ام. بنابراین ، قبل از آغاز آموزش شما می بایست تمپلیت 960 Grid را دانلود کنید. شما می توانید سیستم 960 grid را از آدرس 960.gs دانلود کنید. کافیست بعد از دانلود فایل را توسط برنامه Winrar خارج نمائید و فایل PSD را را با فتوشاپ باز کنید. قالب 960 گرید دارای دو حالت می باشد: یکی 12 ستونه و دیگری 16 ستونه . در صورتی که قالبی که میخواهید طراحی کنید سه ستونه هست از نوع 12 ستونه گرید باید استفاده کنید. اگر هم می خواهید طراحی با 4 ستون را در فتوشاپ طراحی نمائید می توانید از نسخه 16 ستونه یا همان 12 ستونه گرید استفاده کنید. اگر شما آموزش را دنبال نمائید متوجه توضیحات 12 ستونه و 16 ستونه خواهید شد و می توانید تشخیص دهید از کدامیک استفاده کنید.

2- قبل از هر کاری فایل PSD دانلود شده را در داخل فتوشاپ برای طراحی باز کنید ، ما اول نیاز داریم به یک طرح اولیه و کلی از وب سایتمان که در تصویر زیر می توانید نمونه کلی طرح را ببینید.

Design

3- پس از تعریف تعیین کردن طرح و ساختار کلی قالب فایل 16_Col.PSD را در فتوشاپ باز کنید. کلیدهای ترکیبی ( Alt+Ctrl+C) را بزنید یا به منوی Image > Canvas size بروید و گزینه ها را بر روی 1200px طول و 1700px ارتفاع قرار دهید و رنگ پس زمینه را # FFFFFF تعیین کنید.

4- یک لایه با کلیدهای (Ctrl+Shift+N) ایجاد کنید و با ابزار Rectangle Tool یا زدن کلید ( M ) به اندازه 80px در عرض مانند تصویر یک مستطیل ایجاد کنید و با کد رنگ #dddddd آن را پر کنید.

5- یک لایه جدید دیگر بسازید و تنظیم حالت لایه را روی Overlay قرار دهید . حالا یک براش نرم با 600px و با رنگ سفید مانند تصویر در نظر بگیرید و چند بار با لبه قلمو بر روی بالای مستطیل کلیک کنید تا افکت نور لطیف به کار داده شود.

6- یک لایه دیگر ایجاد کنید و با ابزار Rectangle Tool یک مستطیل بسیار کوچک مانند تصویر ایجاد کنید و با رنگ خاکستری تیره آن را پر کنید.

7- با همان ابزار Rectangle Tool یک مستطیل 500px در پایین تصویر بکشید و بعد یک لایه بسازید و با رنگ سفید پر کنید و روی لایه کلیک راست کرده و گزینه Blending Option را انتخاب کنید و گزینه Gradient Overley را انتخاب و در کادر آن رنگ های گرادینت را بین #d2d2d0 و #ffffff قرار دهید و Angel را روی -90 درجه بگذارید و Scale را هم 100% قرار دهید.

8- حالا برای ایجاد افکت نور مانند مرحله پنج عمل می کنیم . از این به بعد نیز برای استفاده های بعدی شما را به مرحله پنج ارجاع می دهم. یک لایه جدید ایجاد کنید و و تنظیم لایه را روی Overlay بگذارید و با استفاده از ابزار براش یک براش نرم با اندازه 600px در نظر گرفته و چند بار بر روی لبه مستطیل بزرگ کلیک می کنید تا افکت نور به آن داده شود.

9- با ابزار رسم مستطیل یک مستطیل 400px در بالای صفحه بکشید و یک لایه جدید ایجاد کنید و آن را با رنگ سفید پر کنید و با ابزار گرادینت با کد رنگ #2787b7 و #258fcd یک گرادینت آبی مانند تصویر ایجاد کنید.

10- یک لایه جدید ایجاد کنید و با ابزار رسم مستطیل یک خط 1px در پایین کادر آبی ایجاد کنید و آن را با رنگ آبی تیره پر کنید و با کلیک بر روی لایه گزینه Blending Option را انتخاب و از کادر باز شده Drop Shadow را انتخاب کنید و تنظیمات را به صورت : Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px قرار دهید. یک لایه دیگر هم ایجاد و با همان ابزار یک مستطیل 1px این بار در بالای کادر آبی رنگ می کشید و با همان تنظیمات قبلی آن را افکت می دهید. به این ترتیب کادر ما دارای لبه های برجسته و تیز می شود.

11- به منوی Image > Canvas size بروید و از فلش ها ، فلش بالا را انتخاب و 50px را در گزینه Height وارد کنید تا کادری به اندازه 50 پیکسل در بالای کادر آبی ایجاد شود و رنگ آن را هم خاکستری کنید و بعد یک لایه ایجاد کنید و با استفاده از ابزار رسم مستطیل مانند تصویر به اندازه همان 50px مستطیل در نظر بگیرید و دوباره با همان ابزار 1px در بالا رسم و رنگ آن را خاکستری تیره قرار دهید و بر روی لایه کلیک راست کرده و گزینه Blending Option را کلیک کنید و گزینه Drop Shadow را انتخاب و تنظیمات را مانند تصویر اجرا کنید.

12 - با انتخاب ابزار Rounded Rectangle Tool یا زدن کلید L یک مستطیل با گوشه گرد با اندازه 5PX در گزینه Radius در بالای کادر و به اندازه 60*30 بکشید و رنگ آن را هم نارنجی یا زرد در نظر بگیرید و بر روی لایه کلیک راست کنید و از گزینه Blending Option تنظیمات را مانند زیر وارد کنید.
Inner Shadow – color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px
Inner glow – Blend mode: normal, color: #ffffff, Size: 4px
Stroke – Size: 1px, Position: inside, color: #ce7e01

حالا بر روی همان لایه یا Shape با کلیدهای Ctrl+Mouse کلیک کنید و از منوی Select > Modify > Contract در کادر 1px را وارد کنید.

بعد از آن یک لایه جدید بسازید و تنظیمات را مانند مرحله پنج انجام دهید و بر روی منوی ساخته شده با براش نرم افکت نور دهید. بعد از آن با انتخاب فونت مورد نظرتون در داخل کادر نام منو ها را پشت سر هم ولی با فاصله مناسب بنویسید و رنگ و اندازه مورد دلخواهتان را به آن بدهید.

13- با ابزار Rounded Rectangle Tool یک مستطیل با گوشه گرد با اندازه 5PX در گزینه Radius در بالای کادر به اندازه یک کادر سرچ بکشید و رنگ آن را رنگ مشکی که در بالای سایت است قرار دهید و روی لایه کلیک راست کرده و تنظیمات را به صورت زیر انجام دهید:
Inner Shadow – color: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px
Stroke – Size: 1px, Position: inside, color: #dfdfdf

و در کادر ایجاد شده کلمه جستجو را بنویسید و به آن رنگ بدهید و از همان ابزار قبلی یک کادر کوچک دیگر برای سرچ کردن بکشید و رنگ را به آن بدهید.

برای سامان دادن به کارها یک Layer folder ایجاد کنید و نام به آن بدهید و اعمالی که برای ایجاد کادر جستجو انجام دادید با هم انتخاب و بگیرید و داخل پوشه بیندازید.

14- با ابزار رسم مستطیل و با همان اندازه در گزینه Radius یک کادر در پایین کادر جستجو بسازید و رنگ آبی به آن بدهید و هر افکتی که می خواهید بر روی آن اعمال کنید.

یک لایه جدید ایجاد کنید و مانند مرحله پنج اعمال کار کنیدو با انتخاب براش نرم اندازه را روی 45px قرار دهید و دور کادر را انتخاب کنید و با براش نرم چند بار روی لبه کادر بکوبید تا افکت نور به آن داده شود.

و نوشته ثبت نام را داخل کادر بنویسید و رنگ و اندازه دلخواه به آن بدهید و بعد از آن نوشته وارد شوید را هم در کنار کادر بنویسید و رنگ آن را هم تعیین کنید.

15- لوگو و شعار خود را در بالای منوها و در راس کادرها قرار دهید .

16- برای اینکه کار با لایه ها راحت تر شود و بعدا سردرگم نشوید چند پوشه با نام های Header و Footer و Main و Contect ایجاد کنید و لایه ها و بک گراند های مربوط به هر بخش را داخل هر پوشه بیندازید.

17- برای افکت دادن به تصویر ابتدا دور کادر آب رنگ را انتخاب و هایلایت کنید و با دستورالعمل مرحله پنج یک براش نرم با اندازه 600px در نظر بگیرید و بر روی لبه کادر انتخاب شده بکوبید تا تصویر زیباتر شود.

18- برای تصاویر وسط صفحه دو تصویر تهیه کنید و با کلیدهای Ctrl+T یکی را بزرگتر و دیگری را کوچکتر کنید و پشت تصویر بزرگتر قرار دهید و بعد از آن برای اینکه به دو تصویر سایه بدهیم ، و بعد از دو تصویر کپی تهیه کنید و از منوی Edit > Transform > Flip Vertical را انتخاب کنید و آنها را دقیقا زیر هم قرار دهید و ابزار Rectangular Marquee Tool را انتخاب و از منوی Select > Modify > Feather گزینه را روی 30px قرار دهید و مانند تصویر قسمتی را انتخاب کنید و Delete کنید که تصویر به صورت هاله ای و سایه دار ایجاد می شود.

برای ایجاد یک دایره کنار تصویرمان از ابزار Elipse Tool استفاده کنید و مانند مراحل قبل به آن افکت و نور بدهید. و نوشته های خود را با فونت مورد نظرتان در کادر آبی وارد کنید و با دستورا قبلی منوهای این بخش را مانند تصاویر بسازید.

19- اگر به تصویر نهایی دقت کرده باشید منوهای سه ستونه که در وسط صفحه قرار دارند که با همان ابزار Rounded Rectangle Tool ترسیم شده اند . شما هم با همان ابزار به اندازه Radius در 10px و به اندازه 70px از کادر آبی به پایین رسم کنید و افکت دور کادر را 1PX قرار دهید و رنگ و افکت را هم مشخص کنید.

برای اینکه لبه های پایینی کادری که کشیدیم صاف باشد با ابزار Direct Selection Tool یا زدن کلید A در پایین گوشه کادر کلیک کنید و با نگه داشتن Shift و ماوس را به پایین بکشید به طوری که دو نقطه پایینی هم دیگر را قطع کنند. به این ترتیب یک کادر گرد با گوشه صاف ساخته ایم.

20 - ابزار Line Tool را انتخاب کنید و اندازه آن را روی 1px قرار دهید.

21- بعد از انتخاب ابزار کادری که در مرحله 19 کشیدیم را به چهار قسمت تقسیم کرده و در هر قسمت هم یک خط با ابزارمان می اندازیم.

22- در هر Tab نوشته ها و تصویر آیکون خود را قرار دهید البته می توانید از این سایت آیکون خود را دانلود و در طرحتان استفاده کنید.

23- برای اینکه هر Tab وقتی انتخاب شد با رنگ سفیدتر نمایان شود اینطور عمل می کنیم که کل کادر اول را انتخاب و هایلایت می کنیم و با قوانین قبلی افکت نور به آن بدهید.

24- یک لایه جدید بسازید و داخل ان را با رنگ خاکستری تیره پر کنید و زیر لایه کادر 3ستونی باشد سپس گزینه Vector Mask را مانند تصویر انتخاب کنید و سپس حالت رنگ را مانند تصویر قرار دهید و با براش نرم گوشه ها را بکوبید تا کادر سایه دار شود.

سپس با ابزار Line Tool یک خط 1px زیر کادر بکشید و رنگ به آن بدهید و با همان ابزار براش نرم گوشه های خط را بکوبید تا زیباتر شود.

25- یک لایه ایجاد کنید و با ابزار رسم مستطیل یک مربع مانند تصویر زیر کادرها بکشید و رنگ داخل آن را سفید پر کنید و با کلیک راست روی لایه به آن افکت Drop Shadow با اندازه 1px و رنگ خاکستری تیره بدهید. و از همان لایه چند کپی بگیرید و آنها را با کلیدهای Ctrl+T بچرخانید تا شبیه تصویر شوند . حالا یک تصویر انتخاب کنید و آن را وارد فتوشاپ کنید و روی لایه اصلی که صاف است قرار دهید .

روی لایه اصلی با کلید Ctrl+ Mouse کلیک کرده و از منوی Select > Modify > Contract انتخاب کرده و گزینه را روی 5px بگذارید و گزینه Vector Mask را بزنید تا تصویر دقیقا در مرکز لایه بنشیند.

26 - برای لایه های خود پوشه بسازید و لایه ها و نوشته های مربوطه را در آن بیندازید .

نوشته ها و آیکون های خودتون رو مانند تصویر در وسط صفحه بچینید.

27 - با استفاده از ابزار همیشگی یک مستطیل بزرگ با کد رنگ f3f3f3# به اندازه 220px رسم کنید و گزینه Strok آن را روی 1px و با رنگ خاکستری تیره در نظر بگیرید. دوباره با همان ابزار یک مستطیل دیگر داخل مستطیل قبلی رسم کنید و کد رنگ #f7f7f7 را به آن بدهید و گزینه Strok آن را نیز 1px بگذارید و رنگ خاکستری کمرنگ تر در نظر بگیرید.

نوشته های خود را داخل کادر با هر آیکونی که می پسندید قرار دهید.

28- یک کادر در پایین صفحه با رنگ سیاه به اندازه 400px رسم کنید.

29- مانند مرحله پنج ابتدا کادر را انتخاب و هایلایت کنید و با براش نرم با رنگ سفید بر روی کادر بکوبید.

30- یک کادر دیگر به اندازه 10px در بالای کادر سیاه بکشید و رنگ خاکستری به آن بدهید و یک خط در ابتدای کادر سیاه با ابزار Line Tool با اندازه 1px بکشید و افکت Drop Shadow به آن بدهید و همین عمل را برای کادر خاکستری نیز اعمال کنید.

31- حالا یک مستطیل در پایین کادرها به اندازه 40px بکشید و رنگ خاکستری به آن بدهید و هر افکتی که می خواهید به آن بدهید و نوشته ها و لوگوها و آیکون های مورد نظرتان را در آن قرار بدید. اگر احساس کردید که صفحه کوچک می شود با استفاده از منوی Image > Canvas size به اندازه صفحه اضافه کنید.

32- با ابزار Line Tool یک خط سفید در پایین صفحه و یک خط هم در بالای صفحه بیندازید.

33- حالا نوشته ها و آیکون های خود را در پایین صفحه بچینید و به آنها رنگ و سایز دلخواهتان را بدهید.

34- در نهایت لایه ها و افکت ها و تصاویر خود را با ساخت پوشه در داخل آنها ساماندهی کنید.

خوب این بود آموزش امروز ما در مورد طراحی قالب سایت در فتوشاپ که امیدوارم مورد پسند شما واقع شده باشد! اگر تقاضا و پیشنهاد برای آموزش های دیگر زیاد شود مطمئنا آموزش هایی از این دست را بیشتر خواهم کرد!

البته من خودم هم بر اساس این آموزش یک قالب شبیه به همین تم طراحی کرده ام که در زیر شاهد آن هستید و می توانید PSD و PDF آن را دانلود کنید.

طرح نهایی دستپخت خودم

.:. آموزش قدم به قدم طراحی گرافیکی وب سایت .:.

بنام خدا
امیدوارم حال شما خوب باشه، در این مقاله که متوسط به چندین قسمت تقسیم میشود به نحوه طراحی گرافیکی یک وب سایت خواهیم پرداخت و اگر استقبال فراوان از آن شد نحوه تبدیل استاندارد یک قالب psd به یک قالب html را به شما آموزش خواهیم داد.

قبل از هر چیزی دو معقوله وبلاگ و وب سایت رو با هم مقایسه کنیم که دوستانی که تا به امروز در مورد این دو فناوری اطلاعاتی نداشته اند انشالله بتوانند از این مطالب استفاده کنند.

وبلاگ :
به محیطی در فضای مجازی گفته میشود که شما را قادر خواهد ساخت مطالب و دست نوشته ها یا کلاً دیتاهایتان را بر روی آن قرار بدهید یا برای دیگران به اشتراک بگذارید البته با محوریت های محدود.
امروزه در کشور ما سایت های زیادی اقدام به عرضه اینگونه خدمات کرده اند و روز به روز به تعداد آن افزوده میشود و از قدرتمندترین سایت های موجود میتوان به سایتهای :
پرشین بلاگ
بلاگفا
میهن بلاگ
و ....

اشاره کرد که با عضویت در اینگونه سایتها شما یک آدرس مانند :
Username.persianblog.ir
Username.blogfa.com
Username.mihanblog.com

خواهید داشت که به اصطلاح وبلاگ شما نامیده میشود.

وب سایت :
در دید اول وب سایت و وبلاگ نقاط مشترک بسیاری با هم دارند، ولی به معنی واقعی وب سایت محدودیتی برای فرد ندارد و تمامی امکانات بالا را میتوان در خود داشته باشد + یک نام اختصاصی برای خود.
در اینجا فضا و دامنه در اختیار خودتان است که میتوانید با توجه به سیاست های شغلی یا کاری با آن هر عملی انجام دهید، هر cms یا نرم افزاری روی آن نصب و از آن استفاده کنید.

توجه :
مطالب بالا که تا حد بسیاری به این انجمن مربوط نمی شد را عرض کردم که در نحوه طراحی کردن قالب یک وبلاگ با وب سایت چه محدودیت و فرق هایی وجود دارد. در این مقاله نیت اصلی ما بر این است که شما را با طراحی گرافیکی و عناصر اصلی یک وب سایت یا وبلاگ آشنا کنیم، کما اینکه سوالات و درخواستها در این زمینه زیاد مطرح شده است.

در قدم اول قسمت های اصلی یک وب سایت را با هم مرور خواهیم کرد. دقت کنید در طراحی گرافیکی یک وب سایت هیچ محدودیتی وجود ندارد به این معنی که میتوان از هر ایده و خلاقیتی بهره برد تا طرح شما به زیباترین شکل ممکن خلق شود. پس لزوماً این شکل و شمایلی که من عرض میکنم رو به خاطر نسپارید و به دنبال ایده های نو و جدید باشید، من فقط استارت کار را برای شما میزنم.

اهمیت رنگ در طراحی وب :
تاثیرات رنگها از دیدگاههای مختلف
1- روان‌شناسی رنگ سیاه
• سیاه تمام نورها در طیف رنگ‌ها را جذب می‌کند.
• سیاه معمولاً به عنوان نماد ترس یا شیطان مورد استفاده قرار می‌گیرد امّا به عنوان نشانگر قدرت نیز شناخته می‌شود. از رنگ سیاه برای نشان دادن شخصیت‌های خطرناک مثل دراکولا و یا جادوگران استفاده می‌شود.
• رنگ سیاه در بسیاری از فرهنگ‌ها برای مراسم سوگواری مورد استفاده قرار می‌گیرد. این رنگ همچنین نشانگر غمگینی، جذابیت جنسی و رسمی بودن است.
• در مصر قدیم، رنگ سیاه نشانگر زندگی و تولّد دوباره بود.
• رنگ سیاه معمولاً به دلیل لاغر نشان دادن در نمایش‌های مد مورد استفاده قرار می‌گیرد.

2- روان‌شناسی رنگ سفید
• رنگ سفید، نماد معصومیت و پاکی است.
• رنگ سفید می‌تواند در انسان احساس فضای بیشتر به وجود آورد.
• رنگ سفید معمولاً نشانگر سرما، پاکیزگی و آرامش است. اتاقی که کاملاً به رنگ سفید نقاشی شده باشد ممکن است جادار و بزرگ به نظر آید امَا خالی و سرد است. بیمارستان‌ها و کادر پزشکی از رنگ سفید برای ایجاد حس پاکیزگی استفاده می‌کنند.

3- روان‌شناسی رنگ قرمز
• رنگ قرمز، رنگ گرمی است که برانگیزاننده هیجانات قوی است.
• رنگ قرمز، نشانگر عشق، حرارت و صمیمیت است.
• رنگ قرمز، به وجود آورنده احساس شور و هیجان است.
• رنگ قرمز، تحریک کننده احساس خشم و عصبانیت است.

4- روان‌شناسی رنگ آبی
• آبی، رنگ مورد علاقه بسیاری از مردم و محبوبترین رنگ در بین مردان است.
• رنگ آبی، احساس آرامش را به ذهن می‌آورد و معمولاً نشانگر صلح، امنیت و نظم است.
• رنگ آبی، می‌تواند احساس غم، درون‌گرایی یا گوشه‌گیری را در بعضی افراد به وجود آورد.
• رنگ آبی معمولاً برای دکور دفاتر مورد استفاده قرار می‌گیرد زیرا تحقیقات نشان داده است که افراد در اتاق‌های آبی کارآیی بیشتری دارند.
• رنگ آبی با وجودی که از محبوبترین رنگ‌هاست امّا یکی از رنگ‌هایی است که کمترین اشتها را بر می‌انگیزد. در برخی از برنامه‌های کاهش وزن توصیه می‌شود که غذای خود را در بشقاب‌های آبی بکشید. رنگ آبی به ندرت به صورت طبیعی درخوراکی‌ها وجود دارد. همچنین رنگ آبی غذا معمولاً به عنوان نشانه فاسد بودن و یا سمّی بودن آن در نظر گرفته می‌شود.
• رنگ آبی می‌تواند باعث کاهش ضربان قلب و حرارت بدن گردد.

5- روان‌شناسی رنگ سبز
• رنگ سبز، رنگ سردی است که نماد طبیعت است.
• رنگ سبز، نشانگر آرامش، خوشبختی، سلامتی و حسادت است.
• پژوهشگران دریافته‌اند که رنگ سبز می‌تواند باعث افزایش قابلیت خواندن گردد. برخی از دانش‌آموزان و دانشجویان با قراردادن یک برگه شفاف سبز رنگ بر روی صفحه کتاب، می‌توانند مطالب را با سرعت بیشتری از حدّ معمول بخوانند و درک کنند.
• رنگ سبز، از دیر باز نماد باروری بوده و در قرن پانزدهم برای لباس عروسی به کار می‌رفته است.
• از رنگ سبز در دکوراسیون به دلیل اثر آرام بخشی آن استفاده می‌شود.
• رنگ سبز باعث کاهش استرس می‌شود. کسانی که در فضای کاری سبز رنگ کار می‌کنند، کمتر دچار دردهای دستگاه گوارش می‌شوند.

6- روان‌شناسی رنگ زرد
• رنگ زرد، رنگی گ

آموزش قالب سایت

آموزش طراحی قالب سایت در فتوشاپ از ابتدا

نویسنده: سامان | تاریخ ارسال: ۱۳۹۰/۰۸/۰۹

مطالب مشابه :

Blue - Blogfa

آموزش قالب سایت

کشف شیئی شبیه به یک بشقاب پرنده

انواع قالب برای بلاگفا . رز بلاگ و بلاگ اسکین و...........

بلاگفا محل زندگی مجازی ما

چهره باور نکردنی فوتبالیست مشهور بعد از عمل جراحی زیبایی +تصاویر

تصاویر عبور تاریخی سیاره زهره از برابر خورشید

آموزش وبلاگ نویسی