نمايش نتايج 1 تا 6 از 6

تاپیک: ساخت وب سایت با فتوشاپ

  1. #1
    عضو فعال آواتار F@tima s332
    رشته
    مهندسی فناوری اطلاعات
    مقطع
    لیسانس
    تاريخ عضويت
    2011/12
    محل سكونت
    among these dicentras , beside that tall pine
    امتیاز
    8547
    پست ها
    5,184

    پيش فرض ساخت وب سایت با فتوشاپ


    ساخت وب سایت با فتوشاپ

    ● قدم اول:

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

    در این آموزش فرض بر این است که شما تا حدودی به فتوشاپ آشنایی داشته با لایه ها و ماسک آشنایی دارید.

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

    ● قدم دوم:


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

    برنامه مورد علاقه من در طراحی ها برنامه color picker و برنامه colourlovers می باشد. شما همچنین می توانید از پالت swatches فتوشاپ بهره جویید. شما می توانید رنگهای مورد علاقه خود را

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

    ● قدم سوم:


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

    باشند چرا که هنوز بسیاری از کاربران از رزولوشن ۸۰۰ در ۶۰۰ استفاده میکنند. این فایل با عرض ۸۰۰ پیکسلی را ما به عنوان یک پس زمینه برای صفحه وب خود قرار می دهیم.

    ● قدم چهارم:


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

    این خطوط را ترسیم میکنیم.)

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

    برای ایجاد خطوط راهنمای جدید که از این پس آنها را guide می نامیم به گزینه View > New Guide می روید.در این منو شما قادر خواهید بود که guide های افقی یا عمودی داشته باشید و مقدار آن

    را نیز از لحاظ کلفتی مشخص کنید. شما باید guide های افقی در مقادیر ۱۵, ۲۵, ۱۷۵, ۱۸۵, ۲۱۵, ۲۲۵, ۷۰۰, ۷۱۰, ۷۷۵, ۷۸۵ و guide های عمودی در ۱۵, ۲۵, ۲۷۵, ۷۷۵, ۷۸۵ ایجاد کنید. مطمئن

    شوید View > Snap و View > Snap To > Guides چک مارک خورده باشند. وقتی شما کار را تمام کرده باشید شکلی شبیه به شکل زیر خواهید داشت.

    ● قدم پنجم :


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

    باید یک لایه جدید تشکیل دهید و با هر رنگی که مایل بودید آن را پر کنید . این مهم نیست از چه رنگی استفاده میکنید.(من از این رنگ استفاده کردم ۰۰۰۰FF) چون ما بعدا آن را به گرادیانت تغیر

    میدهیم.

    ● قدم ششم:


    حالا وقت آن است که کانتینر را شروع کنیم. کانتینر لایه ای است که همه محتوای صفحه وب ما در آن قرار خواهد گرفت. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد (Rounded Rectangle Tool
    )را انتخاب کنید. ( با shortcut U ) مقدار شعاع را از منوی بالا هر مقدار که مایلید می توانید اختیار کنید. هر چه عدد بالاتر باشد قوس بیشتری خواهید داشت من Radius را برابر ۱۵ انتخاب میکنم. هر

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

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

    خطوط راهنما خواهد چسبید (snap) می توانید از بافتها و *****های مختلفی روی کار استفاده کنید تا شکل جالبتری داشته باشید. این آموزش به نحوه ساختن این *****ها نخواهد پرداخت.( من از

    ***** rough Pastels استفاده کردم با کمی افکت)

    ● قدم هفتم:


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

    کشیم و افکت inner shadow با مقدار Distance صفر و opicity پایین را به آن میدهیم فعلا چون رنگ آن مشکی است این تغییرات شاید دیده نشود. ولی فعلا مهم نیست. رنگ بعدا تغییر میکند.باید

    شکلی شبیه به زیر داشته باشید

    ● مرحله هشتم:


    حالا از این لایه یک کپی تهیه کنید. سپس با گرفتن کلید Alt و کلیک بین دو لایه ( لایه اصلی و لایه کپی شده )‌ یک clipping mask اضافه کنید. سپس آن را رنگ کنید . من یک رنگ آبی تیره انتخاب

    کردم و سپس افکت گرادیانت به آن دادم همانطور که در لایه بکرگراند همچنین کاری را انجام دادید. نتیجه کار چیزی شبیه به شکل زیر باید ساخته باشید:

    ● قدم نهم:


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

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

    قبل بگذارید و آن را به لایه قبلی clip کنید. (گرفتن alt و کلیک بین دو لایه)

    بهتره اینجا کار این clip masking رو هم توضیح بدم. اگر لایه بالایی شما بزرگتر از لایه زیری باشه لایه جدید در اندازه لایه زیری محدود میشه. برای اینکه بهتر درک کنید یه لایه که عرضش از header

    شما بزرگتره انتخاب کنید و سپس اونو clip کنید تا منظورمه کامل بفهمین.

    باید حالا چیزی شبیه به شکل زیر داشته باشید:

    ● قدم دهم:


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

    سوالی بود در قسمت یادداشتها بپرسید)

    ● قدم یازدهم:


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

    می توانید برای منوها هم استفاده کنید.( ابتدا روی لایه کلیک راست کنید گزینه copy style را انتخاب و سپس روی لایه جدید گزینه paste style را انتخاب کنید)

    حالا منوهایی را که می خواهید در سایت داشته باشید را تایپ کنید از هر فونتی که مایل باشید می توانید استفاده کنید.

    ● قدم دوازدهم:


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

    سایت که به رنگ مشکی خواهند بود قابل خواندن باشند. بهتر خواهد بود که از افکت inner & drop shadow هم استفاده کنید.

    خدا !امشب دستمو نگير فقط
    دستتو بذار روي
    روحمو بکش سمت ِ خودت....

    ............منُ به حالِ من رهـــا نکن

    حلالم کنید : )

  2. تشكرها از اين پست


  3. #2
    تازه وارد
    رشته
    مهندسی فناوری اطلاعات
    تاريخ عضويت
    2012/9
    امتیاز
    10
    پست ها
    2

    Cool

    مرسی فاطیما جان

  4. #3
    تازه وارد
    رشته
    مهندسی فناوری اطلاعات
    تاريخ عضويت
    2013/11
    امتیاز
    10
    پست ها
    1

    پيش فرض

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

  5. #4
    عضو فعال آواتار redhood
    رشته
    مهندسی فناوری اطلاعات
    مقطع
    دانشجوی لیسانس
    تاريخ عضويت
    2013/11
    محل سكونت
    On the dark side of the Sun
    امتیاز
    122
    پست ها
    101

    پيش فرض

    به نظر من سایت درست کردن با فتوشاپ اشتباهِ
    اصلا فتوشاپ کجا و سایت کجا!
    !There's no fate, but what we make
    هیچ سرنوشتی وجود ندارد، جز آنچه خودمان میسازیم!

  6. تشكرها از اين پست


  7. #5
    عضو
    رشته
    مهندسی مکانیک
    مقطع
    لیسانس
    تاريخ عضويت
    2011/10
    محل سكونت
    تهران
    امتیاز
    12
    پست ها
    93

    پيش فرض متشکریم

    متشکریم

  8. #6
    تازه وارد
    رشته
    مهندسی فناوری اطلاعات
    تاريخ عضويت
    2017/7
    امتیاز
    11
    پست ها
    26

    پيش فرض

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

    سپاس
    [مشاهده ی لینک ها فقط برای اعضا امکان پذیر است. ] - [مشاهده ی لینک ها فقط برای اعضا امکان پذیر است. ] - [مشاهده ی لینک ها فقط برای اعضا امکان پذیر است. ] - [مشاهده ی لینک ها فقط برای اعضا امکان پذیر است. ] - [مشاهده ی لینک ها فقط برای اعضا امکان پذیر است. ] - [مشاهده ی لینک ها فقط برای اعضا امکان پذیر است. ]

