Web Design Internship at FJÖRD, LLC

[remote-internship-blog]

[iPhone壁紙] 手袋(ブルーグリーン、ピンク、判子風イラスト、ザラザラテクスチャ)

パスを扱うのは、illustratorの方が得意な気がします。でもザラザラした感じを出すのはphotoshopの方がよい感じなような…。 結局、Photoshopもillustratorも両方使って仕上げました。

参考

Photoshopでざらざらのノイズテクスチャをデザインする方法 http://photoshopvip.net/archives/17494

イラレで消しゴム判子風イラストの作り方 http://coro46.blog.fc2.com/blog-entry-4.html

[remote-internship-blog]

[作業週] バナー作成 その2：俺の進路を決めた霊

昨日は風邪でお休みを頂いたので、一昨日の続きで。出来上がりに納得がいかなかったので、案3を作らせてもらうことにしました。

俺の進路を決めた霊

俺の進路を決めた霊 http://kowabana.jp/stories/16538

ポイント：

怖話のタイトルとバナーが乖離しているとユーザにチェックしてもらいづらいだろうから、タイトル＋内容に沿ったものが良いと判断

猫の毛をマスクするところ

タイトルから決意みたいな雰囲気を感じたので、出島明朝というがっしり目の明朝を選択

案その3：

References

tips：

Photoshopの切り抜き、選択範囲いろいろ：で、結局どれがいいの？ 2. 輪郭がハッキリしていない場合 http://webdesignrecipes.com/photoshop-some-clipping-technic/#p2

無料で使える！明朝体の日本語フリーフォント素材まとめ http://switch-box.net/free-japanese-mintyo-font.html

12.文字に影をつける ［レイヤー］→［レイヤースタイル］→［ドロップシャドウ...］ http://www.fmod.jp/qp/12/12.html

photos：

笑顔が可愛いツインテールの女の子［モデル:こころ］ http://www.pakutaso.com/20130905256post-3280.html

緑が茂る廃線道 http://www.pakutaso.com/20130418114post-2666.html

[remote-internship-blog]

[作業週] バナー作成：俺の進路を決めた霊

Photoshopでバナーを作ってみました。 自分のスキルでは割といいのが作れたと思うのですが、カラーはまだ無理でした。あと、適切なフォントを使ってストーリー名を入れることも無理だなぁと痛感。@machidaさんにお願いしようと思います。最終、どんなものができるのか楽しみです。

バナー：俺の進路を決めた霊

俺の進路を決めた霊 http://kowabana.jp/stories/16538

案1：

案2： 家屋 cc by TANAKA Juuyoh (田中十洋)

参考：References

Reference tips：

コントロール押しながらクリックすると、オブジェクトが選択されることを発見：

Photoshopのドロップシャドウを使わずに影を作る http://tutorial.yossy-m.net/?p=24

Reference photos：

散歩する恋人 http://www.pakutaso.com/20120651163post-1570.html

緑が茂る廃線道 http://www.pakutaso.com/20130418114post-2666.html

石畳とブラフ18番館 http://www.pakutaso.com/2011045511618.html

Japanese traditional style farm house / 農家(のうか) http://www.flickr.com/photos/tanaka_juuyoh/4635282642/

[remote-internship-blog]

[作業週] 怖い壁紙：怪しい木

怖い壁紙：怪しい木

空を切り取るところは青チャンネルを使って。その後、真ん中の目立つところは丁寧にブラシで塗りつぶしてマスクを作りました。

怪しい木 http://kowabana.jp/wallpapers/652

オリジナル：

不気味な木の枝 http://www.pakutaso.com/20120309083post-1312.html

使用したtip：

Photoshopの切り抜き、選択範囲いろいろ：で、結局どれがいいの？ 1.2. チャンネルを使って切り抜く http://webdesignrecipes.com/photoshop-some-clipping-technic/#p12

Twirl / Swirl Effect in Photoshop http://www.entheosweb.com/photoshop/twirl.asp

[remote-internship-blog]

[学習週] iPhone壁紙紹介サイトを作る。デザインカンプ：design comprehensive layout

昨日の続き。デザインカンプ編。 12月はお休みを頂こうと思っているので、今週が年内最後の学習週。というわけで、どこを来年からやるかハッキリさせておきます。

デザインカンプ：design comprehensive layout

昨日のワイヤーフレームを参考に作りました： (MacでSketchを使用) (サイドバーの色が違うのは、姉妹サイトの色を予め決めておこうという魂胆) (左から一覧(pc用)、一覧(mobile用)、詳細)

