تبدیل قالب psd به قالب html5

شروع موضوع توسط websaz2012 ‏17 مارس 2013 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

  1. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    با سلام دوستان
    خیلی از دوستان هنوز نمی دونند که یک فایل psd را چگونه به فایل html تبدیل کنند
    راه های زیادی وجود داره همچنین نرم افزارهای زیادی مانند Adobe Fireworks و ....
    اما من میخوام اصولیترین راه را به شما معرفی کنم که کاملا بصورت دستی و استفاده از برنامه های فتوشاپ و دریمویور است
    و همچنین یه سری ترفندها برای راحتی کار با هم مرور میکنیم

    و انوقت شما میفهمید که اصولیترین راه برای این کار چیست؟

    اصول کار ما این است که من یک فایل psd به شما میدم و با هم شروع به تبدیل ان به html میکنیم

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

    پس فعلا

    بزودی .............................................!



    نظر یادتون نره!!
     
    نوشته شده توسط websaz2012 در ‏17 مارس 2013
    babilo، mostafa8، mahdikalhor و 12 نفر دیگر از این ارسال تشکر کرده اند.
  2. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    سلام واقعا ایده جالبیه من خودم هنوز نمیدونم که چه جوری میشه یک psd رو به html تبدیل کرد

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

    سپاس
     
    نوشته شده توسط ghasemrayaneh در ‏17 مارس 2013
    mostafa8 و Violet89 از این پست تشکر کرده اند.
  3. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    من یه فایل psd استاندارد و روون پیدا کردم به نظرم خیلی خوب اومد
    و فک کنم انتخاب خوبیه در ضمن باید بگم تو این اموزش ما به جاوا اسکریپت و اجاکس و غیره نمیپردازیم هدف ما فقط html,css,psd است
    در زیر این فایل را دانلود کنید و با من همراه شوید


    دانلود
     
    نوشته شده توسط websaz2012 در ‏17 مارس 2013
    babilo، key12، Violet89 و 2 نفر دیگر از این ارسال تشکر کرده اند.
  4. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    نرم افزار مورد نیاز هم دریم ویور هست درسته ؟
     
    نوشته شده توسط ghasemrayaneh در ‏17 مارس 2013
  5. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    بله نرم افزارهای مورد نیاز این اموزش Adobe Photoshop & Adobe Dreamweaver است که پیشنهاد من نسخه های CS6 ME است که جدیدترین ورژن و دارای قابلیت تایپ مستقیم فارسی میباشد!
     
    نوشته شده توسط websaz2012 در ‏18 مارس 2013
  6. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    خوب بریم سر اصل مطلب یعنی اموزشاول از همه فایل را دانلود کنید سپس اونو از حالت فشرده خاج کنید و فایل را دون فتوشاپ باز کنید.قبل از شروع باید من تمام مراحلو بصورت ساده برای شما باز گوکنم.مراحل تبدیل یک فایل psd به html به اینصورت است
    1.طرحی فایل psd
    ما سایتمونو درون فتوشاپ طراحی میکنیم
    2.ذخیره سازی تصاویر ازفایل psdخود برای وب
    بعد ازاتمام طراحی ما تصاویرمونو از فایل psd که طراحی کردیم به صورت تصاویر بهینه شده برای وب ذخیره میکنیم
    3.شبیه سازی سایت با استفاده از تصاویر ذخیره شده , شبیه به چیزی که درون فتوشاپ طراحی کردیم

    اگه درک این مراحل برای شما کمی دشواراست پس بزارین من با مثال برای شما توضیح بدم.
    همه شما حتما تا حال پازل بازی کردین یک پازل را تو ذهنتون مجسم کنید
    - یک پازل کامل و اماده که میشه همون فایل psd ما
    - حالا این پازلو بهم بریزین یعنی تکه های اونو از هم جدا کنید که این میشه ذخیره سازی تصاویر
    - حالا اون تکه ها رو دوباره کنار هم بچینید تا پازل کامل شود .این میشه همون طراحی html بر مبنای فایل psd

    این ساده ترین مثالی بود که به ذهنم رسید امیدوارم که فهمیده باشید.

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

    یعنی یه سری از قابلیتهای اونو فعال یا ویرایش کنیم

    اول میخواهیم Ruler را بر مبنای pixel تنظیم کنیم پس به مسیر
    Edit > Preferences > Units & Rulers
    رفته و جلوی قسمت Rulers را به Pixel تنظیم کنید
    سپس از منوی View گزینه Rulers را فعال کنید.
    حالا دوباره از منوی view به قسمت show رفته و گزینه های
    Guides & Smart Guides & Pixel Grid
    را انتخاب و فعال کنید.
    این تنظیمات لزومی ترین تنظیمات مورد نیاز ما بود.
     
    آخرین ویرایش: ‏18 مارس 2013
    نوشته شده توسط websaz2012 در ‏18 مارس 2013
    Saeed2vfx، echessdesign، sokoote_shabha و یک نفر دیگر از این ارسال تشکر کرده اند.
  7. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    تنظیمات اجرا شد .

    یک سوال قبل از ادامه کار : شما لایه هر بخش رو داخل گروپ کردید ، آیا این کار لازمه ؟ یا برای راحتی کاره
     
    نوشته شده توسط ghasemrayaneh در ‏18 مارس 2013
  8. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    بله سواله خوبیه اول باید بگم که ترتیب لایه ها خیلی مهمه یعنی لایه بالایی را نمیتوان به پایین لایه دیگر برد چون طرحمون بهم میخوره
    دوم اینکه دلیل گروپ کردن سرفا برای مرتب بون و سادگی کارمونه چون در اینده کمک زیادی به ما خواهد کرد اما استفاده از گروپ لزومی نداره اما من شخصا پیشنهاد میکنم که شما همیشه
    برای طرحاتون ازش استفاتده کنید.
     
    نوشته شده توسط websaz2012 در ‏18 مارس 2013
    Saeed2vfx، sokoote_shabha و ghasemrayaneh از این ارسال تشکر کرده اند.
  9. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    شروع کار:
    1.یک پوشه درون desktop رایانتون به نام my-tm بسازین.
    2.درون پوشه my-tm یک پوشه دیگر به نام images بسازین.
    3.فایلمونو داخل فتوشاپ باز کنید
    ما میخواهیم تصاویرمونو به قول معروف از فایلمون extract کنیم یعنی اونو واسه وبمون ذخیره کنیم

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

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

    ارتفاع منو ما 60px است و ما حالا چطوری میتونیم این زمینه را برای وبمون ذخیره کنیم؟
    به نظر شما کدوم راه منطقی تر است؟؟؟

    1.ما کل زمینه منو را ذخیره کنیم وسپس اونو تو وبمون پس زمینه منومون کنیم.
    2.ما فقط یک تصویر کوچک به عرض 1px از اون ذخیره کنیم سپس تو html اونو پس زمینه منومون کنیم و اونو تو محور x تکرار کنیم.

    بله همونطور که حدس زده بودین راه دوم بهترین انتخابه! چرا؟

    چون حجم تصویرمون خیلی پایین تر میاد در نتیجه سرعت لود وبمون بالاتر میشه

    حالا ما چه موقع از این ترفند باید استفاده کنیم؟
    1.برای تصاویری که رنگ ثابت دارند( البته بهتره به جای تصویر از رنگ تو css استفاده کنیم)
    2.برای تصاویر گرادیانتی اونو از نوع liner که از بالا از یک شروع میشود و به پایین به یک رنگ ختم میشود یا از چپ با راست یا برعکس( امروزه میتوان به جای تصویر از css3 gradient استفاده کنیم البته مرورگرهای قدیمی از ان پشتیبانی نمیکنند )

    **بیشتر بیاموزید**
    در مثال قبل گرادیانت در مرورگرهای قدیمی پیشتیبانی نمیشود اما در مرورگرهای جدید پشتیبانی میشود ما میتوانیم اینجوری سایتمونو طراحی کنیم که اگه مرورگری که پشتیبانی میکند سایتمونو باز بکنه اون قسمت را با css3 gradient نشون بده
    و اگه پشتیبانی نکنه اون تصویر را لود بکنه و به جاش نشون بده

    ** به چنین قابلیتهایی که قابلیت های جدید را برای مرورگرهای قدیمی شبیه سازی کنند اصولا fallback میگویند .مثل مثال قبل که تصویر بجای css3 gradien برای مرورگر قدیمی لود میشود.

    خوب بریم به ادامه کار ما یک تصویر به عرض 1px وبه ارتفای 60px را برای وبمون ذخیره میکنیم اینطوری

    ابزار مستطیل را انتخاب کرده و قسمتی از منو را به اندازه هایی که گفتم انتخاب کرده سپس از
    Edit > copy merged
    را انتخاب کنید و از
    file > new
    را انتخاب کنید

    همونطور که میبینید یک کادر ظاهر میشود که اندازه های عرض ان 1 و ارتفای ان 60 پیکسل است هیچ چیزی را دست نزنید و ok کنید
    یک سند جدید به عرض 1px و به ارتفاع 60px باز خواهد شد
    سپس از Edit > paste
    را انتخاب کنید.
    تصویرمون جا گذاری میشود
    حالا از
    file > save for web
    را انتخاب کنید.


    در کادر جدید ما چند گزینه خواهیم داشت تو قسمت فرمت شما فرمت jpeg را انتخاب سپس تصویر را درون پوشه images fi نام nav.jpg ذخیره کنید مرحله اول تمام شد

    **بیشتر بیاموزید***
    انتخاب نوع فرمت بسیار مهم است فرمتهای jpeg , png24,gif
    بیشترین کاربرد را در طراحی وب دارند

    jpg برای تصاویر ثابت به کار میرود و اصولا داری کیفیت مطلوبی است

    png24 برای تصاویری به کار میرود که بدون زمینه هستند یعنی transparent و همچنین میتونند حالت بلوری و شیشه ای داشته باشند

    Gif برای تصاویر متحرک به کار میروند مانند بسیاری از تصاویر loader که هنگام بازگشایی یک صفحه وب قبل از لود کامل به نمایش در می اید یا بسیاری از تبلیغات یا بنرهای متحرک

    ما بر اساس نیاز یکی از فرمتها رو انتخاب میکنیم****


    حالا شما چگو نگی ذخیره تصاویر را از فایل psd فرا گرفتید

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


    1.PNG




    2.gif




    3.gif

    4.gif

    5.gif
     
    نوشته شده توسط websaz2012 در ‏18 مارس 2013
    PedramKarimi، psd10، Saeed2vfx و 5 نفر دیگر از این ارسال تشکر کرده اند.
  10. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    ممنون خیلی آموزش قابل فهم و راحتی بود
     
    نوشته شده توسط ghasemrayaneh در ‏18 مارس 2013
  11. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    دوستان من به چند نتیجه مهم رسیدم
    1. فایلی ک من واسه این کار انتخاب کردم فایل خوبی نیست چون تصاویرش خیلی کمه
    2. من دیگه الکی وقتمو واسه تایپ کردن هدر ندم من یه سری ویدیو واسه هر درس براتون تهیه میکنم و شما بعد از هر درس و دیدن ویدیو ها میتونید سوالاتتونو بیان کنید

    بنظرم اینجوری بهتره نظر شما چیه؟
     
    نوشته شده توسط websaz2012 در ‏19 مارس 2013
    Mr.Saraei و jafar1374 از این پست تشکر کرده اند.
  12. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    .
     
    آخرین ویرایش: ‏21 مارس 2013
    نوشته شده توسط websaz2012 در ‏19 مارس 2013
    jafar1374 از این پست تشکر کرده است.
  13. ghasemrayaneh

    ghasemrayaneh Active Member

    ارسال‌ها:
    365
    تشکر شده:
    194
    امتیاز دستاورد:
    43
    اگر امکان داره طرحی رو برای آموزش قرار بدید که از هر لحاظ جامع باشه باز خودتون بهتر میدونید .

    ویدیو هم برای آموزش خوبه ، منتها اگر میشه حجمش کم باشه .

    از بین فایلها هم اولی یا آخری رو اگر میشه آموزش بدید .
     
    آخرین ویرایش: ‏19 مارس 2013
    نوشته شده توسط ghasemrayaneh در ‏19 مارس 2013
  14. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    بالاخره یه چیز عالی پیدا کردم مطمئنم که خوشتون میاد

    من که دیوونش شدم
    یه نگاه بندازین

    Untitled-1.jpg


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

    راستی عیدتون مبــــــــــــــــــــــــــــــــــــارکـــــــــــــــــــــــ!
     
    نوشته شده توسط websaz2012 در ‏22 مارس 2013
    ghasemrayaneh از این پست تشکر کرده است.
  15. sara 3d

    sara 3d Member

    ارسال‌ها:
    30
    تشکر شده:
    5
    امتیاز دستاورد:
    6
    دوست عزیز لطفا سریعتر
    مهم قالب نیست مهم آموزشه
     
    نوشته شده توسط sara 3d در ‏24 مارس 2013
  16. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    این فایل نهایی است اول دانلود کنید بعدش با من همراه شوید تا اونو تبدیل کنیم

    Theme-majidonline.rar -
     
    نوشته شده توسط websaz2012 در ‏1 آوریل 2013
    karezgraphic، mtshavandi و ghasemrayaneh از این ارسال تشکر کرده اند.
  17. mtshavandi

    mtshavandi Member

    ارسال‌ها:
    64
    تشکر شده:
    21
    امتیاز دستاورد:
    6
    سلام سال نو هم مبارک باشه
    آقا من واقعا تشکر می کنم از اینکه وقت میزاری ولی یه درخواستی دارم. اگه میتونی این آموزش رو سریع انجام بده چون معمولا پست های آموزشی این انجمن به خاطر طولانی شدنشون ناقص باقی میمونن.
    ممنون
     
    نوشته شده توسط mtshavandi در ‏2 آوریل 2013
    ghasemrayaneh از این پست تشکر کرده است.
  18. mosi34

    mosi34 Member

    ارسال‌ها:
    67
    تشکر شده:
    92
    امتیاز دستاورد:
    18
    سلااااااااااااااااااااااااااااااااااااااااااااااااااااام

    وااای واقعا باورم نمیشه اینجا دارین این آموزشو میذارین. منو بگو داشتم با این زبون ناقصم تو سایتای خارجی میگشتم . هه هه یار در خانه و ما گرد جهان میگردیم
    ادامه بده من پشتتم :green:
     
    نوشته شده توسط mosi34 در ‏4 آوریل 2013
  19. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    درس اول
    استفاده از تمپلتهای اماده دریمویور
    دریمویور برای راحتی کار یک سری تمپلتهای اماده برای کاربران خود اماده کرده است
    فایلی ک دانلود کردین را درون فتوشاپ باز کنید
    و گروپ color را فعال کنید همانطور که میبینید شما در این پوسته یک هدر یا سرفصل. یک فوتر یا پاورقی یک سایدیبار یا نوار کناری میبینید حالا ما میخواهیم این حالت را درون دریمویور پیدا کنیم
    دریمویور را باز کنید و یک سایت درون ان تعریف کنید ( پوشه my-tm درون دستکتاپ)
    از منو فایل new را انتخاب کنید (ctrl+n)
    و تنظیمات را همانند تصویر زیر انجام دهید

    Capture.PNG
    و ok کنید به محض این کار یک کادر برای ذخیره استایل فایلتون باز خواهد
    شد پس یک پوشه جدید درون پوشه my-tm به نام css بسازین و فایل را با نام style.css در این پوشه ذخیره کنید.
    سپس دریمویور فایل html شما را به صورت اتوماتیم باز خواهد کرد واز منوی فایل
    saveAs را انتخاب کرده و فایل را با نام index.html ذخیره کنید(درون پوشه my-tm)
     
    آخرین ویرایش: ‏6 آوریل 2013
    نوشته شده توسط websaz2012 در ‏6 آوریل 2013
    PedramKarimi، karezgraphic و ghasemrayaneh از این ارسال تشکر کرده اند.
  20. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    درس دوم
    ویرایش تمپلتهای اماده دریمویور
    حالا که ما تمپلتمونو انتخاب و ذخیره کردیم حالا وقت ان رسیده که ان را بر اساس نیاز خود
    تغییر دهیم روش کار بسیار ساده است اول از همه پانل css style را باز کنید(windows > css style)
    همانطور که مشاهده میکنید در این پانل یک سری کلاس هایی است که به شرح هر کدوم از انها میپردازیم
    Body : به معنای بدنه - تگی است که کل وب سایت ما رو در بر میگیرد
    Ul,ol,dl :تگهای لیست ما رو تشکیل میدهند
    h1, h2, h3, h4, h5, h6, p : به این تگهای تگهای متنی میگویند که تگهی h تگهای سرفصل و تگ p تگ پاراگراف میباشد.
    a img : اگر شما به یک تصویر در وبتون لینک بدهید با این کلاس میتوانید به ان استایل دهید.(تگ مخصوص تصاویر لینک دار)
    a:link : تگ مخصوص لینک ها .
    a:visited : تگ مخصوص لینکهای بازدید شده.
    a:hover, a:active, a:focus : تگ زمانی که موس بر روی لینک قرار میگیرد(کلیک نمیشود:hover).
    container : کلاس اصلی دربر گیرنه وبمون (ما وبمون را بر روی این کلاس سوار میکنیم).
    header : کلاس سر صفحه وبمون.
    sidebar1 : کلاس منوی کناری وبمون.
    content : کلاس مخصوص مطالب سایت مثل پست های وبمون.
    footer : کلاس مخصوص پا ورقی وبمون.
    .fltrt : مخفف عبارت (float right) کلاسی است که اگر به هر تگی داده شود ان را به سمت راست شناور میکند.(بیشتر برای تصاویر کاربرد دارد)
    fltlft : مخفف عبارت (float left) کلاسی است که اگر به هر تگی داده شود ان را به سمت چپ شناور میکند.(بیشتر برای تصاویر کاربرد دارد)
    ***** برای راحتی کار و خوانایی ما بعدا این دو کلاس را به right و left تغییر نام میدهییم ***
    clearfloat : کلاس است که برای بهینه سازی تگهایی که حالت شناور را دارا هستند(اگر چند تگ در یک تگ دیگر شناور شده باشند تک مادر مخفی میشود که در این صورت این کلاس بعد از اخرین تگ شناور شده قرار میگیرد تا طرح بهم نریزد)
    خوب بعد از اشنایی تگهاو کلاسها وقت ان رسیده که ان را بر اساس نیاز خودمون تغییر دهیم
    به فایل psd یک نگاه دیگر میندازیم (گروپ color خاموش باشد)
    اگر بادقت نگاه کنید میبینید که پس زمینه وبمون دارای رنگ سفید میباشد اما با دقت بیشتر درمیابیم که یک حالت گرادیانتی که از بالا با رنگ #DCDFE0 شروع و به رنگ #E8EBEC ختم میشود.
    فعلا ما همون رنگ زمینه #E8EBEC را در نظر میگیریم سپس در اخر برای زمینه از تصویری که از این فایل گرفته میشود استفاده میکنیم.
    بر روی تگ body در پانل css style دو بار کلیک کنید تا پنجره ای باز شود و تنظیمات انرا همانند مراحل پایین انجام دهید.
    تنظیمات برای متن اصلی وب سایتمون.


    1.PNG

    تنظیمات مخصوص زمینه وبمون

    2.PNG

    تنظیمات مخصوص راست چین کردن وبمون

    3.PNG


    Ok کنید و کلید f12 را فشار دهید و نتیجه را در مرورگر خود ببینید.

    حالا به ان خاصیت direction: rtl; نیز بدهید (body)
    مرحله بعد سراغ ul, ol, dl میرویم و خاصیت list-style: none را به ان اضافه میکنیم تا لیستهای ما دارای هیچ علامت یا شماره ای نداشته باشد.
    سراغ a:link میرویم رنگ color را به #2fa694 و text-decoration را به none تغییر میدهیم.
    رنگ a:hover, a:active, a:focus را به #FF0000 تغییر دهید
    سراغ header میرویم و رنگ پس زمینه را کلا پاک میکنیم.
    حالا بریم سراغ sidebar1 و عرض ان را از 180 به 310 پیکسل تغییر و رنگ پس زمینه را حذف کرده و pading botoom ان را پاک کنید.
    نوبت .content است عرض را به 640 پیکسل تغییر و padding را نیز پاک میکنیم.
    سراغ footer بروید و background-color و padding ان را نیز پاک کنید .
    تو این مرحله ما میخواهیم دو کلاس را تغییر نام بدهیم چون نام های دوکلاس بسیار به هم شبیه بوده و شاید باعث اشتباه کردن ما شوند.
    روی کلاس .fltrt راست کلیک کرده و گزینه rename class کلیک کنید در پنجره جدید در کادر دومی عبارت right را تایپ کنید ok سپس yes و سپس replacee all و yes را بزنید
    مرحله بعد هم کلاس .fltlft را نیز به left تغییر دهید.
    فایل نهایی تا این مرحله:
     

    پیوست ها:

    • lesson1.rar
      اندازه فایل:
      کیلوبایت 4.7
      نمایش ها:
      26
    آخرین ویرایش: ‏7 آوریل 2013
    نوشته شده توسط websaz2012 در ‏7 آوریل 2013
    key12، mtshavandi و ghasemrayaneh از این ارسال تشکر کرده اند.

به اشتراک بگذارید