Photoshop Layout یک بلاگ عکس

دوشنبه, ۲۰ام آبان , ۱۳۸۷ | ۱۸ دیدگاه

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

البته در این قسمت قصد ندارن که نحوه تبدیل Layout PSD به HTMLرو توضیح بدم ولی اگر درخواست ها در این زمینه زیاد باشه حتما در اولین فرصت اینکار رو خواهم کرد .

ابتدا یک صفحه در ابعاد ۸۰۰*۹۰۰ و بارنگ پس زمینه : ۱۳۱۳۱۳# باز نمایید . ابزار rectange tool را انتخاب کنید و با رنگی ما بین خاکستری و سفید (دلبخواه)
مشابه شکل زیر بکشید :

1



اکنون به لایه ای که توسط
Rectangle Tool ساخته ایم مشابه شکلهای زیر افکتهای زیررا بدهید :

2

3



نتیجه کار شما تا اینجا باید مشابه شکل زیر بشود :


Demo



در این مرحله لازم داریم تا عکس یک دوربین را بعنوان عکس بالای صفحه یا بنر انتخابکنیم . شما میتوانیداز عکسی که ما انتخاب کرده ایم استفاده کنید یا اینکه با توجهبه نیاز یا سلیقه خودتان از سایتهای
Photo Stockعکسی انتخاب کنید (برای پیدا کردن سایتهای Stock واژه stock photo site را در Google جستجو نمایید .


عکس مربوطه را ازاینجادانلود نمایید .


و آنرا مشابه شکل زیر وارد صفحه نمایید و به شکل دوربین افکتهایی مانند
Shaddow یا Reflection بدهید .


6



اکنون
Slogon و نام سایت خود را در سمت چپ بالا مانند شکل زیر بنویسی و افکتهای زیر را (مشابه
شکل) به آن اعمال کنید :

7

8



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



کار ما تمام است شما میتوانید سورس
PSD این layoutرا از اینجا دانلود نمایید .امیدوارم کهبراتون مفید بوده باشه .


DownLoad

همچنین در این رابطه بخوانید :

طراحی وب سایت از ابتدا تا انتها – قسمت اول (طراحی قالب)

Be Sociable, Share!


۱۸ دیدگاه


  1. Sepideh
    ۲۳ آبان ۱۳۸۷

    Salam
    az lotfeton mamnoonam kheili khosh halam ke tasmim gereftin ta Photoshop ro amoozesh bedin…..




  2. admin
    ۲۳ آبان ۱۳۸۷

    ما سعی میکنیم بهترین کاری و که میتونیم انجام بدیم
    البته به پشتیبانی، تشویق، اظهار نظر و انتفادات شما عزیزیان نیاز مندیم

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




  3. somayeh
    ۲۳ آبان ۱۳۸۷

    ممنون از مطالبتون.




  4. mohammadreza
    ۲۳ آبان ۱۳۸۷

    salam, merc vaghan khoob bood, man ba photoshop kar mikonam vali motasefane tarahie web balad nistam, omidvaram ba rahnamaiat, web design ro ham yad begiram. merc




  5. ابراهيم
    ۲۳ آبان ۱۳۸۷

    دوست دارم که از آموزشها ی شما در زمین طراحیی وب استفاده کنم ممنون میشم که با هم مشارکت کنیم




  6. vahid8264
    ۲۴ آبان ۱۳۸۷

    اگه نحوه تبدیل Layout PSD به HTMLرو توضیح بدبد ممنون میشم




  7. ali
    ۲۵ آبان ۱۳۸۷

    mamnoon az lotfet
    age mishe edame bedid




  8. solmaz
    ۲۵ آبان ۱۳۸۷

    salam
    mer30 az amozeshet
    be veblog man ham sar bezan
    bay




  9. basireh
    ۲۵ آبان ۱۳۸۷

    عالی بود ممنون از کار فوق العادتون




  10. جواد
    ۲۶ آبان ۱۳۸۷

    با سلام خیلی عالی بود بیشتر در موارد طراحی و ایجاد تصاویر متحرک توضیح بدهید
    با تشکر




  11. soli
    ۲۸ آبان ۱۳۸۷

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




  12. حورا
    ۱۴ اردیبهشت ۱۳۸۹

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




  13. نیما
    ۱۳ تیر ۱۳۸۹

    عالی بود




  14. جواد
    ۳۰ آبان ۱۳۸۹

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




  15. mahdi
    ۲ بهمن ۱۳۸۹

    اگه نحوه تبدیل PSD به HTMLرو توضیح بدید ممنون میشم!!

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

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




  16. Abbas
    ۲۸ بهمن ۱۳۸۹

    سلام … من سال ۸۳ دوره های ciw رو از آموزشگاه دیباگران گذراندم … و تا حدودی به php آشنایی دارم … می خواستم ببینم وقت میکنید چند جلسه خصوصی به من از طراحیه سایت با فتوشاپ و کلاسهای شی گرایی و gquery را یاد بدهید؟
    اگه جوابتان مثبت است با ایمیل مرا در جریان بگذارید




  17. کامران
    ۱ اسفند ۱۳۸۹

    به امید خدا به زودی کلاسهای نیمه خصوصی در این زمینه برگزار خواهیم کرد.




  18. ali aryan
    ۶ مرداد ۱۳۹۱

    آقا عالی بود -دمتون گرم
    تشکر



دیدگاه خود را بنویسید