تاپیک های مشابه

  1. درخواست کتاب آموزش ساخت وب سایت شخصی
    توسط atefe. در تالار درخواست و معرفی کتاب
    پاسخ ها: 0
    آخرین ارسال: 2011/5/03, 11:46 AM
  2. ساخت وب سایت
    توسط پیرجو در تالار درخواست و معرفی کتاب
    پاسخ ها: 3
    آخرین ارسال: 2010/12/19, 07:07 PM
  3. آموزش ساخت آسمان رویایی در فتوشاپ
    توسط palet در تالار Photo Shop & Photography
    پاسخ ها: 0
    آخرین ارسال: 2010/8/31, 03:07 AM
  4. موتورهای جستجوگر قدرتمند ساخت موسسین سایت
    توسط پیرجو در تالار گفتگوی آزاد
    پاسخ ها: 15
    آخرین ارسال: 2010/8/21, 10:35 AM

ثبت اين صفحه

ثبت اين صفحه

قوانين ارسال

  • شما نمی‌توانيد تاپيک جديد ارسال كنيد
  • شما نمی‌توانيد پاسخ ارسال كنيد
  • شما نمی‌توانید فایل ضمیمه ارسال كنيد
  • شما نمی‌توانيدنوشته‌های خود را ويرايش كنيد
  •