نمایش نتایج 1 تا 9 از 9

نام تاپیک: آموزش طراحی سایت

  1. #1
    کاربر دائمی آواتار arta.nasiri
    تاریخ عضویت
    آذر 1386
    محل زندگی
    Tehran
    پست
    782

    آموزش طراحی سایت

    با سلام

    این آموزش رو برای مبتدیان عزیز میزارم تا به کمک این آموزش بتونن برای خودشون یه سایت طراحی کنن ( البته فقط مربوط به ظاهر سایت میشه )

    در ضمن اگه از این آموزش خوشتون اومد بگین تا آموزشهای دیگه در این رابطه بزارم

    و یه عذر خواهی در مورد اندازه تصاویر که بزرگ هستند
    فصل اول

    برای یادگیری بیشتر و بهتر این آموزش باید حداقل با html و css آشنا باشین.

    ابتدا یه پروژه جدید ایجاد می کنم در ابعاد سایتمون (800x600 یا 1024x768 و .... هر اندازه ای که دلتون می خواد )

    من اندازه 1000 در 650 رو انتخاب کردم (البته عرض خیلی مهم نیستش، چون ممکنه مطالب زیاد بشه و عرضتون هم بیشتر بشه...

    چندان تاثیری تو این روشی که در پیش داریم نداره...
    (دقت کنید که ریزولیشن 72 باشه )

    یه رنگ پیش فرض انتخاب کنید برای کل سایت
    من رنگ e3e3e3# رو انتخاب کردم.

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

    اندازه لوگوی سایت رو در نظر بگیرید. برای نمونه من اندازه 1000 در 150 رو انتخاب می کنم.
    بنابراین می رین به منوی view > new guide... و گزینه Horizontal رو انتخاب کرده و عدد 150px رو وارد می کنید.



    ( می شه با دست هم یه خط کمکی کشید، ولی از اونجایی که ما می خوایم کارمون دقیق باشه، از این روش استفاده می کنیم)
    بعدی منوی سمت راست و چپ. هرکدوم با عرض طول 180 و عرض صد در صد (می تونید یه اندازه ابتدایی بدید مثلا 100 پیکسل)
    از همون روش قبلی خطوط کمکی رو رسم می کنیم. view > new guide...



    فاصله بین تمامی پنجره های ما 10 پیکسل هستند
    پس فاصله رو هم جدا می کنیم از تیبل ها...
    اندازه های ما به این صورت در میاد:



    بخش های کاری ما هم این جوریه:




    فصل دوم

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

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

    من یه کار آماده داشتم که از اون استفاده کردم (چون حوصله طراحی لوگو ندارم)

    می رسیم به طراحی منوی بالای سایت:

    رنگ پس زمینه رو 8f8f8f انتخاب می کنم و برای این که کمی برجسته و شیشه ای به نظر بیاد، از یه لایه شفاف رنگ سفید در بخشی از کار استفاده می کنم به این صورت :



    چطوری :
    برای سلکت کردن لایه، کافیه کنترل رو نگه دارین و روی thumbnails لایه مورد نظرتون یه کلیک بکنید تا فقط اون بخش مورد نیازتون انتخاب بشه، دقیقاًکنترل رو نگه دارین و اینجا کلیک کنید:



    بعد که کلیک کردین با ابزار M و نگه داشتن Alt اون بخشی رو که نمی خواین (یعنی نصف منو ) رو Deselect می کنید.
    بعد یه لایه جدید ایجاد می کنید.
    و در لایه جدید، بخش سلکت شده رو پر از رنگ می کنید (به ترتیب این دکمه ها رو بزنید : d و x و Ctrl+Delete )

    بعد برای اینکه حالت شیشه ای پیدا کنه، Opacity لایه رو به بیست درصد یا سی درصد تغییر می دید ( که این کار رو هم می تونید با زدن کلید های 2 یا 3 انجام بدید ) البته باید دقت کنید که ابزار v فعال باشه.

    حاصل کل کار می شه همچین چیزی:



    می رسیم به Divider :
    حالا این که گفتم یعنی چی؟
    راستش خودمم نمی دونم ، برای بالا رفتن کلاس کار هم شده بد نیست چن تا واژه فرنگی پیوست کنم تو کار

    منظورم از Divider یه خط عمودی هستش که توی منوی بالای تارنما، کارش جدا کردن بخش ها از همدیگه ست.
    به عبارتی منظورم اینه:



    یه خط می کشیم ( با ابزار u و line ) با ضخامت 1 پیکسل به اندازه عرض منو عمود بر منو روی منو:
    تنظیمات زیر رو انجام بدین:

    رنگ : به رنگ پس زمینه منو
    و :



    البته بعد از انجام این کارا می بینین که کمی divider مون به خاطر فرورفتگی، بزرگتر از منو شده که با یه Tranform ساده می تونید کاملا اندازه منو بکنیدش.

    ( این رو هم بگم که می تونید کلا این کار رو انجام ندید و منو ها رو با یه کاراکتر " | " از هم جدا کنید و منو هاتون هم تکست باشه و با CSS روشون کار کنید. ولی این روش پایه هست برای انجام کارهای دیگه، مثل همین منوی مجید آنلاین خودمون )

    نمای کلی کار می شه مثل این :




    فصل سوم

    حالا می رسیم به بخش منو های کاربری یا منوهای دیگه ای که سمت راست و چپ تارنمای های گونانگون نمایش داده می شه.
    این گونه پنجره ها، یه هدر (تیتر) دارن که نام پنجره رو می نویسن درش.
    و یه سلول هم دارن که مطالب در اون قرار می گیرن.

    می تونید هدر رو به یک رنگ و سلول مطالب رو به رنگ دیگه ای در بیارین و دور هر کدوم یه خط بندازین (border =1)
    این ساده ترین راهه

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

    راه های دیگه ای هم هست، مثلا علاوه بر اینها که گفتم، کل پنجره رو سایه بدین، یا برجسته اش کنید و .........

    از اونجایی هم که بنده یه آدم کاملاً تنبل هستم، همه راه ها رو انتخاب می کنم

    ابتدا با خطوط راهنما 30 پیکسل از بالای پنجره (هدر) جدا می کنیم و 20 پیکسل از پایین پنجره ( منوی view گزینه New Guide ). به این صورت :



    به کل پنجره یه stroke یه پیکسلی به رنگ سیاه می دیم( یا هر رنگی که دلتون می خواد)
    بعد بخش هدر رو سلکت می کنیم ( یعنی این قسمت رو ):



    پس از سلکت، یه لایه جدید ایجاد می کنید و در منطقه سلکت شده، یه شیب رنگ می ریزید ( از 8f8f8f به d8d8d8 )
    همین بلا رو سر بخش زیری پنجره هم می یاریم ( یعنی این بخش ):


    شکل کار به این حالت در می یاد :



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



    و برای اینکه خیلی خشک و خالی نباشه ( و احتمالاً این حالتی رو که می خوام بگم تو بسیاری از تارنما ها دیدید و الان شاید تو کف باشین که چه جوری می شه همچین چیزی ساخت ) یه لایه دید ایجاد می کنیم و 30 پیکسل از بخش بالایی بخش مطالب رو سلکت می کنیم ( یعنی این بخش ):



    بعد یه شیب رنگی می دیم ( از c8c8c8 به رنگ خود بخش مطالب که مال من cccccc هستش)
    می شه اینجوری :


    نمای کل کار می شه این :



    و این کوچولو رو که ساختیم، تو سایر تیبل ها هم جایگزین می کنیم.
    نمای سرتاسری پوسته مون (با یه کم بازی با رنگ ها Ctrl + u) می شه این:



    فصل چهارم

    می خوایم جوری طراحی کنیم که زمانی که موس روشون می ره رنگ پس زمینه عوض بشه

    حرفه ای ها م یدونن که برای استفاده از این تکنیک باید از خاصیت موس آور (Mouse Over) استفاده کنیم. خوب حالا چی هست این موس آور؟؟؟

    الان برای منوی ها، ما عکس داریم درسته؟
    خوب کاری که باید بکنیم اینه که به مرورگر کاربر بفهمونیم که وقتی موس طرف (کاربر) تشریف آورد روی منوی ما، این عکسی رو که داریم، جاش رو با یه عکس دیگه عوض کن

    و وقتی موسش از روی منو رفت کنار، عکس قبلیه رو برگردون
    (البته برای استفاده استاندارد باید از سی اس اس ها استفاده کنید CSS)

    ما کاری به استایل شیت ها (CSS) نداریم فعلا. فقط و فقط طراحی

    خوب چی کار باید بکنیم؟
    الان عرض می کنم خدمتتون

    این منوی ماست :


    ابتدا محل منو ها رو با یه ابزاری ( هر چی دوست دارین ) select می کنیم.
    مثل شکل دو:


    بعد لایه نوار منو رو انتخاب می کنید و یه Ctrl + J می زنید
    با این کار، منطقه سلکت شده از منو، در یک لایه جدید کپی می شه.

    حالا Ctrl + U می زنید و با رنگ ها بازی می کنید، هر رنگی رو که می خواین اعمال کنید...

    منوهای من این شکلی شدن:


    یه مشکل دیگه؟؟؟!!!!!

    دیدین وقتی تو یه صفحه هستین، منوی مربوط به اون صفحه با بقیه فرق داره؟؟
    یعنی منوی سلکت شده، با منو های دیگه و منویی که موس روشه، تفاوت داره.

    آفرین که دیدین، خوب حالا اگه فهمیده باشین منظورم چیه، می گین این که نشد مشکل!!!
    خوب حق کاملا با شماست. چون این اصلا چیز سختی نیست.

    دوباره همین کار رو با یه رنگ دیگه انجام می دین :
    اول Ctrl + J بعش Ctrl + U به همین راحتی:



    خوب، تا حالا که خوب پیش رفتیم

    لایه های جدید رو خاموش می کنیم تا برق زیاد مصرف نشه ( بعدا می فهمین که چی کی کار باید بکنیم )

    ================================================== =====================

    حتما همیشه با خودتون می گفتین که مسئولین شرکت ادوبی، معصوم که نیستن، پس چرت و پرت هم می گن بعضی وقت ها...
    مثلا این ابزار Slice Tools با میانبر K به چه دردی می خوره؟؟؟؟ خیلی چیز بی خودیه.... و شاید چن تا فحش هم داده باشین بهشون.

    خوب حق دارین
    من هم هیچ وقت نفهمیدم چرا اینو گذاشتن

    خوب شوخی بسه ( از اون معلم باحال ها هستم که نمی خوام کلاسم خشک باشه ها.....)

    خوب این ابزار خیلی کمکمون خواهد کرد.
    شروع به کار با این ابزار می کنیم.

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

    اون خطوط کمکی که ترسیم کردیم که یادتون؟؟؟
    ازشون کمک می گیریم و خطوط کمکی جدیدی هم ترسیم می کنیم. به این صورت در میاد:



    بعداً می فهمین چرا به این صورت خطوط کمکی ترسیم کردیم.

    شروع می کنیم به اسلایس بندی ( قطعه قطعه کردن )
    اسلایس های (Slice) ما به این صورت خواهند بود :


    تعداد اسلایس های ما شد 57 بخش.

    می دونم که خیلی سوال دارین:
    1- اینکه چرا این قدر ریز ریز و هر گوشه رو هم اسلایس کردم؟
    لزوم این کار چی بود؟
    2- به چه دردی می خورن؟
    3- آیا از همش استفاده خواهیم کرد؟ ( اینو جوابش رو الان می دم: نه، خیلی از کارهایی که کردیم، لازم هستن، اما در کار استفاده نمی شن، به زودی می فهمین چرا)

    و ...................

    به رنگ اسلایس ها دقت کنید:


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

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

    پس فرقی نداره از چپ شروع کنید یا راست.


    استفاده از slice بندي فقط به خاط صرفه جويي در وقت مخاطبان وب سايت هست . اين كار باعث ميشه تا عكس هايي كه قابليت تكرار دارند كوچكتر بشوند و تكرار بشندتا حجم سايت رو زياد نكنند.


  2. #2

    نقل قول: آموزش طراحی سایت

    با سلام من یه تازه کارم و از مطالبی که گفته بودید نهایت استفاده رو بردم می خواستم ازتون خواهش کنم آموزش های دیگه در این زمینه بنویسید . یه سوال هم داشتم اینکه اگر کسی بخواد با asp.net کارکنه نیاز به یادگیری دریم ویور یا فتوشاپ داره یا نه ؟
    ممنونم

  3. #3

    نقل قول: آموزش طراحی سایت

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

  4. #4
    کاربر جدید
    تاریخ عضویت
    اردیبهشت 1388
    محل زندگی
    مشهد
    پست
    23

    نقل قول: آموزش طراحی سایت

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

  5. #5

    نقل قول: آموزش طراحی سایت

    نقل قول نوشته شده توسط diditoon مشاهده تاپیک
    با سلام من یه تازه کارم و از مطالبی که گفته بودید نهایت استفاده رو بردم می خواستم ازتون خواهش کنم آموزش های دیگه در این زمینه بنویسید . یه سوال هم داشتم اینکه اگر کسی بخواد با asp.net کارکنه نیاز به یادگیری دریم ویور یا فتوشاپ داره یا نه ؟
    ممنونم
    درسته که مخاطب این پست من نیستم و به همین علت از دوست عزیزی که این آموزش رو گذاشتن عذرخواهی میکنم...
    برای طراحی یک سایت چند گروه آدم درگیر هستن که در یک نگاه کلی میشه اینطور بیان کرد:
    - یک تحلیلگر که نیازمندی های سایت رو تحلیل کرده و مکتوب می کنه.
    - برنامه نویس
    - طراح گرافیک سایت
    کار هرکدام هم معلومه و هر کدام باید تخصص خاص داشته باشند و از ابزارهای خاصی استفاده کنند. در مورد تحلیلگر صحبت نمی کنم چون توضیحش مفصل است.
    از اونجایی که در ایران ماشاا... همه همه کاره هستیم! این 3 نفر معمولا یک نفره! پس اگه شما هم قراره اینطور باشید ابزارهای dreamweaver و photoshop رو یاد بگیرید.

    موفق باشید.

  6. #6

    نقل قول: آموزش طراحی سایت

    نقل قول نوشته شده توسط fiendish66 مشاهده تاپیک
    دستت درد نکنه خیلی آموزش جالبی بود.
    فقط چه طوری به html تبدیل کنیم ممنون میشم توضیح بدین.
    در ادامه همون عذرخواهی باید عرض کنم که در خود photoshop ابزاری هست به نام Slice که برای تکه کردن یا slice کردن استفاده می شه که دوست عزیزمون توضیح دادن در آموزش. اما بعد از اینکه تکه تکه کردید طرح رو روی قسمت هایی که می خواهید لینک بشه اینطور عمل می کنید که در حالی که ابزار Slice رو انتخاب کردید کلید K و Shift رو می زنید تا ابزار هم گروه اون انتخاب بشه. بعد روی این قسمت ها دابل کلیک کنید تا پنجره ای باز بشه و داخل اون آدرسی که میخواید لینک به اون بره رو وارد کنید. بعد از انجام این کارها از منوی File گزینه Save for Web رو انتخاب می کنید . فرمت تصویر ها رو انتخاب می کنید که gif، jpg یا png باشه و بعد Save رو می زنید.
    با این کار ps براتون یک پوشه می سازه که عکس رو داخل اون قرار میده و یک فایل html که حاوی کدها است.

    البته این روش خوبی برای html کردن نیست چون تمام طرح تصویر هست و حجم بالایی تولید می شه. بهتر هست که CSS یاد بگیرید تا تنها قسمت هایی رو که اجتناب ناپذیر هست به صورت تصویر بگذارید و بقیه رو با CSS پیاده سازی کنید.
    می دونم که طولانی شد. امیدوارم خسته نشده باشید!

  7. #7

    نقل قول: آموزش طراحی سایت

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

    body
    {
    background-image:url('yourimage');
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

  8. #8

    نقل قول: آموزش طراحی سایت

    سلام
    من می خواستم یه سایت شبیه pixels.ir طراحی کنم.
    مشکلم تو قسمت اصلیشه، یعنی اونجا که موس میره رو تبلیغ و عکس اصلی ظاهر میشه. من اینو بلد نیستم.
    کمکم کنید.

  9. #9
    کاربر جدید
    تاریخ عضویت
    فروردین 1389
    محل زندگی
    گلستان
    سن
    33
    پست
    3

    نقل قول: آموزش طراحی سایت

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

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •