読者です 読者をやめる 読者になる 読者になる

OMGmag

デザイン、アート etc...センスでご飯を食べてるblog

モックアップでレベルアップやーちゅてな!_Photoshop Lesson04

 

わしや(^ω^)

生きとったけワレ!こないだの記事はぎょうさん読んでもろておっちゃんごっつ嬉しかったわ。おおきにな!ブックマークもようけしてもらえたし「人気です!」ちゅて色んなとこで紹介してもらえてん。「やってて良かったー!」おもたわほんま。

 

www.omg-ox.org

 でや。

忘れられへんうちにまた来たちゅうわけやんけ!

ただな、この記事は初心者とかこれから勉強してみよかと思とる人らにも「簡単にできる内容を紹介する」ちゅうのんがほんまの目的やねん。そやし、ゴリゴリ使いこなせてる人には参考にならへんと思うわ。おっちゃんもむずかしい事はわかれへんし、その辺あんじょうたのむで。

おっちゃんは何でも「まずは物事のハードルを下げる」ちゅうのんがいっちゃん大事やと思てるワケやねん。しょーみの話。ややこしい専門用語ばっかり使こてアレしてたら初心者は頭ごっちゃなるやろが!

せやさかい、これから勉強する人にオモロがって貰えたらそれでええねと思てんねや。その方が興味も湧きやすいやろ?楽しみながら勉強すんのんが一番ええさかいな。
Photoshopの入り口おっちゃんがガバガバにしたろけぇ!ちゅてな。ちがうか。
ぎょうさん読んでもらえるようになったし、一応言うとこおもてな。

ほないこか。

今回はな「モックアップの使い方」ちゅうのんいってみよけ!モックアップて何やねんちゅたら、あのーあれやんけ、製品になる前のプロトタイプ、模型・試作品みたいな意味やねんけど、最近ではwebデザインの業界でもよう使われる言葉やし、自分らも聞いた事あるんちゃう?

 

まぁあれや、先に完成品見てもらおか!今回はこんなん作んでー。

f:id:omg-ox:20160817000712j:plain

どやろか?ええ感じやろ(^ω^)

でもごっつ簡単や!一瞬や!ちゃーやってしまいや。こんなんをモックアップちゅうねんけどな。あんなコレな、macやiphoneの画面に任意の画像をはめ込む事ができんねん!ただし、いまから作るんはこの画面の中だけや。「ほなこの写真はどないすんねんおっさん」て話やねんけど、

無料で公開してくれてる神さんみたいな人がおるんやんけワレぇ!!!

すごいなーほんま。ありがたい話やで!ほんまおーきに!今回は素材としてダウンロードしたモックアップにPhotoshopで任意の画像をはめ込んでいく所までを説明して行くで!簡単やし、スグ終わるわ。ブログやWEBサイトやってる人らは、自分トコのホームページのキャプチャーとかはめ込んでもおもろいんちゃうけ?知らんけど。

ほないこけ。

今回はここからダウンロードさしてもろたで。
https://www.mockupworld.co/free/start-up-apple-devices-mockup-collection/

ファイル開いてみーや。レイヤーはこんな感じになっとるわな?

f:id:omg-ox:20160816205600j:plain

ほな最初に《macbook》のレイヤーの中見てくれるけ?
フォルダのアイコンの横の三角マーク押すんや。

f:id:omg-ox:20160816205654j:plain

ほな中に「Double Click to replace screen」ちゅうのんがあるわな?

これを言われた通りにダブルクリクリせえや(^ω^)


そしたら別の窓ブワー開いて《macbook》にはめ込まれてた画像が表示されるやろ?

f:id:omg-ox:20160816205727j:plain

あとはこれを好きに編集したらしまいや!!!

あ。もう説明終わってもたー。ごっつ簡単やろ?好きに編集したら保存して最初に開いたファイルに戻ってみ?ちゃんと反映されとるはずや!どや、できてるけ?

わしはこんな感じにしてみたで。

f:id:omg-ox:20160816205829j:plain

f:id:omg-ox:20160816205849j:plain

な?ちゃんと角度をつけて反映してくれるわけやねん。便利やな!
ほな同じように《iPhone》と《iPad》の方も編集したらええわ。

このモックアップはめちゃようできてんねん。ちょっと《iPad》レイヤー見てくれるけ?ここに【スマートフィルター】いうのがあるやろ?

f:id:omg-ox:20160817001411j:plain

このフィルターで、写真の奥にあるipadの画面のボケを表現してんねん!

ためしにスマートフィルターの横の目玉マークをクリックして非表示にすると、微妙にエフェクトかかってるんが確認できると思うで。芸が細かいなぁ。作ってくれた人はセンスあるわ!天才やわ。ほんで無料で公開してくれてるんやさかい男っトコ前やでぇ。

他にも看板とか名刺とか、いろんなモックアップが公開されとるから好きなやつダウンロードして使わしてもろたらええわ。やり方は全部一緒や。いくつか作ってみたし参考にしてくれや。

f:id:omg-ox:20160817011822j:plain

f:id:omg-ox:20160817011854j:plain

f:id:omg-ox:20160817011934j:plain

 

www.mockupworld.co

さいごに注意点や

Photoshopておもろいやろ?こんなコトも簡単にできんねやで!しかも無料で公開されとんねんからほんま感謝して使わしてもらおな!

ただし、Free言うても商用利用NGやったりクレジット表記が必要やったり、色々規約あっさかい絶対守りや?なんか問題起こってもおっちゃんしらんでー?自己責任でたのむわな。英語のサイトやから言うても「そんなもん関係あらへん」ちゃうねん!翻訳でもなんでもしてルールに沿って使かわしてもらお!

作者をリスペクトするっちゅうスタンスが大事やおもうで!

今回のんは勉強したてのコでも簡単に見栄えのええやつ作れる思うわ!簡単やったやろ?まだ触ったことない自分らもちょっとは興味持ってくれたけ?

そうか、それやったらおっちゃんも嬉しいわ(^ω^)

今日はこれぐらいにしとこか!
また近いうち来るでー。

ほなさいなら!

《了》