描いた後に、他の人のはどんなもんだろうと思って探してみたら、良いヒントが。

Hints for Completing the Comprehensive Layout * Use coloured pencils or marking pens to represent the colour of each element. * Letter all type in the exact position desired. Make the type look like the actual kind. * Use lines to represent the correct position of small type. but attach the typewritten copy to the design. * Draw the illustrations carefully in the correct position. * Block the space for the photograph(s) or the illustration(s), if they are used, and attach the glossy print if it is available.

上は参考ページの引用なんですが、とても参考になったのでざっくりと訳しました。

各要素に色を付け、役割をはっきりさせること。

全ての文字を入力し、正しい位置に配置する。最終形と同じに。

小さな文字は補助線を使って配置すること。文字には適切なフォントを使って表現すること。

イラストの配置は正確に。

写真やイラストは区切りを作って配置すること、(紙の場合？)光沢のあるものを貼り付けるのが良い。

参考：

THE LAYOUT PROCEDURE http://www.angelfire.com/pro2/jonkersley01/design.html

考慮が必要なところ：design iteration

上を意識して作ったカンプを見ると、いくつも不明瞭なところが出てきました。ナルホド！iterationデス。 これは年明けの最初の作業としてメモしておきます。

サイト名が未確定

ロゴが未確定

文字の色の濃さ、大きさが未確定

aboutに入れる文字が未確定

aboutの背景色

壁紙それぞれのtitle、descriptionが未確定

pcサイトでマウスオーバーの時にアニメーションが未確定

姉妹サイトへのリンク、紹介の仕方が未確定

姉妹サイトの色設計

追加：動線：ウロウロしてもらう工夫

＋ウロウロしてもらう工夫(回遊性)、拡散する工夫が必要だと感じました。

1件表示時、似た壁紙を合わせて表示

アクセス数を表示

姉妹サイトへの導線：冬版を作るので、春版のリンクを貼ったり、春の似た壁紙を表示

メールでiPhoneへ送る(PCで見ていた場合に、友達に送りたい場合に)

その他参考

気になった記事を。 自分のサイトのデザインの資料集。ロゴの作り方がシンプルで勉強になる。

Personal Site by Blaze Pollard http://dribbble.com/blaze/projects/79811-Personal-Site

[remote-internship-blog]

[学習週] iPhone壁紙紹介サイトを作る。ワイヤフレーム

昨日の続き。手順が明らかになったので、ワイヤフレームを作ってみます。

ワイヤーフレーム：wireframes

ブレインストーム。ホワイトボード(紙でもOK)に手書きで書いて、ざっくり認識を合わせる

紙やcacooにしっかり書き直す。

共有してしっかりと認識を合わせる

参考：

Wireframes – Worth Their Weight In Gold http://viget.com/inspire/wireframes-worth-their-weight-in-gold

構築のスピードとクオリティをあげる、本気のワイヤーフレームの書き方 http://web-d.navigater.info/cat2/post-23.html

How to Create Website Wireframes http://www.webcreatorbox.com/en/tutorials/basic-wireframe/

Wireframe Showcase http://www.wireframeshowcase.com/

Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches http://designshack.net/articles/inspiration/close-photoshop-and-grab-a-pencil-the-lost-art-of-thumbnail-sketches/

こんなのができました： (FityThreeのPaperで描いてみた)

作成手順を振り返りながら進む：iteration the steps

作成手順に従って(若干前後してますが)、

参考にしたいサイトをピックアップ -> シンプルなサイトが好きな事がわかりました：

http://poolga.com/

http://freeios7.com/

http://parallaxize.com/

http://www.alliphonewallpapers.com/

ブレインストーム。ホワイトボード(紙でもいいんでしょうけど)に手書きで書いて、ざっくり決める -> 上に描きました

紙やcacooにしっかり書き直す -> 上に描きました

色・イメージを決める

ベーシック・地味

スマート：iOS7

温かい感じ

冬っぽい メイン：黄色、オレンジ ベース：白か薄いグレー アクセント：

ウロウロしてもらう工夫、拡散する工夫が必要だと感じた

1件表示時、似た壁紙を合わせて表示

アクセス数を表示

姉妹サイトへの導線：冬版を作るので、春版のリンクを貼ったり、春の似た壁紙を表示

メールでiPhoneへ送る(PCで見ていた場合に、友達に送りたい場合に)

要素

先日と同じですが確認に。

要素：

ロゴ

サイトタイトル

一覧(wallpaper small thumbnail*10)

