ハイクオリティなグラフィック描写を表現できるphotoshopチュートリアルまとめ「26 New Photoshop Tutorials to Improving Your Photoshop Skills」
ハイクオリティなグラフィック描写を表現できるphotoshopチュートリアルまとめ「26 New Photoshop Tutorials to Improving Your Photoshop Skills」 Photoshopを利用することで、リアルであったり、自分ではなかなか描き出せないようなグラフィック表現も実現させることができます。そんな中今回紹介するのは、ハイクオリティなグラフィック描写を表現できるphotoshopチュートリアルまとめ「26 New Photoshop Tutorials to Improving Your Photoshop Skills」です。 Create This Dark Matte Landscape Composite in Photoshop – Photoshop Tutorials まるで映画のポスターのようにリアリティのある表現から写真加工
jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法｜BLACKFLAG
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
【レスポンシブ対応】CSSだけでDIVの上下を入れ替える : おち研
上下に並んだボックス要素の順番を入れ替えるCSSです。レスポンシブにも対応しているので、デバイスごとにコンテンツの優先順位を変えたいときにも有効です。 CSSで上下に並んでいるボックス要素があったとき、CSSだけで順番を入れ替える方法です。 マークアップは論理的な読みやすさを優先して、レイアウトだけ遊びたい場合などに便利です。 また、メディアクエリで囲えばデバイスごとにコンテンツの順番を変えられるのでレスポンシブデザインとも相性が良いです。 上下のDIVを入れ替えるCSS 4つのDIVを box1, box2, box3, box4 の順に用意し、box1, box2 と box3, box4 をそれぞれ .wrap で包んで配置します。 【HTML】 <div class="wrap"> <div class="box1">box1</div> <div class="box2">box
Bootstrap対応のWordPressテーマ作成が簡単じゃなかった件 – LIQUID BLOG
こんにちは。 この記事は WordPress Advent Calendar 2015に参加したかった人達の Advent Calendar 2015 15日目の記事です。 Bootstrap対応のWordPressテーマを作成したときの黙示録です。 これからテーマを作成される方に少しでも参考になれば幸いです。 テーマ作成について WordPressテーマを配布する目的でゼロから作成します。 Bootstrapのフォーマットに対応します。 WordPress 4.2+ 使用ライブラリ：jQuery、Bootstrap 4 alpha Bootstrap class名の指定（前編） Grid グリッドレイアウトなど、テーマのテンプレートで自由に作成できる部分は簡単です。 問題は下記のように、WordPressが生成する部分のカスタマイズです。 Navbar カスタムメニュー wp_nav_m
【Webデザイン10選】ページ遷移のエフェクトが心地よいサイトまとめ｜エムハンドブログ｜大阪のホームページ制作会社｜創業21年のエムハンド
近年のWebデザインを見ると、フラットデザインやレスポンシブWebデザインなどの流れもあって、よりシンプルに、そしてすっきりした作りのサイトが増えています。このようなトレンドはマルチデバイスへの対応にも適していると言えますが、結果的に似たようなデザインのサイトが多くなり、シンプルである分、個性やインパクトに欠けてしまいがちです。 そこで、そのような欠点を補うために増えてきたのが、さりげないアニメーションやパララックスが施されているサイト。センスの良いものを多く見かけます。今回はそんな中でも「ページ遷移時のエフェクト」に注目して、心地よいエフェクトでページが切り替わるサイトをまとめてご紹介します。 iRobot ロボット掃除機ルンバ スペシャルサイト http://www.irobot-jp.com/roomba/800series/ 業種：家電 サイトの目的：製品紹介サイト サイトの特長：
エフェクト作成入門講座 Effekseer編 Fカーブを使った吹雪エフェクトの作成 - ICS MEDIA
エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第3弾です。普段エフェクト作成やゲーム開発をしない方も、本記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。前回のエフェクトと同様に、作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は第1弾の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。 今回のお題：Fカーブを使った吹雪エフェクト やってみよう：吹雪エフェクトの作成 エフェクトの構成図です。今回は大きく5つのパーツから成り立っています。サンプルファイルをダウンロードして、記事と照らし合わせながら進めることができます。各エフェクトの
スクロールによってCSSを変更し、パララックス効果を実現するjQueryプラグイン - Qiita
スクロールによってさまざまなCSSを変更することができます。 またプラグインのオプションをdata属性に設定できるjs（jquery.dataExtend）を使うとdata属性に指定するだけで効果を与えることができます。 以前も同じようなプラグインを作ってはいたのですが、複雑になりがちだったため なるべくシンプルに、再現したいと思ったことが工夫次第でできる作りにしたいと思い作り直しました。 GitHub: https://github.com/kamem/jquery.scrollParallax Description このプラグインには3つの機能があります。 任意の位置を通過したときに関数を実行する スクロール量に応じてcssを変化させる 移動距離に応じてcssを変化させる DEMO y scroll Requirement jquery jquery.dataExtend ※ jqu
aタグのdownload属性でサーバを介さずにファイルダウンロードする
この記事はHTML5 Advent calendarの16日目の記事です。 HTML5からaタグにdownloadという属性が指定可能になったようです。 この属性が指定されたaタグは、href属性の値をブラウザで開くのではなく、リンク先をファイルとしてダウンロードします。 今までcanvasで画像を生成した画像など、jsで生成したファイルをユーザに保存させるにはwindow.openにdata urlを渡して新窓で表示させ、ユーザに右クリ等で保存してもらう方法しか知らなかったのですが、 aタグのdownload属性がまさにやりたいことドンピシャだったので備忘録を残します。 デモ MDNにまさにドンピシャなデモがあったので、自作デモは割愛します。 canvasで生成した画像を新窓ではなくファイルダウンロードさせるデモです。 このとき、サーバに対して一切リクエストを飛ばしていないことがポイント
本当に使えるコーディングチェックサイト厳選3選
コーディングの正確性について、不安を持つWeb制作担当者は少なくないのではないでしょうか。 コーディング後に、ミスが発覚すると修正作業のために時間を大幅にロスしてしまう可能性があります。 できるだけミスを防ぐためにも、適切なコーディングができているかどうかをチェックできるツールはストックしておいた方がいいでしょう。 今回は、コーディングを担当しているものの自信が無いという方にオススメのコーディングチェックツールをご紹介します。 コーディングで気を付けなくてはいけないこと 制作するにあたって、コーディングレベルがありますが、HTML・CSSを利用する際に気を付けなくてはいけないことは単純に「正確に動作し、ブラウザによってサイト崩れが発生しない」ことなのではないでしょうか。 例えば、「リンクページをクリックしたが、正確にページが表示されない」や「PCでサイトを見たときには正常に動くのにスマホで
PhotoshopからSketchに乗り換えて幸せになろう - mikasakasa’s blog
この記事は CAMPHOR- Advent Calendar 2015の15日目の記事です。 こんにちは、みかさです。（ @mikasaka3 ） この記事では、グラフィックソフトのSketch 3について取り上げます。僕は今までPhotoshopを使っていたんですが、つい最近Sketchを使い始めて、「最高かよ」という気持ちになりました。 そこで今回は、Photoshopと比較してSketchの素敵だと思った点（まだまだ使い始めたばかりで不十分だと思います）を挙げていきたいと思います。ついでにSketchを便利に使うためのtipsを最後にちょっとだけ付け加えています。 Sketchとは 簡単にいうとUI、Web制作に特化したMac専用アプリです。（※Windows版はありません）現在のバージョンはSketch 3.4です。 Photoshopより安い まず、Sketchを使うにはSket
Sketchでデザインをして気付いたPhotoshopより優れているポイント | creive【クリーブ】
こんにちは。 Sketch3にPhotoshopから乗り換えて1年が経つデザイナーです。 すでに使っている人が多数かと思いますが、慣れ親しんだPhotoshopを止められない！という方もいるのではないでしょうか。 今回は、「Sketchって気になってるけど実際どうなの？」「Photoshopとどっちがいいの？」という方へ向けて、Sketchが優れている理由をいくつかあげてみました。 是非参考にしてください！ Sketchとは SketchはMac用のベクターグラフィックソフトです。 ベクターソフトでありながらピクセル基準で作成することが前提のつくりになっており、Web制作やUIデザインに特化しています。 日本でのweb制作といえば、Photoshopが有名かと思います。 筆者も以前はPhotoshopをメインに使っていましたが、今ではSketchに魅了されメインソフトにしました。 アプリケ
[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ
<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>
![[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2cf8d2fa440a82f4d989af711914223cad329f6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015121100.png)
キーワードプランナーばかり見て、読者を見ることを忘れていないだろうか？ | ブログアクセスが伸び悩んだ時に確認したい３つのポイント
PVが増えない！アクセスが伸びない！そんな時はこの３つのポイントを再確認せよ！【ブロガー弱者の兵法】ブロガー弱者の兵法、早くも６記事目となる。 今回は、既にブログを始めある程度時間が経過している人向けの記事。 多くのブロガーが経験する“伸び悩みの壁”を打破する方法についてお話ししていこう。 500PV/日の壁、2000PV/日の壁、5000PV/日の壁… 多くのブロガーが、一定の時期を向かえるとアクセスの伸び悩みを経験する。 ブログを始めた当初は、書けば書くほどアクセスが伸びる。（始めたばかりで全くアクセスが伸びない人は、根本的に間違った書き方をしている。） これがある意味中毒症状となり、その後のブログアクセスやブログ売上の成長を妨げる要因となるのだ。 書けば書くほどPVが伸びる → 質より量に目が行き記事量産に走る → 他人に役立つ記事ではなく「書ける記事」「書きたい記事」を書くようにな
Bootstrapで作るランディングページ・小規模サイトに、商用無料でバックリンク不要で利用できるテンプレート集 -Designstub
ランディングページ向けの縦長ページ、スモールビジネス向けの複数ページ、すべてがミニマルに美しくデザインされたレスポンシブ対応のBootstrapのテンプレートを紹介します。 テンプレートの良さはデザインだけではありません。いくつかダウンロードしてコードを見たところ、クリーンなHTMLでコメントもしっかりしているので、カスタマイズ性にも優れています。 Designstub ダウンロードには、メールアドレスの登録（無料）が必要です。 テンプレートの利用にあたっては、個人でも商用でもクライアントワークでも無料で利用で、クレジット表記は削除しても問題ない、とのことです。テンプレートとしての再配布・販売は禁止です。 詳しくは、ライセンスページをご覧ください。 ライセンスページ テンプレートは、縦長1ページ用と複数ページ用の2種類に分けられています。
エンジニア経験がなくても自分でコード書いて起業する方法 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? さて、今日も freee advent calendar やってまいりました。 freeeの CEO の佐々木です。今でこそ CEO 業にフォーカスしている訳ですが、会計ソフトfreee をリリースして世に送り出すまでは完全に微力ながら僕も第一線でコーディングしていました。僕の職歴は、ほぼほぼマーケティングとファイナンス（あと、ちょっとだけデータ分析）なのでエンジニア経験がある訳ではないのですが、起業したいという人に「どうやって勉強したんですか？」とよく相談を受けたりもするので、思うところを共有してみます。 #まず、こんな人が向いてるん
知らないうちに事故ってるかも…！Photoshopカラー設定を「全部」見てみよう
事故る、はホント 「編集」メニュー＞カラー設定、触ったことはありますか？もし初期設定の「一般用 – 日本2」のまま使っているとしたら、今までの仕事のなかに、色が違ったまま納品していたものがある、かもしれませんよ…WEBでも印刷でも同じです。 全ての内容を知っておくと、何かあったときにすぐ原因が分かるようになる、かもしれません。 全部の項目を見てみましょう。 「高度なコントロール」以外の設定を保存（※1）したプリセットを選びます。 印刷向けは「プリプレス用 – 日本2」、WEB向けは「WEB・インターネット用 – 日本」をベースにカスタマイズしましょう。 内容を理解していれば、カスタムすることで作業効率がもの凄く上がります。逆に、理解しないでいじると大変なことになります。 カスタムした内容は「.csf」ファイルとして保存され、InDesignやIllustratorでも同じ設定を使用できます
PHP 現在アクセスしているページのURLを取得する方法 | ぶろぶろ！
おはようございます、すずしんです。 現在、私は PHP のプログラミングをしているのですが…。 その際に、現在 アクセス している ページ の URL を 取得 する必要があったのでちょっと調べてみました。 今回の記事では、そのアクセスしているページのURLの取得方法について、備忘録としてまとめてみようと思います。 PHPでウェブプログラミングをしている方には需要があるかもしれませんね。 現在アクセスしているページのURLを取得する方法 PHPで現在アクセスしているページのURLを取得するには「 $_SERVER 」変数を使います。 この$_SERVER変数は配列になっていて、インデックスを指定することでサーバーに関する様々な情報を取得することができます。 プロトコルの取得 プロトコルを取得するには、$_SERVER変数のインデックスに「 HTTPS 」を指定します。 この値が設
【成功の秘訣公開】プログラミングを独学する時のNG項目と効率的な勉強パターン(Ruby, Python, Java, Swift) - プログラミングとデザイン、スタートアップの話
2020年1月28日更新 独学でプログラミングを勉強してエンジニアになれるか、挫折するかを分けるものは何でしょう？それは「効率の良い勉強方法を知っているか」と「やってはいけないことを知っているか」という2点です。 この記事では、プログラミングの挫折する可能性を限りなく低くし、エンジニアになれる方法を現役エンジニア目線でお伝えします。 その勉強方法だと絶対挫折しちゃうよ...ということがよくあります。どうして成功したのかということはメソッド化することは難しいですが、どうして失敗したのかということはケーススタディから学ぶことができて、それを避けることができます。 早く勉強したい！という焦る気持ちを落ち着かせて、独学を始める前にこの記事で「やってはいけない勉強方法」と「効率のいい勉強方法」を頭に入れておきましょう。 確実に挫折する勉強の仕方 本から勉強を始めてしまう チュートリアルから始めてしま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料！角ゴシックが少しかわいくデザインされた日本語フリーフォント -ニコ角フォント | コリス
まだ中央寄せで消耗してるの？ - @yoshiko_pg
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://kigyou-journey.com/kigyo-handan-1046/
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
Git入門：Git初学習者のための効率的な学習方法を考えてみた