wallpaper詳細ページ(middile thumbnail)

about in footer or sidebar

wallpaper title

wallpaper description

small thumbnail

middle thumbnail

wallpaper image

artist's name

download url

post date

[remote-internship-blog]

[学習週] iPhone壁紙紹介サイトを作る。作成手順の整理。

昨日の続き。

サイト作成の手順

サイトを決める。サイトマップを作る

いくつかサイトを選んで、お客さんの好みを知る

テイストの違う物をピックアップ

好みが、サイト内容にマッチするかを確認

色はこのステージで決める

ワイヤーフレームを作る：cacooやphotoshopで。

商品一覧ページがどんなものとか双方の認識のブレを無くす

必要な要素を洗い出し、要らないものを削除する

よいコンテンツ(キャンペーンなど)が幾つもあるなら、スライドショーにして複数見せましょうと提案

スマホ対応考える

デザインカンプを作る

必要なら何度も作りなおす

ワイヤーフレームの時点で共有が出来ていると、そう作りなおす必要もない

ワイヤーフレームとカンプで担当が違うと、何回も作り直すことになったりする

webアプリの場合は、早く出して後で改善のようなものも多い

素のHTMLで書く

Vagrantを使ってローカルでWordPressを動かす

WordPressテーマを作る

Heroku+WordPress

最初単純なCSSで、後にhaml, sassを実践

スマホ対応

ステップ1-3

machidaさんに色々相談して、どういう手順があるのか教えてもらいました。要素が大体出てきたので、ワイヤーフレームを作りながら、色や参考にするサイトなどを決めていきたいと思います。

要素：

ロゴ

サイトタイトル

一覧(with small thumbnail*12)

wallpaper詳細ページ(with middile thumbnail)

about in footer or sidebar

wallpaper title

wallpaper description

small thumbnail

middle thumbnail

wallpaper image

artist's name

download url

post date

[remote-internship-blog]

[学習週] iPhone壁紙紹介サイトを作る。構想。

Photoshopはぼちぼち慣れてきたので、サイト作ったらどうですかと@machidaさんにアドバイス頂いたので、ネタを考えてみました。

iPhone壁紙紹介サイト

自作アプリの紹介をしようと思ったのですが、そうそう沢山のアプリを開発できるわけでもなく、他人のアプリをレビューしたいわけでもないので、最近やりだしたiPhoneの壁紙だったらもう少し気軽に出せるかもと思って、自作のiPhone壁紙を紹介するサイトにしたいと思いました。

決めていること：

無料で作る

Herokuで作る

WordPressを動かす

無料DBデータ容量5MB

上から考えて、単なる壁紙紹介サイトだといずれ容量制限に引っかかる、なので逆に考えることにしました。そこから出発して、色々発想を膨らませた結果：

紹介する数を○個と決める：10個とか50個とか

テーマを決める：冬 -> あとあと春版を作って広げられる＋相互で高めあえるかも

ページネーションも無し：数を制限することで構築も簡単に

一覧でタイトルと説明も表示する

詳細説明をmouse over時に可愛らしく表示したい

詳細説明を読んでもらうことで、第一印象だけでなく、絵そのものに興味を持ってもらいたい

HTML要素とかデータとか：

ロゴ

一覧(wallpaper page url*10)

wallpaper詳細ページ

about in footer or sidebar

wallpaper title

wallpaper description

small thumbnail

middle thumbnail

wallpaper image

artist's name

download url

post date

[remote-internship-blog]

[作業日誌] 都市伝説：新人ギャングの入団儀式

怖い壁紙を小休止、都市伝説を探しました。

ライトアウト：新人ギャングの入団儀式

ライトアウト：新人ギャングの入団儀式 http://kowabana.jp/urban_legends/66

同様の伝説がwikipediaのurban legendsの項にも紹介されていました。

Lights Out! http://www.snopes.com/crime/gangs/lightsout.asp

[remote-internship-blog]

[作業週] 怖い壁紙作り。目を光らせる

Photoshopを使って、目を光らせています。微妙に難しい。

machidaさんに教えてもらったのですが、写真加工、簡単にやっちゃう場合はsnapseedっていうiPhone/AndroidのGoogleの写真加工アプリを使って加工したりされてるみたいです。さらにPathやInstagramのフィルターを何度も重ねたりとか。メモメモ。

先週作った目の光った猫と比較すると、光が濃くなった？分、自然？に光っている感じがするような気がします。

オリジナル：

市松人形 http://www.pakutaso.com/20120519150post-1521.html

使ったtip：

Photoshopを使って物をネオン風に光らせる方法 http://raksul.com/magazine/2153_Photoshop%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E7%89%A9%E3%82%92%E3%83%8D%E3%82%AA%E3%83%B3%E9%A2%A8%E3%81%AB%E5%85%89%E3%82%89%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%20.html/

[remote-internship-blog]

[学習週] Illustrator入門：pattern, path, art brush

illustratorを使い始めました。photoshopと全然また違って慣れない…。苦戦中ですが、頑張って使いこなしたいです。 何を作るってところまでいかなかったのがとても残念。

Illustrator tips

パターンを登録して背景を作る http://illure-to-photosho.seesaa.net/article/136395017.html

【Illustrator】複数線幅を扱う際のTIPS http://hamfactory.blog77.fc2.com/blog-entry-30.html

アートブラシ：芝生（草）の作り方 http://illure-to-photosho.seesaa.net/article/135623529.html

[remote-internship-blog]

[作業週] 怖い壁紙作成「トンネルに向かって」

今日はあまりひらめかず、一枚できただけでした。

トンネルに向かって

トンネルに関する怖いお話をいくつか読んで、イメージを膨らませました：

トンネルにまつわる怖い話 http://kowabana.jp/search?word=%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AB

画像がそのままでは明るすぎるので、Image - Adjustments - Black&WhiteのDakerで白黒にしました。更にクローンスタンプツールで、右の目立ち過ぎなライトを消しました。

オリジナル：

薄暗いトンネルを走る http://www.pakutaso.com/20130726183post-2984.html

[remote-internship-blog]

[作業週] 都市伝説 LSDの青い星タトゥー、家庭用品メーカーP&Gと悪魔崇拝

面白い都市伝説を見つけたので投稿しました。

LSDの青い星タトゥー

学校から都市伝説的なものが配られるというのに驚きました。アメリカだけでなく、ブラジルやメキシコ、ポルトガルでも知られているようです。

LSDの青い星タトゥー http://kowabana.jp/urban_legends/61

参考：

Blue star tattoo legend http://en.wikipedia.org/wiki/Blue_star_tattoo_legend

画像検索：

image: blue star tattoo LSD https://www.google.co.jp/search?q=blue+star+tattoo+LSD&site=imghp&source=lnms&tbm=isch

家庭用品メーカーP&Gと悪魔崇拝

この噂のお陰で裁判ざたになって、22億円ものお金が動いたというのにびっくり。旧ロゴについてはおぼろげに覚えていたのと、裁判の結審が1997年と割と近年だったので、身近に感じました。

家庭用品メーカーP&Gと悪魔崇拝 http://kowabana.jp/urban_legends/62

参考： 以下の記事中にロゴにあるといわれる悪魔の角と数字666の解説もある

Trademark of the Devil http://www.snopes.com/business/alliance/procter.asp

[remote-internship-blog]

[作業週] 怖い画像作成：目をネオン風に光らせる方法

Photoshopで怖い画像作成を行っています。

加工前と後

半開きのドアの向こう http://www.pakutaso.com/20130118021post-2336.html

二つ目：

こちらを振り返るヌコ http://www.pakutaso.com/20120342083post-1313.html

Photoshop tip

Photoshopを使って物をネオン風に光らせる方法 http://raksul.com/magazine/2153_Photoshop%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E7%89%A9%E3%82%92%E3%83%8D%E3%82%AA%E3%83%B3%E9%A2%A8%E3%81%AB%E5%85%89%E3%82%89%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%20.html/

[remote-internship-blog]

[学習週] iPhone Wallpaper作成 色違いの七宝と、三角パターン

昨日upしそびれました。先日作った七宝の色違いと、三角パターンを作りました。 ファイルが大きいので最後にまとめて並べます。その他、勉強になったことを挙げておきます。

Photoshop tips

シンプルなブラシの使い方解説：

Brushing Up On Photoshop’s Brush Tool http://www.smashingmagazine.com/2009/11/16/brushing-up-on-photoshops-brush-tool/

モザイクパターンの作り方：

Photoshop Filters: how to make a mosaic in 4 steps http://www.practicalphotoshopmag.com/2012/02/23/photoshop-filters-how-to-make-a-mosaic-in-4-steps/

Design references

なんかロゴが気に入った：

@ApacheMesos https://twitter.com/ApacheMesos

parallax wallpapers

今回できた作品たち。 三角の物は、フォルダがが透けることや下4つのアイコン部分だけ透けるのを意識して作りました。色が綺麗。

[remote-internship-blog]

[学習週] Emerald Green Sippo(七宝) Pattern Parallax iPhone Wallpaper

引き続き、Photoshopに慣れながらパターン壁紙を作っていきます。

Emerald Green Sippo(七宝) Pattern Parallax Wallpaper

大好きな七宝パターンを、好きな色で陶器風に作ってみました。

パターンを描きます

パターンを適当に白ー黒濃淡で塗ります

Filter > Pixelate > Crystallize

Filter > Artistic > Plastic Wrap

バケツで色を付けたレイヤーにSoft Light blending option

Reference：

Crystallize in PhotoShop http://www.kirupa.com/motiongraphics/crystallize.htm

PhotoshopやIllustratorのtipsに続きます：

PhotoshopでPathをブラシで塗る時、ランダムな太さで塗りたい

下にある手書き風のカメラを描く方法をPhotoshopでやってみたかったのですが、うまい方法が見つけられず、illustratorが欲しくなりました：

Create a Sketchy Hand-Drawn Camera Illustration in Illustrator http://vector.tutsplus.com/tutorials/illustration/create-a-sketchy-hand-drawn-camera-illustration-in-illustrator/

Examples And Tips For Using Illustrator’s Warp Tools http://www.smashingmagazine.com/2011/07/28/examples-and-tips-for-using-illustrator-s-warp-tools/

Photoshopだと、LiquityフィルターのTurbulenceが使ってみたかったのですが、CS6になったときに無くなってしまったみたいで、すごく残念です…：

A Comprehensive Guide to Photoshop’s Liquify Tool http://psd.tutsplus.com/tutorials/tools-tips/a-comprehensive-guide-to-photoshops-liquify-tool/

machidaさんに相談したところ、自分だったら下記の要領でやるそうです。なるほど、カメラだったら線が描ける人ならいいかもしれません(私にはとても無理！)。あとパターンだと沢山描かないとなので手書きは厳しいかもしれません。でも、参考になりますね！

Gペンなどで太さを意識しつつ描く → スキャン → フォトショで線だけを抜き出す → 着色の流れ

[remote-internship-blog]

iOS7 壁紙作成メモ

壁紙作成にあたって、気になることをまとめました。

iOS7のロック画面の文字色：#b2b2b2で文字色が白に

背景色、HSBのB、ロック画面文字色の順に：

＃ffffff 100% グレー

＃cccccc 80% グレー

＃b2b2b2 70% 白

＃999999 60% 白

下記より抜粋。更に詳しい文字色の決め方も書かれています。

iOS7のロック画面の文字色 http://tomtomcafe.jugem.jp/?eid=185

壁紙サイズ：744x1392

画面サイズは640x1136、Parallax効果対応には：

Parallax対応壁紙 744x1392

Parallax効果を無くすには：

「視差効果を減らす」設定 Settings -> General -> Accessibility -> Reduce Motion を ON

Parallaxサイズと通常サイズの比較が分かりやすかった記事：

How to Make an iOS 7 Wallpaper that Doesn’t Zoom In http://ohmypizza.com/post/61044468401/how-to-make-an-ios-7-wallpaper-that-doesnt-zoom-in

Photoshopのドキュメントテンプレート機能

壁紙作成にPhotoshopを使いたいので、MS Officeみたいに、psdをテンプレートにして新規作成時にそれを選ぶと、テンプレート上のガイドやPath、背景色なんかが自動設定される機能を探したのですが、見つけられませんでした。自分で、テンプレートとしたいpsdを作って毎回別名保存というのが正しいようです。

参考にしたい壁紙

パターン、グレー カラフル三角 http://ios7wallpaper.net/iphone5s_5c_5_02053/

パターン、カラフル円グラデーション http://ios7wallpaper.net/iphone5s_5c_5_02121/

パターン、蔓・ツタ壁紙風 http://ios7wallpaper.net/iphone5s_5c_5_02157/

パターン、黒・グレー幾何学模様 http://ios7wallpaper.net/iphone5s_5c_5_01941/

パターン、グレー流線型 http://ios7wallpaper.net/iphone5s_5c_5_02088/

上のは、下記サイトで紹介されていました：

iOS 7にピッタリサイズの壁紙を選ぶならここ!!「iOS 7 Wallpaper.net」がステキ http://creativememomemo.com/ios7wallpapernet/

ここの壁紙も参考になる：

iPhone5/5s/4s/4・iOS7用の壁紙まとめました http://apple-info.ldblog.jp/archives/32344271.html